🌱 cyberseeds-ui

Reusable React UI component library built with Tailwind CSS v4, TypeScript, and React 19.
Designed for clean, accessible, and maintainable interfaces in modern web applications.

Please check the interactive UI catalog 👉

✨ Features

• ⚛️ Built for React 19 (concurrent mode compatible)
• 🎨 Styled with Tailwind CSS v4
• 💻 Developed using Vite for instant HMR
• 📦 Tree-shakable, TypeScript-friendly components
• 🧪 Optional Storybook integration for visual testing (coming soon)

📦 Installation

npm install cyberseeds-ui
# or
yarn add cyberseeds-ui

🚀 Usage Example

import { Button } from "cyberseeds-ui";

export default function Page() {
  return <Button variant="primary">Click me</Button>;
}

🎨 Color Customization

Some components in cyberseeds-ui support color customization using Tailwind CSS default color tokens.
You can pass a color prop (or use classNames internally) with values like:

• blue
• emerald
• red
• amber
• indigo
• gray
• ...and more (based on Tailwind v4 palette

<Button color="emerald">Confirm</Button>
<Checkbox color="red" checked />
<Pillbox color="blue">Tag</Pillbox>

🧱 Components

Component	Description
Accordion	A simple accordion component supporting smooth open/close transitions and icon rotation.
Button	Versatile button component with support for multiple variants and sizes (color with Tailwind color classes)
Checkbox	Accessible checkbox with custom styling and states (color with Tailwind color classes)
Groupbox	Labeled container to group related form inputs, styled consistently
Input	Standard text input with full variant and validation support (color with Tailwind color classes)
Label	Semantic label element for form fields with optional styling hooks
Modal	Accessible modal dialog with focus trap and customizable layout
PhoneInput	Text input optimized for 10-digit US phone numbers, with formatting (color with Tailwind color classes)
Pillbox	Capsule-style tag component with variant-based styling and grouping support (color with Tailwind color classes)
Radio	Single radio input with styling variants and ARIA support (color with Tailwind color classes)
RadioGroup	Wrapper component to group multiple radio inputs with consistent spacing and layout
Select	Styled select dropdown with variant support and keyboard accessibility
Switch	Toggle switch component with animated state transitions and customization options (color with Tailwind color classes)
TextArea	Multiline text input with resizable behavior and full variant support (color with Tailwind color classes)

🎨 UIColorProvider

UIColorProvider is a React Context that enables application-wide color control for all components provided by cyberseeds-ui.

By wrapping your app in UIColorProvider, you can set a default UI color (such as "blue" or "gray") that is automatically applied across all compatible components—such as Button, Input, Switch, and others—without manually passing a color prop to each.

✅ Key Features

• Global UI color setting using React Context
• All cyberseeds-ui components automatically reference this context
• Supports dynamic color changes at runtime via setColor

🧩 Example (TypeScript)

import { UIColorProvider, useUIColor } from "cyberseeds-ui";

function App() {
  return (
    <UIColorProvider initialColor="blue">
      <Button />
    </UIColorProvider>
  );
}