react-ux-kit

A modern, accessible React UI component library with multi-theme support — light, dark, and 5 accent colors.

Installation

npm install react-ux-kit
# or
yarn add react-ux-kit
# or
pnpm add react-ux-kit

Setup

1. Import the global styles

// main.tsx or _app.tsx
import "react-ux-kit/styles";

2. Wrap your app with ThemeProvider

import { ThemeProvider } from "react-ux-kit";

function App() {
  return (
    <ThemeProvider defaultTheme="system" defaultAccent="default">
      <YourApp />
    </ThemeProvider>
  );
}

Themes

Light / Dark / System

const { setTheme, toggleTheme, resolvedTheme } = useTheme();

setTheme("light");
setTheme("dark");
setTheme("system"); // follows OS preference
toggleTheme(); // flips between light and dark

Accent Colors

5 built-in accent palettes — each fully adapts to light and dark mode:

| Accent | Value | | ------- | -------------------- | | Default | 'default' (orange) | | Blue | 'blue' | | Violet | 'violet' | | Emerald | 'emerald' | | Rose | 'rose' | | Amber | 'amber' |

const { setAccent } = useTheme();
setAccent("violet");

Components

Button

import { Button } from 'react-ux-kit';

<Button variant="primary">Save changes</Button>
<Button variant="secondary" size="sm">Cancel</Button>
<Button variant="outline" loading>Processing...</Button>
<Button variant="destructive" leftIcon="🗑">Delete</Button>

Variants: primary | secondary | outline | ghost | destructive Sizes: sm | md | lg | icon

Badge

import { Badge } from 'react-ux-kit';

<Badge variant="success">Active</Badge>
<Badge variant="danger">Error</Badge>
<Badge variant="warning">Pending</Badge>

Variants: default | primary | success | warning | danger | info

Input / Textarea

import { Input, Textarea } from 'react-ux-kit';

<Input placeholder="Email address" type="email" />
<Input error placeholder="Invalid value" />
<Input leftElement="🔍" placeholder="Search..." />
<Textarea rows={4} placeholder="Your message..." />

Card

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "react-ux-kit";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>A short description here.</CardDescription>
  </CardHeader>
  <CardContent>Main content goes here.</CardContent>
  <CardFooter>
    <Button size="sm">Action</Button>
  </CardFooter>
</Card>;

Select / Combobox

import { Select, Combobox } from 'react-ux-kit';

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
];

<Select options={options} placeholder="Pick a framework" onValueChange={console.log} />
<Combobox options={options} placeholder="Search frameworks..." onValueChange={console.log} />

Switch / Checkbox / Radio

import { Switch, Checkbox, Radio } from 'react-ux-kit';

<Switch label="Enable notifications" defaultChecked onCheckedChange={console.log} />
<Checkbox label="Accept terms" onCheckedChange={console.log} />
<Radio label="Option A" value="a" checked={selected === 'a'} onValueChange={setSelected} />

Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from "react-ux-kit";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="analytics">Analytics content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>;

Accordion

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "react-ux-kit";

<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger itemValue="item-1">
      What is react-ux-kit?
    </AccordionTrigger>
    <AccordionContent itemValue="item-1">
      A beautiful UI library for React.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

Dialog (Modal)

import {
  Dialog,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button,
} from "react-ux-kit";

const [open, setOpen] = useState(false);

<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogHeader>
    <DialogTitle>Confirm action</DialogTitle>
    <DialogDescription>Are you sure you want to continue?</DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button variant="ghost" onClick={() => setOpen(false)}>
      Cancel
    </Button>
    <Button variant="primary">Confirm</Button>
  </DialogFooter>
</Dialog>;

Toast

import { ToastProvider, useToast } from "react-ux-kit";

// Wrap app:
<ToastProvider>
  <App />
</ToastProvider>;

// Use anywhere:
const { toast } = useToast();
toast({
  title: "Saved!",
  description: "Your changes have been saved.",
  variant: "success",
});

Table

import {
  TableWrapper,
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "react-ux-kit";

<TableWrapper>
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Name</TableHead>
        <TableHead>Status</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Alice</TableCell>
        <TableCell>
          <Badge variant="success">Active</Badge>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableWrapper>;

Calendar / DatePicker

import { Calendar, DatePicker } from 'react-ux-kit';

<Calendar onValueChange={date => console.log(date)} />
<DatePicker placeholder="Select a date" onValueChange={console.log} />

Command

import { Command } from "react-ux-kit";

<Command
  items={[
    { value: "profile", label: "Profile", icon: "👤", group: "Account" },
    { value: "settings", label: "Settings", icon: "⚙️", group: "Account" },
  ]}
  onSelect={(item) => console.log(item)}
/>;

Other Components

| Component | Import | | ------------- | ------------------------------------------------------------------------------------ | | Avatar | import { Avatar } from 'react-ux-kit' | | Alert | import { Alert } from 'react-ux-kit' | | Progress | import { Progress } from 'react-ux-kit' | | Spinner | import { Spinner } from 'react-ux-kit' | | Skeleton | import { Skeleton } from 'react-ux-kit' | | Separator | import { Separator } from 'react-ux-kit' | | Tooltip | import { Tooltip } from 'react-ux-kit' | | Popover | import { Popover } from 'react-ux-kit' | | Dropdown | import { Dropdown } from 'react-ux-kit' | | Drawer | import { Drawer } from 'react-ux-kit' | | Sheet | import { Sheet } from 'react-ux-kit' | | HoverCard | import { HoverCard } from 'react-ux-kit' | | ContextMenu | import { ContextMenu } from 'react-ux-kit' | | Navbar | import { Navbar } from 'react-ux-kit' | | Breadcrumb | import { Breadcrumb } from 'react-ux-kit' | | Pagination | import { Pagination } from 'react-ux-kit' | | Slider | import { Slider } from 'react-ux-kit' | | Switch | import { Switch } from 'react-ux-kit' | | Toggle | import { Toggle } from 'react-ux-kit' | | ToggleGroup | import { ToggleGroup, ToggleGroupItem } from 'react-ux-kit' | | Collapsible | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'react-ux-kit' | | ScrollArea | import { ScrollArea } from 'react-ux-kit' | | AspectRatio | import { AspectRatio } from 'react-ux-kit' | | Label | import { Label } from 'react-ux-kit' | | FormGroup | import { FormGroup } from 'react-ux-kit' |

CSS Custom Properties

You can override any token in your CSS:

:root {
  --ux-radius: 12px; /* border radius */
  --ux-font: "Your Font", sans-serif;
  --ux-accent: #6d28d9; /* override accent color */
}

Publishing

# Build
npm run build

# Preview what will be published
npm pack --dry-run

# Publish
npm login
npm publish --access public

License

MIT © Sujeet Brahmankar