Nanasi UI 🍍 | Build React Apps with Speed

Nanasi UI provides a set of simple, reusable, and composable React components that make it super easy to create websites and apps.

Looking for the documentation? 📚

Latest Components Documentation on Chromatic

Features 🚀

• Ease of Styling with Tailwind CSS: Nanasi UI are built using Tailwind CSS.
• Flexible & composable: Nanasi UI components are built on top of a React UI
• [wip] Accessible. Nanasi UI components follow the WAI-ARIA guidelines specifications and have the right aria-* attributes.
• [wip] Dark Mode 😍: Most components in Nanasi UI are dark mode compatible.

Support Nanasi UI 💖

By donating $5 or more you can support the ongoing development of this project. We'll appreciate some support. Thank you to all our supporters! 🙏 [Contribute]

Get Started 🚀

To use Nanasi UI components, all you need to do is install the react-nanasi package:

yarn add react-nanasi

or

npm i react-nanasi

Usage 📚

To start using the components,

Just import the component and use it as you would any other React component.

import { Button } from 'react-nanasi';

function Example() {
  return <Button>I love Pineapples! </Button>;
}

Available Components 🎉

• Button
• Card
• Checkbox
• [wip] Select Based on React Select

Example boilerplate 🔨

• JavaScript Starter: wip
• TypeScript Starter: wip
• NextJS TypeScript Starter: wip

Contributing 💪

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

Our docsite(wip) lives within separate repo. If you're interested in contributing to the documentation, check out the docsite contribution guide.

License 📝

This project is licensed under the MIT License.

Work in progress 🚧

This project is a work in progress. As such, there are a few things that are missing. We're working on it! 🚧