Open Source Ecosystems

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

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:

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

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,
 },
 // ...
};

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