# shadszn/ui — Complete Documentation

> A glass-morphism design system built on Radix UI, Tailwind CSS, and Framer Motion.

## Quick Start

```bash
# 1. Initialize shadcn in your project
npx shadcn@latest init

# 2. Add the shadszn registry to components.json
# Add: "registries": { "@shadszn": { "url": "https://design.szns.dev/r" } }

# 3. Install the theme
npx shadcn@latest add @shadszn/szns-theme

# 4. Install components
npx shadcn@latest add @shadszn/button @shadszn/card @shadszn/dialog
```

## Design Tokens

### Dark Mode (Default)
- `--bg-deep: #0A0820` — Primary background
- `--bg-base: #0D0B2E` — Elevated background
- `--bg-elevated: #131142` — Highest elevation
- `--glass-bg: rgba(255, 255, 255, 0.04)` — Glass surface
- `--glass-border: rgba(255, 255, 255, 0.08)` — Glass border
- `--text-primary: rgba(255, 255, 255, 0.95)` — Primary text
- `--text-secondary: rgba(255, 255, 255, 0.65)` — Secondary text
- `--brand-navy: #19154E` — Brand navy
- `--brand-lavender: #E8E3FF` — Brand lavender
- `--brand-orange: #FF8B4B` — Brand orange

### Light Mode
- `--bg-deep: #fefcfb` — Warm white background
- `--glass-bg: rgba(25, 21, 78, 0.03)` — Navy-tinted glass
- `--text-primary: #19154E` — Navy text

## Components

### Button
`npx shadcn@latest add @shadszn/button`

Variants: primary, secondary, ghost, destructive, outline, link, orange
Sizes: default, sm, lg, icon
Features: Framer Motion whileTap animation, loading spinner, asChild support

```tsx
import { Button } from "@/components/ui/button"

<Button variant="primary" size="lg">Get Started</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Menu</Button>
<Button loading>Saving...</Button>
```

### Card
`npx shadcn@latest add @shadszn/card`

Variants: default, interactive, elevated, featured
Compound components: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter

```tsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

<Card variant="interactive">
  <CardHeader>
    <CardTitle>Dashboard</CardTitle>
  </CardHeader>
  <CardContent>Content here</CardContent>
</Card>
```

### Input
`npx shadcn@latest add @shadszn/input`

Glass-themed input with error state support.

```tsx
import { Input } from "@/components/ui/input"

<Input placeholder="Enter email..." />
<Input error placeholder="Invalid input" />
```

### Dialog
`npx shadcn@latest add @shadszn/dialog`

Modal dialog with glass overlay and compound pattern.

```tsx
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>Settings</DialogTitle></DialogHeader>
    <p>Dialog content</p>
  </DialogContent>
</Dialog>
```

### Toast
`npx shadcn@latest add @shadszn/toast`

Notification toasts with useToast() hook.

```tsx
import { useToast } from "@/components/ui/toast"

const { toast } = useToast()
toast({ title: "Saved", variant: "success" })
toast({ title: "Error", description: "Something went wrong", variant: "destructive" })
```

### Badge
`npx shadcn@latest add @shadszn/badge`

Variants: default, active, maintenance, deprecated, info, warning, error, critical

### Tag
`npx shadcn@latest add @shadszn/tag`

Variants: lavender, orange, active

### Select, Tabs, Tooltip, DropdownMenu, Switch, Separator, Skeleton, Label, Textarea, ThemeToggle, FormField, TagInput

All available via `npx shadcn@latest add @shadszn/<name>`

## Blocks

### Dashboard Layout
`npx shadcn@latest add @shadszn/dashboard-layout`
Full admin dashboard with stat cards, content grid, sidebar.

### Login Page
`npx shadcn@latest add @shadszn/login-page`
Authentication page with gradient orbs background, glass card form.

### Settings Page
`npx shadcn@latest add @shadszn/settings-page`
Tabbed settings with profile, preferences, notifications.

### Data Grid
`npx shadcn@latest add @shadszn/data-grid`
Filterable card grid with search, tags, skeleton loading.

### Detail Page
`npx shadcn@latest add @shadszn/detail-page`
Two-column detail view with metadata sidebar.

### Command Palette
`npx shadcn@latest add @shadszn/command-palette`
Cmd+K keyboard command menu.

### Navbar, Footer, Sidebar, Page Shell
Layout components available as blocks.

## Utilities

### cn()
`npx shadcn@latest add @shadszn/utils`
Class merging: `cn("base", condition && "active", className)`

### Motion Variants
`npx shadcn@latest add @shadszn/motion`
Framer Motion presets: fadeIn, fadeInUp, scaleIn, staggerContainer, hoverLift, tapScale

### useReducedMotion
`npx shadcn@latest add @shadszn/use-reduced-motion`
Detects prefers-reduced-motion preference.