@karve/ui

Modern UI component library built with Tailwind CSS v4 and shadcn/ui.

Features

• 🎨 Tailwind CSS v4 - CSS-first architecture with @theme directive
• ⚡ Fast - 2-5x faster build performance vs Tailwind v3
• 🧩 shadcn/ui Components - Accessible, customizable React components
• 🎭 Class Variance Authority - Type-safe component variants
• 🌗 Dark Mode - Built-in dark mode support
• 📦 TypeScript - Full TypeScript support with type definitions

Installation

pnpm add @karve/ui
# or
npm install @karve/ui
# or
yarn add @karve/ui

Peer Dependencies

This package requires the following peer dependencies:

• react ^18
• react-dom ^18
• tailwindcss ^4.0.0

Usage

Import Components

import { Button, Card, Input, Label } from '@karve/ui';

function App() {
  return (
    <Card>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="[email protected]" />
      <Button>Submit</Button>
    </Card>
  );
}

Import Styles

Import the base styles in your application:

// In your main entry file (e.g., app.tsx or index.tsx)
import '@karve/ui/dist/styles.css';

Or use PostCSS to import in your CSS:

/* styles.css */
@import '@karve/ui/dist/styles.css';

Tailwind v4 Configuration

This package uses Tailwind CSS v4's CSS-first configuration. Your PostCSS config should include:

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

Available Components

• Button - Customizable button with variants
• Badge - Small status indicators
• Card - Container with header, content, and footer
• Input - Form input field
• Label - Form label
• Textarea - Multi-line text input
• Select - Dropdown selector
• Drawer - Slide-out panel (Vaul)
• Tooltip - Hover tooltips
• BackgroundBoxes - Animated background component

Component Variants

Components use Class Variance Authority for type-safe variants:

<Button variant="default" size="md">Default Button</Button>
<Button variant="destructive" size="lg">Delete</Button>
<Button variant="outline" size="sm">Cancel</Button>

Styling

All components are built with Tailwind CSS v4 and support:

• Custom color schemes via CSS variables
• Dark mode with .dark class
• Responsive design with mobile-first approach
• Accessible ARIA attributes

Development

# Install dependencies
pnpm install

# Build the package
pnpm build

# Watch mode for development
pnpm dev

License

MIT © Ramene Anthony

Links

• Repository
• Tailwind CSS v4 Docs
• shadcn/ui