@cloverforge/ui

A React component library built with Tailwind CSS. Zero-runtime, fully customizable, works with Tailwind v3 and v4.

Installation

npm install @cloverforge/ui

Peer dependencies (must be installed in your project):

npm install react react-dom

Tailwind Setup

Tailwind v4 — no extra config needed. Tailwind v4 scans your entire project automatically.

Tailwind v3 — add the package path to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@cloverforge/ui/dist/**/*.{js,cjs}",
  ],
}

Usage

import { Button } from "@cloverforge/ui"

export default function App() {
  return (
    <Button onClick={() => alert("Clicked!")}>
      Click me
    </Button>
  )
}

Components

Button

import { Button } from "@cloverforge/ui"

| Prop | Type | Default | Description | |---|---|---|---| | variant | "primary" | "secondary" | "outline" | "ghost" | "icon" | "primary" | Visual style | | size | "sm" | "md" | "lg" | "icon" | "md" | Size preset | | className | string | — | Additional Tailwind classes | | All native button props | — | — | Spread onto <button> |

<Button>Post a project</Button>
<Button variant="secondary">View project</Button>
<Button variant="outline">Continue with Google</Button>
<Button variant="ghost">See how it works</Button>
<Button variant="icon" size="icon" aria-label="Settings">
  <Settings className="size-5" />
</Button>
<Button size="sm">Start</Button>
<Button size="lg">Get Started</Button>

Card

import { Card, CardHeader } from "@cloverforge/ui"

| Prop | Type | Default | Description | |---|---|---|---| | variant | "default" | "white" | "dark" | "default" | Visual style | | hover | boolean | false | Adds hover border effect | | className | string | — | Additional Tailwind classes |

<Card>
  <p>Active projects</p>
  <p className="mt-3 text-4xl font-black">3</p>
</Card>

<Card variant="white">
  <h3>How do I create a project?</h3>
  <p>Go to Dashboard, create a project, and define the first milestone.</p>
</Card>

<Card variant="dark">
  <p>Recommended</p>
  <h3>3 projects match your skills.</h3>
</Card>

CardHeader — a pre-styled header section with bottom border:

<Card>
  <CardHeader>
    <h3>Title</h3>
    <button>Action</button>
  </CardHeader>
  <div className="mt-4">Content</div>
</Card>

Input

import { Input, SearchInput } from "@cloverforge/ui"

| Prop | Type | Default | Description | |---|---|---|---| | icon | React.ComponentType | — | Lucide icon to show inside input | | as | "input" | "textarea" | "input" | Renders as input or textarea | | className | string | — | Additional Tailwind classes |

<Input placeholder="John Doe" />
<Input icon={Mail} type="email" placeholder="[email protected]" />
<Input as="textarea" placeholder="Tell us more..." />
<SearchInput placeholder="Search by project, role, skill, or keyword" />

Badge

import { Badge, TagPill } from "@cloverforge/ui"

| Prop | Type | Default | Description | |---|---|---|---| | variant | "filled" | "outline" | "dark" | "active" | "light" | "outline" | Visual style |

<Badge variant="filled">Technology</Badge>
<Badge variant="outline">Prototype</Badge>
<Badge variant="dark">Frontend</Badge>

TagPill — a toggle-style button pill:

<TagPill active>All</TagPill>
<TagPill>React</TagPill>
<TagPill>Python</TagPill>

Avatar

import { Avatar } from "@cloverforge/ui"

| Prop | Type | Default | Description | |---|---|---|---| | size | "sm" | "md" | "lg" | "sm" | Size preset | | initials | string | — | Text displayed inside the circle |

<Avatar initials="AC" />
<Avatar initials="SM" size="md" />
<Avatar initials="JK" size="lg" />

Progress

import { Progress } from "@cloverforge/ui"

| Prop | Type | Default | Description | |---|---|---|---| | value | number | required | Progress percentage (0-100) | | label | string | — | Label text above the bar | | showValue | boolean | false | Shows percentage value |

<Progress value={65} label="Progress" showValue />

Divider

import { Divider } from "@cloverforge/ui"

| Prop | Type | Default | Description | |---|---|---|---| | label | string | — | Optional label text in the center |

<Divider />
<Divider label="or" />

SectionLabel

import { SectionLabel } from "@cloverforge/ui"

Uppercase, tracked-out label for section headers:

<SectionLabel>Design System</SectionLabel>

Styling

All components use Tailwind CSS arbitrary values (e.g., bg-[#171717], text-[#55544f]). This means:

• No CSS variables required — works in any Tailwind project
• Override any style via the className prop
• Tailwind v3 — add the content path (see Tailwind Setup)
• Tailwind v4 — zero config, works automatically

Color Palette Reference

| Token | Hex | Usage | |---|---|---| | Near Black | #171717 | Headlines, CTAs, dark backgrounds | | Charcoal | #2f2f2d | Dark cards, inverted sections | | Medium Gray | #55544f | Body text, descriptions | | Label Gray | #62615d | Labels, overlines | | Light Gray | #77766f | Captions, metadata | | Border | #d9d8d2 | Card borders, dividers | | Border Dark | #c9c8c1 | Search bar border | | Progress BG | #e5e3dc | Progress bar track | | Hover BG | #efeee8 | Badge backgrounds, hover states | | Canvas | #f7f7f3 | Page backgrounds | | Surface | #fbfbfa | Card backgrounds | | White | #ffffff | Elevated surfaces |

License

MIT