A simple modern green design system. Built on react, based on @shadcn/ui, and adjusted based our needs. Feel free to use this design system for your projects.

Setup (🛠️ in progress)

1. Install the package

npm install @team-menyala/clover
# or
yarn add @team-menyala/clover
# or
pnpm add @team-menyala/clover

2. Make sure you have Tailwind CSS installed and configured in your project (setup tutorial):

npm i -D tailwindcss
npx tailwindcss init

3. Add Clover's Tailwind to your style.css:

@import "tailwindcss";
@import "@team-menyala/clover/style.css";
@source "@team-menyala/clover";

/* Fallback when postcss failed to recognize original source */
@source "../../node_modules/@team-menyala/clover";

/* Your css here */

Usage

import { Button } from '@team-menyala/clover';

function App() {
  return (
    <Button variant="primary">
      Click me!
    </Button>
  );
}

Available Components

Please look at the website here