Chaya UI

Chaya UI is a modern, data-first component library for React.

Chaya UI provides a wide range of modern, data-first components that help you build your SaaS applications faster, and with less code. Our components are designed to be minimal, modern, and fully accessible, and are built on top of best-in-class tools/libraries like TypeScript, Tailwind CSS, Radix Primitives, etc.

• 40+ UI components, 4+ hooks, and even more to come
• Built with TypeScript, fully typed
• Styled with Tailwind CSS (v3)
• Supports Dark Mode & Custom Theming

Looking to Explore?

Checkout examples from our Storybook: chaya.traboda.com

Installing Chaya

1. Install the package by running -

npm install chaya-ui

or with yarn, as

yarn add chaya-ui

Setting Up & Usage

To start using the components, please follow the below steps:

1. Wrap your Application in a ChayaProvider provided by chaya-ui

   import { ReactNode } from "react";
   import { ChayaProvider } from 'chaya-ui';
   
   const AppView = ({ children }: { children: ReactNode }) => (
     <ChayaProvider>
       {children}
     </ChayaProvider>
   );

2. Update your tailwind.config.js to process styles for components from chaya-ui

   const theme = require('chaya-ui/tailwind-theme');
   
   /** @type {import('tailwindcss').Config} */
   module.exports = {
    content: [
        'node_modules/chaya-ui/**/*.js',
        // ...
    ],
    // ...
    theme: {
        extend: theme,
    },
    // ...
   };

3. Import the components from chaya-ui and use them in your application.

   import { Button } from 'chaya-ui';
   
   const App = () => (
     <Button 
       onClick={() => console.log('I was clicked')} 
       variant="outline" 
       color="danger"
     >
         Click Me
     </Button>
   );

Development Guide

We use npm as the package manager

npm run dev

This will start the storybook and loads the stories from ./stories at localhost:6006.

The package can be build using the command:

npm run build

Type checks and linting commands are also available in the package

npm run lint
npm run type-check

Credits

• Icons used in the package are from Remix Icons.

Contributions

Contributions are welcome. Please open an issue or a PR.

Licensing

This project is licensed under the GNU General Public License V3.