https://github.com/sonnylazuardi/sonwan-ui

SonWan UI is a modular UI component library based on figma design to build your next React Web Application.
https://github.com/sonnylazuardi/sonwan-ui

library react reactjs tailwind tailwindcss ui uikit

Last synced: 26 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sonnylazuardi/sonwan-ui
• Owner: sonnylazuardi
• License: 0bsd
• Created: 2020-12-17T10:12:29.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-25T00:18:39.000Z (over 3 years ago)
• Last Synced: 2024-05-15T13:22:51.999Z (7 months ago)
• Topics: library, react, reactjs, tailwind, tailwindcss, ui, uikit
• Language: CSS
• Homepage: https://sonwan-ui.sonnylab.com/
• Size: 2.43 MB
• Stars: 107
• Watchers: 5
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-made-by-indonesian - SonWan UI - `SonWan UI is a modular UI component library based on figma design to build your next React Web Application.` *by [Sonny Lazuardi](https://github.com/sonnylazuardi)* (S)
• made-in-indonesia - SonWan UI - `SonWan UI is a modular UI component library based on figma design to build your next React Web Application.` *by [Sonny Lazuardi](https://github.com/sonnylazuardi)* (S)

README

        


  SonWan UI



![sonwan](sonwan.png)

## 🚀 Quick start

1.  **Start developing.**

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

    ```shell

    yarn start

    ```

## Getting started with SonWan UI

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

```sh

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

```javascript

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

import SonWan from "sonwan-ui";

```

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

```javascript

const { Input, Switch, Card, CardItem, ListItem } = SonWan;

return (

  <>

    

    

      

    

  >

);

```

## Demo

Demo: [CodeSandbox](https://codesandbox.io/s/sonwan-ui-hl4yh?from-embed)

Demo Chat UI: [SonWan Chat UI](https://sonwan-chat.vercel.app)

Code: [SonWan Chat Github](https://github.com/sonnylazuardi/sonwan-chat)

## React Native Support

Please check out https://github.com/Drzaln/SonWanUI-RN