Getting Started

Inside your React project directory install SonWan UI by running the following

npm i sonwan-ui

# or

yarn add sonwan-ui

npm i sonwan-ui

# or

yarn add sonwan-ui

Then import the css styling and js components by including this code in your js/tsx file

import "sonwan-ui/build/style.min.css";
import SonWan from "sonwan-ui";

import "sonwan-ui/build/style.min.css";
import SonWan from "sonwan-ui";

To use it, just simply render the component in your render function

const { Input, Switch, Card, CardItem, ListItem } = SonWan;
return (
  <>
    <Input placeholder="Search In Codesandbox" />
    <Card>
      <CardItem
        title="Yuzuha Usagi"
        subtitle="0821 - 7654 - 3210"
      />
    </Card>
  </>
);

const { Input, Switch, Card, CardItem, ListItem } = SonWan;
return (
  <>
    <Input placeholder="Search In Codesandbox" />
    <Card>
      <CardItem
        title="Yuzuha Usagi"
        subtitle="0821 - 7654 - 3210"
      />
    </Card>
  </>
);

Card

Card Component is a card wrapper component that automatically give you card layout and color. Inside card, you can add CardItem component that may contains avatar, title and subtitle.

<Card>
  <CardItem
    title="Bambang Eko"
    subtitle="0821 - 7654 - 3210"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/men/19.jpg"
        className="rounded-full"
      />
    }
  />
</Card>
<div className="dark">
  <Card>
    <CardItem
      title="Putri Saputri"
      subtitle="0821 - 7654 - 3210"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/1.jpg"
          className="rounded-full"
        />
      }
    />
  </Card>
</div>

<Card>
  <CardItem
    title="Bambang Eko"
    subtitle="0821 - 7654 - 3210"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/men/19.jpg"
        className="rounded-full"
      />
    }
  />
</Card>
<div className="dark">
  <Card>
    <CardItem
      title="Putri Saputri"
      subtitle="0821 - 7654 - 3210"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/1.jpg"
          className="rounded-full"
        />
      }
    />
  </Card>
</div>

Bambang Eko

0821 - 7654 - 3210

Putri Saputri

0821 - 7654 - 3210

Card List

You can add multiple CardItem inside Card, it will become stacked card list items. Each item can have avatar, title and subtitle.

<Card>
  <div className="opacity-50 my-1 text-black dark:text-white">
    Recent Contacts
  </div>
  <CardItem
    title="Samantha"
    className="py-4"
    subtitle="Bank - 0987 3422 8756"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/women/17.jpg"
        className="rounded-full"
      />
    }
  />
  <CardItem
    title="Karen William"
    className="py-4"
    subtitle="Bank - 0987 3422 8756"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/women/2.jpg"
        className="rounded-full"
      />
    }
  />
  <CardItem
    title="Angela Smith"
    className="py-4"
    subtitle="Bank - 0987 3422 8756"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/women/8.jpg"
        className="rounded-full"
      />
    }
  />
  </Card>
  <div className="dark">
  <Card>
    <div className="opacity-50 my-1 text-black dark:text-white">
      Recent Contacts
    </div>
    <CardItem
      title="Samantha"
      className="py-4"
      subtitle="Bank - 0987 3422 8756"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/17.jpg"
          className="rounded-full"
        />
      }
    />
    <CardItem
      title="Karen William"
      className="py-4"
      subtitle="Bank - 0987 3422 8756"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/2.jpg"
          className="rounded-full"
        />
      }
    />
    <CardItem
      title="Angela Smith"
      className="py-4"
      subtitle="Bank - 0987 3422 8756"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/8.jpg"
          className="rounded-full"
        />
      }
    />
  </Card>  
</div>

