All Projects → sonnylazuardi → Sonwan Ui

sonnylazuardi / Sonwan Ui

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

Projects that are alternatives of or similar to Sonwan Ui

Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (+92%)
Mutual labels:  uikit, tailwindcss
Vuent
🎨 Vue.js components implementing Microsoft Fluent Design
Stars: ✭ 207 (+176%)
Mutual labels:  library, uikit
Notus Nextjs
Notus NextJS: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 152 (+102.67%)
Mutual labels:  uikit, tailwindcss
Vue Notus
Vue Notus: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 108 (+44%)
Mutual labels:  uikit, tailwindcss
nextly-template
Nextly Landing Page Template built with Next.js & TailwindCSS
Stars: ✭ 48 (-36%)
Mutual labels:  uikit, tailwindcss
Notus React
Notus React: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 173 (+130.67%)
Mutual labels:  uikit, tailwindcss
Dashboard
🛩 🧶 Dashboard template built with tailwindcss.
Stars: ✭ 202 (+169.33%)
Mutual labels:  uikit, tailwindcss
Swift Essentials
A set of essential Swift stuff I use in every single iOS app.
Stars: ✭ 223 (+197.33%)
Mutual labels:  library, uikit
e-commerce
🧧🕹 E-commerce website built with Tailwind CSS
Stars: ✭ 91 (+21.33%)
Mutual labels:  uikit, tailwindcss
Alertift
Swifty, modern UIAlertController wrapper.
Stars: ✭ 242 (+222.67%)
Mutual labels:  library, uikit
Tail Kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Stars: ✭ 997 (+1229.33%)
Mutual labels:  uikit, tailwindcss
Shadowview
An iOS Library that makes shadows management easy on UIView.
Stars: ✭ 391 (+421.33%)
Mutual labels:  library, uikit
Tailwindcss Sketch Kit
💎 Sketch UI kit for Tailwind CSS
Stars: ✭ 68 (-9.33%)
Mutual labels:  uikit, tailwindcss
Graphql client
GraphQL Client.
Stars: ✭ 78 (+4%)
Mutual labels:  library
Byline
Go library for convert io.Reader to line-by-line Reader
Stars: ✭ 80 (+6.67%)
Mutual labels:  library
Sizes
View your app on different device and font sizes
Stars: ✭ 1,213 (+1517.33%)
Mutual labels:  uikit
Adminkit
laravel和Uikit开发的后台管理系统雏形 自带完整oauth授权管理模块
Stars: ✭ 78 (+4%)
Mutual labels:  uikit
Before after slider
before after slider
Stars: ✭ 80 (+6.67%)
Mutual labels:  library
Postcss Elm Tailwind
put some tailwind in your elm
Stars: ✭ 80 (+6.67%)
Mutual labels:  tailwindcss
Stts
A starter template for Svelte, Tailwind, Typescript, and Snowpack
Stars: ✭ 78 (+4%)
Mutual labels:  tailwindcss

SonWan UI

sonwan

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

Demo

Demo: CodeSandbox

Demo Chat UI: SonWan Chat UI Code: SonWan Chat Github

React Native Support

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].