A modular UI component library based on figma design for React

by React

SonWan UI

SonWan UI is a modular UI component library based on figma design to build your next React Web Application.

View Documentation View Demo View Github

? Quick start

  1. Start developing.

    Navigate into your new site’s directory and start it up.

    yarn start

Getting started with SonWan UI

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


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";

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>
  </>
);

GitHub