SnitchUI

Build beautiful UI without the bloat. Copy-paste components built on Radix UI + Tailwind CSS v4. You own every line of code — install nothing, commit everything, customize anything.

🌐 Live Website: https://snitchui.vercel.app

Why SnitchUI?

Most UI libraries force you into their ecosystem — install a package, ship hundreds of kB of dependencies, fight with customization. SnitchUI flips the model: you own the code.

Every component is a copy-paste away, fully editable, and built on battle-tested Radix UI primitives. No bloated dependencies, no version lock-in, no restrictions.

Features

• Copy-Paste, Not npm Install — Full source ownership. Copy component code into your project and customize freely.
• Tailwind CSS v4 Native — Every color, spacing, and radius maps to your existing design system. Zero framework lock-in.
• Radix UI Under the Hood — Keyboard navigation, ARIA attributes, and screen-reader support work out of the box.
• Tree-Shakable by Default — Import only what you use. No global CSS, no runtime overhead.
• Dark Mode Included — Every component ships with light and dark variants. Toggle your HTML class and SnitchUI adapts automatically.
• React 19 Ready — Built with React 19 from the ground up.

How It Works

# 1. Setup your project (React + Vite + Tailwind CSS v4)
# 2. Install SnitchUI
npm install snitchui

# 3. Add one or more components at once
npx snitchui@latest add button input select card

# 4. Scaffold form templates (auto-installs missing UI components)
npx snitchui@latest add-template signin
npx snitchui@latest add-template signup

JavaScript or TypeScript? SnitchUI auto-detects your project. Components are generated as .jsx/.js in JS projects and as .tsx/.ts in TS projects (detected via tsconfig.json / typescript dependency). Use --ts or --js to force a language.

Components

| Component | Description | |-----------|-------------| | Button | Clickable element with variants, sizes, and loading states | | Label | Accessible label element bound to form inputs | | Input | Form input field with focus and disabled states | | Select | Dropdown select with grouped items and labels | | Checkbox | Toggle between checked/unchecked with accessibility support | | Combobox | Searchable multi-select dropdown with chip input | | DatePicker | Calendar-based date picker | | RadioButton | Radio group for single selection from multiple options | | Switch | Toggle switch for binary on/off states | | Textarea | Multi-line text input with focus and disabled states | | TimePicker | Time picker for hours, minutes, and seconds | | Card | Container with header, title, description, content, and footer | | Badge | Small status indicator with multiple color variants | | Dialog | Modal overlay with controlled/uncontrolled state | | Dropdown | Menu with items, separators, labels, and keyboard support | | Tabs | Tabbed content sections with controlled state | | Accordion | Collapsible panels with single/multiple mode | | Avatar | User avatar with image fallback and delay | | Alert | Contextual message with icon support and variants | | Pagination | Page navigation with controlled/uncontrolled state, sizes, and ellipsis | | Table | Responsive table with per-column sorting and search, plus pagination |

Templates

Reusable form components scaffolded into src/components/templates/. CLI auto-installs missing UI components (button, input, label, card) before generating the template.

| Template | Description | |----------|-------------| | Signin | Centered card form with email/password fields and sign-up link | | Signup | Centered card form with name/email/password and sign-in link |

npx snitchui@latest add-template signin
npx snitchui@latest add-template signup

Each template is a standalone form component that imports from your UI components. No route or sidebar updates — drop it anywhere in your app.

Generated Structure

src/
├── lib/
│   └── utils.js                  # cn() utility (auto-generated)
├── components/
│   ├── ui/
│   │   ├── button/               # Installed component
│   │   ├── input/                # Installed component
│   │   ├── label/                # Installed component
│   │   └── card/                 # Installed component
│   └── templates/
│       ├── SigninForm.jsx        # Generated by add-template signin
│       └── SignupForm.jsx        # Generated by add-template signup

In a TypeScript project the same structure is generated with type-safe extensions:

src/
├── lib/
│   └── utils.ts                  # cn() utility (auto-generated)
├── components/
│   ├── ui/
│   │   ├── button/               # button.tsx + index.ts
│   │   ├── input/                # input.tsx + index.ts
│   │   └── ...                   # .tsx / .ts variants of every component
│   └── templates/
│       ├── SigninForm.tsx
│       └── SignupForm.tsx

Both trees keep the same names, exports, and imports — only the file extensions differ. Your import statements load ./components/ui/button and SnitchUI wires extensions automatically.

Usage

import { Button } from './components/ui/button'
import { Label } from './components/ui/label'
import { Input } from './components/ui/input'
import { SigninForm } from './components/templates/SigninForm'

export function App() {
  return (
    <div>
      {/* Individual components */}
      <Button>Click me</Button>
      <Button variant="outline">Cancel</Button>

      <div>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="[email protected]" />
      </div>

      {/* Full template form */}
      <SigninForm />
    </div>
  )
}

CLI Options

# Add one or more components
npx snitchui@latest add button input select card

# Add form templates (auto-installs missing UI components)
npx snitchui@latest add-template signin
npx snitchui@latest add-template signup

# Options
--force          Overwrite existing files
--skip-install   Skip npm install of dependencies
--ts             Force TypeScript output (.tsx / .ts)
--js             Force JavaScript output (.jsx / .js)

Design Tokens

SnitchUI uses CSS custom properties for theming, supporting light and dark modes out of the box. Components automatically adapt based on the dark class on <html>.

Philosophy

Build once. Reuse everywhere. Minimal API. Maximum flexibility. Stop fighting with heavy dependencies — start building with components you actually own.

License

MIT