98 lines
3.0 KiB
Markdown
98 lines
3.0 KiB
Markdown
---
|
|
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
|