@cmdniels/uikit

A modern React UI component library built with TypeScript, Tailwind CSS, and Base UI.

Installation

pnpm add @cmdniels/uikit
# or
npm install @cmdniels/uikit
# or
yarn add @cmdniels/uikit

Peer Dependencies

Make sure you have React 18+ or React 19+ installed:

pnpm add react react-dom

Setup

1. Install the package:

pnpm add @cmdniels/uikit

2. Create a globals.css file in your project root:

@import "tailwindcss";
@import "tw-animate-css";
@import "@cmdniels/uikit/tailwind.css";

@source "node_modules/@cmdniels/uikit/**/*.js";

:root {
	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-foreground: oklch(0.985 0 0);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--accent: oklch(0.97 0 0);
	--accent-foreground: oklch(0.205 0 0);
	--destructive: oklch(0.58 0.22 27);
	--border: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
	--radius: 0.625rem;
}

.dark {
	--background: oklch(0.145 0 0);
	--foreground: oklch(0.985 0 0);
	--card: oklch(0.205 0 0);
	--card-foreground: oklch(0.985 0 0);
	--primary: oklch(0.87 0 0);
	--primary-foreground: oklch(0.205 0 0);
	--secondary: oklch(0.269 0 0);
	--secondary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.269 0 0);
	--muted-foreground: oklch(0.708 0 0);
	--accent: oklch(0.371 0 0);
	--accent-foreground: oklch(0.985 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 15%);
	--ring: oklch(0.556 0 0);
}

3. Create a postcss.config.mjs file:

export default {
	plugins: {
		"@tailwindcss/postcss": {},
	},
};

4. Import the globals.css in your app and use the components:

import "./globals.css";
import { Button, Card, CardHeader, CardTitle, CardContent } from "@cmdniels/uikit";
import cn from "@cmdniels/uikit/cn";

export default function MyComponent() {
	return (
		<Card>
			<CardHeader>
				<CardTitle>Hello World</CardTitle>
			</CardHeader>
			<CardContent>
				<Button>Click me</Button>
			</CardContent>
		</Card>
	);
}

Requirements

• React 18+ or React 19+
• All dependencies are included in the package

Available Components

• Layout: Accordion, AspectRatio, Card, Item, ScrollArea, Separator, Sheet, Sidebar, Table
• Forms: Button, ButtonGroup, Checkbox, Input, InputGroup, Label, Select, Switch, Textarea, Toggle
• Data Entry: Calendar, Combobox, CopyInput, DatePicker, Field, FileDropzone, LinkInput
• Feedback: Alert, AlertDialog, Error, Skeleton, Spinner, Toaster (Sonner)
• Navigation: ContextMenu, DropdownMenu
• Overlay: Popover, Tooltip
• Utilities: Badge, Chart, Sortable
• Typography: Complete set of typography components

Development

# Install dependencies
pnpm install

# Start development server (Ladle)
pnpm dev

# Build the library
pnpm build

# Run linting
pnpm lint

License

MIT