Introduction

SonWan UI is a modular UI component library designed for building React web applications. It's based on Figma designs and offers a collection of pre-built, customizable components. This library aims to streamline the development process by providing ready-to-use UI elements that are both visually appealing and functional.

Main Features

1. React-based components for rapid UI development
2. Figma-inspired design for consistent and modern aesthetics
3. Modular architecture allowing easy integration and customization
4. Tailwind CSS integration for flexible styling
5. Responsive components suitable for various screen sizes
6. TypeScript support for improved development experience
7. Minimal dependencies for lighter application builds
8. React Native support through a separate package

Installation Steps

1. Navigate to your React project directory.

2. Install SonWan UI using npm or yarn:

   npm i sonwan-ui
   

   or

   yarn add sonwan-ui
   

3. Import the CSS styling and JavaScript components in your project:

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

Usage Instructions

1. After installation, import the desired components from SonWan UI in your React files:

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

2. Use the components in your JSX:

   return (
     <>
       <Input placeholder="Search In Codesandbox" />
       <Card>
         <CardItem title="Yuzuha Usagi" subtitle="0821 - 7654 - 3210" />
       </Card>
     </>
   );
   

3. Customize components using props as needed.

4. For styling modifications, utilize Tailwind CSS classes or override styles in your project.

5. Refer to the demo projects for more complex implementations:

   • Basic demo: Available on CodeSandbox
   • Chat UI demo: SonWan Chat UI (code available on GitHub)

Important Notes

1. SonWan UI is designed primarily for React web applications but also has React Native support through a separate package.

2. The library uses Tailwind CSS, which allows for easy customization and responsive design.

3. TypeScript support is included, providing better type checking and development experience.

4. The project is open-source and welcomes contributions from the community.

5. Regular updates may introduce new components or features, so check the GitHub repository for the latest changes.

6. The library is licensed under the 0BSD license, which allows for free use, modification, and distribution.

7. For React Native projects, refer to the separate repository: https://github.com/Drzaln/SonWanUI-RN

8. While the library provides a comprehensive set of components, it's designed to be modular, allowing developers to use only what they need.