---
name: ck-ui-styling
description: Style UIs with shadcn/ui (Radix UI + Tailwind CSS). Use for accessible components, dark mode, responsive layouts, design systems, color customization, forms with validation, and theme configuration.
---

# UI Styling

Beautiful, accessible UIs combining shadcn/ui components with Tailwind CSS utility styling.

## When to Use

- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
- Implementing accessible components (dialogs, forms, tables, navigation)
- Creating responsive, mobile-first layouts
- Implementing dark mode and theme customization
- Building design systems with consistent tokens

## Don't Use When

- Non-React projects (Vue, Svelte — use framework-native UI libs)
- Simple static HTML without a build tool
- Projects already committed to a different component library

## Quick Start

```bash
# Initialize shadcn/ui with Tailwind
npx shadcn@latest init

# Add components
npx shadcn@latest add button card dialog form table
```

## Core Stack

| Layer | Tool | Purpose |
|-------|------|---------|
| Components | shadcn/ui (Radix UI) | Accessible, copy-paste primitives |
| Styling | Tailwind CSS | Utility-first, mobile-first |
| Types | TypeScript | Full type safety |

## Usage Example

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

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent>
          <Button variant="default" className="w-full">View Details</Button>
        </CardContent>
      </Card>
    </div>
  )
}
```

## Tailwind-Only Setup (Vite)

```bash
npm install -D tailwindcss @tailwindcss/vite
```

```css
/* src/index.css */
@import "tailwindcss";
```

## Reference Files

- `references/shadcn-components.md` — complete component catalog with usage patterns
- `references/shadcn-theming.md` — dark mode, CSS variables, color customization
- `references/shadcn-accessibility.md` — ARIA patterns, keyboard nav, focus management
- `references/tailwind-utilities.md` — layout, spacing, typography, colors
- `references/tailwind-responsive.md` — breakpoints, mobile-first, container queries
- `references/tailwind-customization.md` — @theme, custom tokens, plugins, layers

## Best Practices

1. Use Tailwind classes directly; extract components only for true repetition
2. Mobile-first: start with mobile styles, layer responsive variants
3. Leverage Radix UI primitives for accessible focus states and keyboard nav
4. Use CSS variable system for dark mode consistency
5. Never use dynamic class names — Tailwind's purge won't detect them

## Resources

- shadcn/ui: https://ui.shadcn.com
- Tailwind CSS: https://tailwindcss.com
- Radix UI: https://radix-ui.com
- shadcn/ui LLM docs: https://ui.shadcn.com/llms.txt