<Card>
  <div className="opacity-50 my-1 text-black dark:text-white">
    Recent Contacts
  </div>
  <CardItem
    title="Samantha"
    className="py-4"
    subtitle="Bank - 0987 3422 8756"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/women/17.jpg"
        className="rounded-full"
      />
    }
  />
  <CardItem
    title="Karen William"
    className="py-4"
    subtitle="Bank - 0987 3422 8756"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/women/2.jpg"
        className="rounded-full"
      />
    }
  />
  <CardItem
    title="Angela Smith"
    className="py-4"
    subtitle="Bank - 0987 3422 8756"
    avatar={
      <img
        src="https://randomuser.me/api/portraits/women/8.jpg"
        className="rounded-full"
      />
    }
  />
  </Card>
  <div className="dark">
  <Card>
    <div className="opacity-50 my-1 text-black dark:text-white">
      Recent Contacts
    </div>
    <CardItem
      title="Samantha"
      className="py-4"
      subtitle="Bank - 0987 3422 8756"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/17.jpg"
          className="rounded-full"
        />
      }
    />
    <CardItem
      title="Karen William"
      className="py-4"
      subtitle="Bank - 0987 3422 8756"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/2.jpg"
          className="rounded-full"
        />
      }
    />
    <CardItem
      title="Angela Smith"
      className="py-4"
      subtitle="Bank - 0987 3422 8756"
      avatar={
        <img
          src="https://randomuser.me/api/portraits/women/8.jpg"
          className="rounded-full"
        />
      }
    />
  </Card>  
</div>

Recent Contacts

Samantha

Bank - 0987 3422 8756

Karen William

Bank - 0987 3422 8756

Angela Smith

Bank - 0987 3422 8756

Recent Contacts

Samantha

Bank - 0987 3422 8756

Karen William

Bank - 0987 3422 8756

Angela Smith

Bank - 0987 3422 8756

Switch

The Switch component is used as an alternative for the Checkbox component. You can switch between enabled or disabled states.

<ListItem
  title="Withdraw Activity"
  action={
    <Switch
      name="activity"
    />
  }
/>

<ListItem
  title="Withdraw Activity"
  action={
    <Switch
      name="activity"
    />
  }
/>

Withdraw Activity

Swipe

Swipe is a sliding button component, to make sure user swipe the button from left to right

<Swipe title="SWIPE TO PAY" onSwipeFinish={() => {}} />

<Swipe title="SWIPE TO PAY" onSwipeFinish={() => {}} />

SWIPE TO PAY

Input

Input is a text input component with placeholder

<Input placeholder="Search..." />

<Input placeholder="Search..." />

Card Check

Card Check is a toggle component inside card with check mark on the right side of the card.

<CardCheck>
  <CardItem
    avatar={
      <div className="w-10 h-10 bg-yellow rounded-full relative flex justify-center items-center">
        <Folder />
      </div>
    }
    title="Business Account"
    subtitle="**** - **** - 9876"
  />
</CardCheck>

<CardCheck>
  <CardItem
    avatar={
      <div className="w-10 h-10 bg-yellow rounded-full relative flex justify-center items-center">
        <Folder />
      </div>
    }
    title="Business Account"
    subtitle="**** - **** - 9876"
  />
</CardCheck>

Business Account

**** - **** - 9876

Icons

Icons here are taken from Iconly by Piqodesign

<div className="flex flex-row space-x-2">
  <div className="w-10 h-10 bg-cyan rounded-full flex justify-center items-center">
    <Folder />
  </div>
  <div className="w-10 h-10 bg-yellow rounded-full flex justify-center items-center">
    <Arrow />
  </div>
  <div className="w-10 h-10 bg-blue rounded-full flex justify-center items-center">
    <Checklist />
  </div>
  <div className="w-10 h-10 bg-purple rounded-full flex justify-center items-center">
    <Profile />
  </div>
  <div className="w-10 h-10 bg-white rounded-full flex relative justify-center items-center">
    <Search />
  </div>
</div>

<div className="flex flex-row space-x-2">
  <div className="w-10 h-10 bg-cyan rounded-full flex justify-center items-center">
    <Folder />
  </div>
  <div className="w-10 h-10 bg-yellow rounded-full flex justify-center items-center">
    <Arrow />
  </div>
  <div className="w-10 h-10 bg-blue rounded-full flex justify-center items-center">
    <Checklist />
  </div>
  <div className="w-10 h-10 bg-purple rounded-full flex justify-center items-center">
    <Profile />
  </div>
  <div className="w-10 h-10 bg-white rounded-full flex relative justify-center items-center">
    <Search />
  </div>
</div>