feat: Add 5 curated skills for Mosaic Stack
New skills: - next-best-practices: Next.js 15+ RSC, async patterns, self-hosting (vercel-labs) - better-auth-best-practices: Official Better-Auth with Drizzle adapter (better-auth) - verification-before-completion: Evidence-based completion claims (obra/superpowers) - shadcn-ui: Component patterns with Tailwind v4 adaptation note (developer-kit) - writing-skills: TDD methodology for skill authoring (obra/superpowers) README reorganized by category with Mosaic Stack alignment section. Total: 9 skills (4 existing + 5 new). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
306
skills/shadcn-ui/references/chart.md
Normal file
306
skills/shadcn-ui/references/chart.md
Normal file
@@ -0,0 +1,306 @@
|
||||
### shadcn/ui Chart Component - Installation
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
The chart component in shadcn/ui is built on Recharts, providing direct access to all Recharts capabilities with consistent theming.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add chart
|
||||
```
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - Basic Usage
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
The ChartContainer wraps your Recharts component and accepts a config prop for theming. Requires `min-h-[value]` for responsiveness.
|
||||
|
||||
```tsx
|
||||
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
|
||||
import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
|
||||
|
||||
const chartConfig = {
|
||||
desktop: {
|
||||
label: "Desktop",
|
||||
color: "var(--chart-1)",
|
||||
},
|
||||
mobile: {
|
||||
label: "Mobile",
|
||||
color: "var(--chart-2)",
|
||||
},
|
||||
} satisfies import("@/components/ui/chart").ChartConfig
|
||||
|
||||
const chartData = [
|
||||
{ month: "January", desktop: 186, mobile: 80 },
|
||||
{ month: "February", desktop: 305, mobile: 200 },
|
||||
{ month: "March", desktop: 237, mobile: 120 },
|
||||
]
|
||||
|
||||
export function BarChartDemo() {
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis dataKey="month" tickLine={false} axisLine={false} />
|
||||
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
|
||||
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - ChartConfig with Custom Colors
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
You can define custom colors directly in the configuration using hex values or CSS variables.
|
||||
|
||||
```tsx
|
||||
const chartConfig = {
|
||||
desktop: {
|
||||
label: "Desktop",
|
||||
color: "#2563eb",
|
||||
theme: {
|
||||
light: "#2563eb",
|
||||
dark: "#60a5fa",
|
||||
},
|
||||
},
|
||||
mobile: {
|
||||
label: "Mobile",
|
||||
color: "var(--chart-2)",
|
||||
},
|
||||
} satisfies import("@/components/ui/chart").ChartConfig
|
||||
```
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - CSS Variables
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
Add chart color variables to your globals.css for consistent theming.
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Chart colors */
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.546 0.198 38.228);
|
||||
--chart-4: oklch(0.596 0.151 343.253);
|
||||
--chart-5: oklch(0.546 0.158 49.157);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.698 0.141 24.311);
|
||||
--chart-4: oklch(0.676 0.172 171.196);
|
||||
--chart-5: oklch(0.578 0.192 302.85);
|
||||
}
|
||||
```
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - Line Chart Example
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
Creating a line chart with shadcn/ui charts component.
|
||||
|
||||
```tsx
|
||||
import { Line, LineChart, CartesianGrid, XAxis, YAxis } from "recharts"
|
||||
import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
|
||||
|
||||
const chartConfig = {
|
||||
price: {
|
||||
label: "Price",
|
||||
color: "var(--chart-1)",
|
||||
},
|
||||
} satisfies import("@/components/ui/chart").ChartConfig
|
||||
|
||||
const chartData = [
|
||||
{ month: "January", price: 186 },
|
||||
{ month: "February", price: 305 },
|
||||
{ month: "March", price: 237 },
|
||||
{ month: "April", price: 203 },
|
||||
{ month: "May", price: 276 },
|
||||
]
|
||||
|
||||
export function LineChartDemo() {
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="min-h-[200px]">
|
||||
<LineChart data={chartData}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis dataKey="month" tickLine={false} axisLine={false} />
|
||||
<YAxis tickLine={false} axisLine={false} tickFormatter={(value) => `$${value}`} />
|
||||
<Line
|
||||
dataKey="price"
|
||||
stroke="var(--color-price)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - Area Chart Example
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
Creating an area chart with gradient fill and legend.
|
||||
|
||||
```tsx
|
||||
import { Area, AreaChart, XAxis, YAxis } from "recharts"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart"
|
||||
|
||||
const chartConfig = {
|
||||
desktop: { label: "Desktop", color: "var(--chart-1)" },
|
||||
mobile: { label: "Mobile", color: "var(--chart-2)" },
|
||||
} satisfies import("@/components/ui/chart").ChartConfig
|
||||
|
||||
export function AreaChartDemo() {
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="min-h-[200px]">
|
||||
<AreaChart data={chartData}>
|
||||
<XAxis dataKey="month" tickLine={false} axisLine={false} />
|
||||
<YAxis tickLine={false} axisLine={false} />
|
||||
<Area
|
||||
dataKey="desktop"
|
||||
fill="var(--color-desktop)"
|
||||
stroke="var(--color-desktop)"
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
dataKey="mobile"
|
||||
fill="var(--color-mobile)"
|
||||
stroke="var(--color-mobile)"
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - Pie Chart Example
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
Creating a pie/donut chart with shadcn/ui.
|
||||
|
||||
```tsx
|
||||
import { Pie, PieChart } from "recharts"
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart"
|
||||
|
||||
const chartConfig = {
|
||||
chrome: { label: "Chrome", color: "var(--chart-1)" },
|
||||
safari: { label: "Safari", color: "var(--chart-2)" },
|
||||
firefox: { label: "Firefox", color: "var(--chart-3)" },
|
||||
} satisfies import("@/components/ui/chart").ChartConfig
|
||||
|
||||
const pieData = [
|
||||
{ browser: "Chrome", visitors: 275, fill: "var(--color-chrome)" },
|
||||
{ browser: "Safari", visitors: 200, fill: "var(--color-safari)" },
|
||||
{ browser: "Firefox", visitors: 187, fill: "var(--color-firefox)" },
|
||||
]
|
||||
|
||||
export function PieChartDemo() {
|
||||
return (
|
||||
<ChartContainer config={chartConfig} className="min-h-[200px]">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieData}
|
||||
dataKey="visitors"
|
||||
nameKey="browser"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={80}
|
||||
/>
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
</PieChart>
|
||||
</ChartContainer>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui ChartTooltipContent Props
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
The ChartTooltipContent component accepts these props for customizing tooltip behavior.
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `labelKey` | string | "label" | Key for tooltip label |
|
||||
| `nameKey` | string | "name" | Key for tooltip name |
|
||||
| `indicator` | "dot" \| "line" \| "dashed" | "dot" | Indicator style |
|
||||
| `hideLabel` | boolean | false | Hide label |
|
||||
| `hideIndicator` | boolean | false | Hide indicator |
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - Accessibility
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
Enable keyboard navigation and screen reader support by adding the accessibilityLayer prop.
|
||||
|
||||
```tsx
|
||||
<BarChart accessibilityLayer data={chartData}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis dataKey="month" />
|
||||
<Bar dataKey="desktop" fill="var(--color-desktop)" />
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
</BarChart>
|
||||
```
|
||||
|
||||
This adds:
|
||||
- Keyboard arrow key navigation
|
||||
- ARIA labels for chart elements
|
||||
- Screen reader announcements for data values
|
||||
|
||||
--------------------------------
|
||||
|
||||
### shadcn/ui Chart Component - Recharts Dependencies
|
||||
|
||||
Source: https://ui.shadcn.com/docs/components/chart
|
||||
|
||||
The chart component requires the following Recharts dependencies to be installed.
|
||||
|
||||
```bash
|
||||
pnpm add recharts
|
||||
npm install recharts
|
||||
yarn add recharts
|
||||
```
|
||||
|
||||
Recharts provides the following chart types:
|
||||
- Area, Bar, Line, Pie, Composed
|
||||
- Radar, RadialBar, Scatter
|
||||
- Funnel, Treemap
|
||||
145
skills/shadcn-ui/references/learn.md
Normal file
145
skills/shadcn-ui/references/learn.md
Normal file
@@ -0,0 +1,145 @@
|
||||
# shadcn/ui Learning Guide
|
||||
|
||||
This guide helps you learn shadcn/ui from basics to advanced patterns.
|
||||
|
||||
## Learning Path
|
||||
|
||||
### 1. Understanding the Philosophy
|
||||
|
||||
shadcn/ui is different from traditional component libraries:
|
||||
|
||||
- **Copy-paste components**: Components are copied into your project, not installed as packages
|
||||
- **Full customization**: You own the code and can modify it freely
|
||||
- **Built on Radix UI**: Provides accessibility primitives
|
||||
- **Styled with Tailwind**: Uses utility classes for consistent styling
|
||||
|
||||
### 2. Core Concepts to Master
|
||||
|
||||
#### Class Variance Authority (CVA)
|
||||
Most components use CVA for variant management:
|
||||
|
||||
```tsx
|
||||
const buttonVariants = cva(
|
||||
"base-classes",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "variant-classes",
|
||||
destructive: "destructive-classes",
|
||||
},
|
||||
size: {
|
||||
default: "size-classes",
|
||||
sm: "small-classes",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
#### cn Utility Function
|
||||
The `cn` function combines classes and resolves conflicts:
|
||||
|
||||
```tsx
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Installation Checklist
|
||||
|
||||
- [ ] Initialize a new project (Next.js, Vite, or Remix)
|
||||
- [ ] Install Tailwind CSS
|
||||
- [ ] Run `npx shadcn@latest init`
|
||||
- [ ] Configure CSS variables
|
||||
- [ ] Install first component: `npx shadcn@latest add button`
|
||||
|
||||
### 4. Essential Components to Learn First
|
||||
|
||||
1. **Button** - Learn variants and sizes
|
||||
2. **Input** - Form inputs with labels
|
||||
3. **Card** - Container components
|
||||
4. **Form** - Form handling with React Hook Form
|
||||
5. **Dialog** - Modal windows
|
||||
6. **Select** - Dropdown selections
|
||||
7. **Toast** - Notifications
|
||||
|
||||
### 5. Common Patterns
|
||||
|
||||
#### Form Pattern
|
||||
Every form follows this structure:
|
||||
|
||||
```tsx
|
||||
1. Define Zod schema
|
||||
2. Create form with useForm
|
||||
3. Wrap with Form component
|
||||
4. Add FormField for each input
|
||||
5. Handle submission
|
||||
```
|
||||
|
||||
#### Component Customization Pattern
|
||||
To customize a component:
|
||||
|
||||
1. Copy component to your project
|
||||
2. Modify the variants
|
||||
3. Add new props if needed
|
||||
4. Update types
|
||||
|
||||
### 6. Best Practices
|
||||
|
||||
- Always use TypeScript
|
||||
- Follow the existing component structure
|
||||
- Use semantic HTML when possible
|
||||
- Test with screen readers for accessibility
|
||||
- Keep components small and focused
|
||||
|
||||
### 7. Advanced Topics
|
||||
|
||||
- Creating custom components from scratch
|
||||
- Building complex forms with validation
|
||||
- Implementing dark mode
|
||||
- Optimizing for performance
|
||||
- Testing components
|
||||
|
||||
## Practice Exercises
|
||||
|
||||
### Exercise 1: Basic Setup
|
||||
1. Create a new Next.js project
|
||||
2. Set up shadcn/ui
|
||||
3. Install and customize a Button component
|
||||
4. Add a new variant "gradient"
|
||||
|
||||
### Exercise 2: Form Building
|
||||
1. Create a contact form with:
|
||||
- Name input (required)
|
||||
- Email input (email validation)
|
||||
- Message textarea (min length)
|
||||
- Submit button with loading state
|
||||
|
||||
### Exercise 3: Component Combination
|
||||
1. Build a settings page using:
|
||||
- Card for layout
|
||||
- Sheet for mobile menu
|
||||
- Select for dropdowns
|
||||
- Switch for toggles
|
||||
- Toast for notifications
|
||||
|
||||
### Exercise 4: Custom Component
|
||||
1. Create a custom Badge component
|
||||
2. Support variants: default, secondary, destructive, outline
|
||||
3. Support sizes: sm, default, lg
|
||||
4. Add icon support
|
||||
|
||||
## Resources
|
||||
|
||||
- [Official Documentation](https://ui.shadcn.com)
|
||||
- [GitHub Repository](https://github.com/shadcn/ui)
|
||||
- [Examples Gallery](https://ui.shadcn.com/examples)
|
||||
- [Radix UI Primitives](https://www.radix-ui.com/primitives)
|
||||
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
|
||||
1725
skills/shadcn-ui/references/official-ui-reference.md
Normal file
1725
skills/shadcn-ui/references/official-ui-reference.md
Normal file
File diff suppressed because it is too large
Load Diff
586
skills/shadcn-ui/references/reference.md
Normal file
586
skills/shadcn-ui/references/reference.md
Normal file
@@ -0,0 +1,586 @@
|
||||
# shadcn.io Component Library
|
||||
|
||||
shadcn.io is a comprehensive React UI component library built on shadcn/ui principles, providing developers with production-ready, composable components for modern web applications. The library serves as a centralized resource for React developers who need high-quality UI components with TypeScript support, ranging from basic interactive elements to advanced AI-powered integrations. Unlike traditional component libraries that require package installations, shadcn.io components are designed to be copied directly into your project, giving you full control and customization capabilities.
|
||||
|
||||
The library encompasses four major categories: composable UI components (terminal, dock, credit cards, QR codes, color pickers), chart components built with Recharts, animation components with Tailwind CSS integration, and custom React hooks for state management and lifecycle operations. Each component follows best practices for accessibility, performance, and developer experience, with comprehensive TypeScript definitions and Next.js compatibility. The platform emphasizes flexibility and customization, allowing developers to modify components at the source level rather than being constrained by package APIs.
|
||||
|
||||
## Core Components
|
||||
|
||||
### Terminal Component
|
||||
Interactive terminal emulator with typing animations and command execution simulation for developer-focused interfaces.
|
||||
|
||||
```tsx
|
||||
import { Terminal } from "@/components/ui/terminal"
|
||||
|
||||
export default function DemoTerminal() {
|
||||
return (
|
||||
npm install @repo/terminalInstalling dependencies...npm start
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Dock Component
|
||||
macOS-style application dock with smooth magnification effects on hover, perfect for navigation menus.
|
||||
|
||||
```tsx
|
||||
import { Dock, DockIcon } from "@/components/ui/dock"
|
||||
import { Home, Settings, User, Mail } from "lucide-react"
|
||||
|
||||
export default function AppDock() {
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Credit Card Component
|
||||
Interactive 3D credit card component with flip animations for payment forms and card displays.
|
||||
|
||||
```tsx
|
||||
import { CreditCard } from "@/components/ui/credit-card"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function PaymentForm() {
|
||||
const [cardData, setCardData] = useState({
|
||||
number: "4532 1234 5678 9010",
|
||||
holder: "JOHN DOE",
|
||||
expiry: "12/28",
|
||||
cvv: "123"
|
||||
})
|
||||
|
||||
return (
|
||||
console.log("Card flipped:", flipped)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Image Zoom Component
|
||||
Zoomable image component with smooth modal transitions for image galleries and product displays.
|
||||
|
||||
```tsx
|
||||
import { ImageZoom } from "@/components/ui/image-zoom"
|
||||
|
||||
export default function ProductGallery() {
|
||||
return (
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### QR Code Component
|
||||
Generate and display customizable QR codes with styling options for links, contact information, and authentication.
|
||||
|
||||
```tsx
|
||||
import { QRCode } from "@/components/ui/qr-code"
|
||||
|
||||
export default function ShareDialog() {
|
||||
const shareUrl = "https://shadcn.io"
|
||||
|
||||
return (
|
||||
|
||||
|
||||
Scan to visit shadcn.io
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Color Picker Component
|
||||
Advanced color selection component supporting multiple color formats (HEX, RGB, HSL) with preview.
|
||||
|
||||
```tsx
|
||||
import { ColorPicker } from "@/components/ui/color-picker"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function ThemeCustomizer() {
|
||||
const [color, setColor] = useState("#3b82f6")
|
||||
|
||||
return (
|
||||
|
||||
|
||||
Selected: {color}
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Chart Components
|
||||
|
||||
### Bar Chart Component
|
||||
Clean bar chart component for data comparison and categorical analysis using Recharts.
|
||||
|
||||
```tsx
|
||||
import { BarChart } from "@/components/ui/bar-chart"
|
||||
|
||||
export default function SalesChart() {
|
||||
const data = [
|
||||
{ month: "Jan", sales: 4000, revenue: 2400 },
|
||||
{ month: "Feb", sales: 3000, revenue: 1398 },
|
||||
{ month: "Mar", sales: 2000, revenue: 9800 },
|
||||
{ month: "Apr", sales: 2780, revenue: 3908 },
|
||||
{ month: "May", sales: 1890, revenue: 4800 },
|
||||
{ month: "Jun", sales: 2390, revenue: 3800 }
|
||||
]
|
||||
|
||||
return (
|
||||
`$${value.toLocaleString()}`}
|
||||
yAxisWidth={60}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Line Chart Component
|
||||
Smooth line chart for visualizing trends and time-series data with multiple data series support.
|
||||
|
||||
```tsx
|
||||
import { LineChart } from "@/components/ui/line-chart"
|
||||
|
||||
export default function MetricsChart() {
|
||||
const data = [
|
||||
{ date: "2024-01", users: 1200, sessions: 3400 },
|
||||
{ date: "2024-02", users: 1800, sessions: 4200 },
|
||||
{ date: "2024-03", users: 2400, sessions: 5800 },
|
||||
{ date: "2024-04", users: 3100, sessions: 7200 },
|
||||
{ date: "2024-05", users: 3800, sessions: 8900 }
|
||||
]
|
||||
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Pie Chart Component
|
||||
Donut chart component for displaying proportional data and percentage distributions.
|
||||
|
||||
```tsx
|
||||
import { PieChart } from "@/components/ui/pie-chart"
|
||||
|
||||
export default function MarketShareChart() {
|
||||
const data = [
|
||||
{ name: "Product A", value: 400, fill: "#3b82f6" },
|
||||
{ name: "Product B", value: 300, fill: "#10b981" },
|
||||
{ name: "Product C", value: 300, fill: "#f59e0b" },
|
||||
{ name: "Product D", value: 200, fill: "#ef4444" }
|
||||
]
|
||||
|
||||
return (
|
||||
`${entry.name}: ${entry.value}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Area Chart Component
|
||||
Stacked area chart for visualizing volume changes over time with multiple data series.
|
||||
|
||||
```tsx
|
||||
import { AreaChart } from "@/components/ui/area-chart"
|
||||
|
||||
export default function TrafficChart() {
|
||||
const data = [
|
||||
{ month: "Jan", mobile: 2000, desktop: 3000, tablet: 1000 },
|
||||
{ month: "Feb", mobile: 2200, desktop: 3200, tablet: 1100 },
|
||||
{ month: "Mar", mobile: 2800, desktop: 3800, tablet: 1300 },
|
||||
{ month: "Apr", mobile: 3200, desktop: 4200, tablet: 1500 },
|
||||
{ month: "May", mobile: 3800, desktop: 4800, tablet: 1800 }
|
||||
]
|
||||
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Radar Chart Component
|
||||
Multi-axis chart for comparing multiple variables across different categories simultaneously.
|
||||
|
||||
```tsx
|
||||
import { RadarChart } from "@/components/ui/radar-chart"
|
||||
|
||||
export default function SkillsChart() {
|
||||
const data = [
|
||||
{ skill: "JavaScript", score: 85, industry: 75 },
|
||||
{ skill: "TypeScript", score: 80, industry: 70 },
|
||||
{ skill: "React", score: 90, industry: 80 },
|
||||
{ skill: "Node.js", score: 75, industry: 72 },
|
||||
{ skill: "CSS", score: 88, industry: 78 }
|
||||
]
|
||||
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Mixed Chart Component
|
||||
Combined bar and line chart for displaying multiple data types with different visualization methods.
|
||||
|
||||
```tsx
|
||||
import { MixedChart } from "@/components/ui/mixed-chart"
|
||||
|
||||
export default function PerformanceChart() {
|
||||
const data = [
|
||||
{ month: "Jan", revenue: 4000, growth: 5.2 },
|
||||
{ month: "Feb", revenue: 4200, growth: 5.0 },
|
||||
{ month: "Mar", revenue: 4800, growth: 14.3 },
|
||||
{ month: "Apr", revenue: 5200, growth: 8.3 },
|
||||
{ month: "May", revenue: 5800, growth: 11.5 }
|
||||
]
|
||||
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Animation Components
|
||||
|
||||
### Magnetic Effect Component
|
||||
Magnetic hover effect that smoothly follows cursor movement for interactive buttons and cards.
|
||||
|
||||
```tsx
|
||||
import { Magnetic } from "@/components/ui/magnetic"
|
||||
|
||||
export default function InteractiveButton() {
|
||||
return (
|
||||
|
||||
Hover me
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Animated Cursor Component
|
||||
Custom animated cursor with interactive effects and particle trails for immersive experiences.
|
||||
|
||||
```tsx
|
||||
import { AnimatedCursor } from "@/components/ui/animated-cursor"
|
||||
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<>
|
||||
|
||||
{children}
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Apple Hello Effect Component
|
||||
Recreation of Apple's iconic "hello" animation with multi-language text transitions.
|
||||
|
||||
```tsx
|
||||
import { AppleHello } from "@/components/ui/apple-hello"
|
||||
|
||||
export default function WelcomeScreen() {
|
||||
const greetings = [
|
||||
{ text: "Hello", lang: "en" },
|
||||
{ text: "Bonjour", lang: "fr" },
|
||||
{ text: "こんにちは", lang: "ja" },
|
||||
{ text: "Hola", lang: "es" },
|
||||
{ text: "你好", lang: "zh" }
|
||||
]
|
||||
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Liquid Button Component
|
||||
Button with fluid liquid animation effect on hover for engaging call-to-action elements.
|
||||
|
||||
```tsx
|
||||
import { LiquidButton } from "@/components/ui/liquid-button"
|
||||
|
||||
export default function CTASection() {
|
||||
return (
|
||||
console.log("CTA clicked")}
|
||||
>
|
||||
Get Started
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Rolling Text Component
|
||||
Text animation that creates a rolling effect with smooth character transitions.
|
||||
|
||||
```tsx
|
||||
import { RollingText } from "@/components/ui/rolling-text"
|
||||
|
||||
export default function AnimatedHeading() {
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Shimmering Text Component
|
||||
Text with animated shimmer effect for attention-grabbing headings and highlights.
|
||||
|
||||
```tsx
|
||||
import { ShimmeringText } from "@/components/ui/shimmering-text"
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## React Hooks
|
||||
|
||||
### useBoolean Hook
|
||||
Enhanced boolean state management with toggle, enable, and disable methods for cleaner component logic.
|
||||
|
||||
```tsx
|
||||
import { useBoolean } from "@/hooks/use-boolean"
|
||||
|
||||
export default function TogglePanel() {
|
||||
const modal = useBoolean(false)
|
||||
const loading = useBoolean(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
loading.setTrue()
|
||||
try {
|
||||
await submitForm()
|
||||
modal.setFalse()
|
||||
} finally {
|
||||
loading.setFalse()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
Toggle Modal
|
||||
{modal.value && (
|
||||
|
||||
|
||||
Status: {loading.value ? "Saving..." : "Ready"}
|
||||
|
||||
Submit
|
||||
|
||||
|
||||
)}
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### useCounter Hook
|
||||
Counter hook with increment, decrement, reset, and set functionality for numeric state management.
|
||||
|
||||
```tsx
|
||||
import { useCounter } from "@/hooks/use-counter"
|
||||
|
||||
export default function CartCounter() {
|
||||
const quantity = useCounter(0, { min: 0, max: 99 })
|
||||
|
||||
return (
|
||||
|
||||
|
||||
-
|
||||
{quantity.value}
|
||||
+
|
||||
|
||||
Reset
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### useLocalStorage Hook
|
||||
Persist state in browser localStorage with automatic serialization and deserialization.
|
||||
|
||||
```tsx
|
||||
import { useLocalStorage } from "@/hooks/use-local-storage"
|
||||
|
||||
export default function UserPreferences() {
|
||||
const [theme, setTheme] = useLocalStorage("theme", "light")
|
||||
const [settings, setSettings] = useLocalStorage("settings", {
|
||||
notifications: true,
|
||||
emailUpdates: false
|
||||
})
|
||||
|
||||
return (
|
||||
|
||||
|
||||
setTheme(e.target.value)}>
|
||||
LightDark setSettings({
|
||||
...settings,
|
||||
notifications: e.target.checked
|
||||
})}
|
||||
/>
|
||||
Enable Notifications
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### useDebounceValue Hook
|
||||
Debounce values to prevent excessive updates and API calls during rapid user input.
|
||||
|
||||
```tsx
|
||||
import { useDebounceValue } from "@/hooks/use-debounce-value"
|
||||
import { useState, useEffect } from "react"
|
||||
|
||||
export default function SearchBox() {
|
||||
const [search, setSearch] = useState("")
|
||||
const debouncedSearch = useDebounceValue(search, 500)
|
||||
const [results, setResults] = useState([])
|
||||
const [apiCalls, setApiCalls] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedSearch) {
|
||||
setApiCalls(prev => prev + 1)
|
||||
fetch(`/api/search?q=${debouncedSearch}`)
|
||||
.then(res => res.json())
|
||||
.then(setResults)
|
||||
}
|
||||
}, [debouncedSearch])
|
||||
|
||||
return (
|
||||
|
||||
|
||||
setSearch(e.target.value)}
|
||||
placeholder="Search..."
|
||||
/>
|
||||
|
||||
|
||||
API calls: {apiCalls}
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### useHover Hook
|
||||
Track hover state on elements with customizable enter and leave delays for tooltip and preview functionality.
|
||||
|
||||
```tsx
|
||||
import { useHover } from "@/hooks/use-hover"
|
||||
import { useRef } from "react"
|
||||
|
||||
export default function ImagePreview() {
|
||||
const hoverRef = useRef(null)
|
||||
const isHovering = useHover(hoverRef, {
|
||||
enterDelay: 200,
|
||||
leaveDelay: 100
|
||||
})
|
||||
|
||||
return (
|
||||
|
||||
|
||||
|
||||
{isHovering && (
|
||||
|
||||
|
||||
|
||||
|
||||
)}
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### useCountdown Hook
|
||||
Countdown timer with play, pause, reset controls and completion callbacks for time-limited features.
|
||||
|
||||
```tsx
|
||||
import { useCountdown } from "@/hooks/use-countdown"
|
||||
|
||||
export default function OTPTimer() {
|
||||
const countdown = useCountdown({
|
||||
initialSeconds: 60,
|
||||
onComplete: () => alert("OTP expired! Request a new code.")
|
||||
})
|
||||
|
||||
return (
|
||||
|
||||
|
||||
{countdown.seconds}s
|
||||
|
||||
{!countdown.isRunning ? (
|
||||
Start
|
||||
) : (
|
||||
Pause
|
||||
)}
|
||||
Reset
|
||||
|
||||
Status: {countdown.isComplete ? "Expired" : countdown.isRunning ? "Active" : "Paused"}
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Installation and Usage
|
||||
|
||||
### CLI Installation
|
||||
Install components directly into your project using the shadcn CLI for instant integration.
|
||||
|
||||
```bash
|
||||
# Initialize shadcn in your project
|
||||
npx shadcn@latest init
|
||||
|
||||
# Add individual components
|
||||
npx shadcn@latest add terminal
|
||||
npx shadcn@latest add dock
|
||||
npx shadcn@latest add credit-card
|
||||
|
||||
# Add multiple components at once
|
||||
npx shadcn@latest add bar-chart line-chart pie-chart
|
||||
|
||||
# Add hooks
|
||||
npx shadcn@latest add use-boolean use-counter use-local-storage
|
||||
```
|
||||
|
||||
### Project Configuration
|
||||
Configure your project to work with shadcn.io components using TypeScript and Tailwind CSS.
|
||||
|
||||
```typescript
|
||||
// tailwind.config.ts
|
||||
import type { Config } from "tailwindcss"
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./pages/**/*.{ts,tsx}",
|
||||
"./components/**/*.{ts,tsx}",
|
||||
"./app/**/*.{ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
||||
The shadcn.io component library serves as a comprehensive toolkit for React developers building modern web applications with Next.js and TypeScript. The library's primary use cases include rapid prototyping of user interfaces, building data-rich dashboards with interactive charts, creating engaging user experiences with animations and effects, and implementing common UI patterns without writing boilerplate code. The copy-paste approach gives developers complete ownership of their components, allowing for deep customization while maintaining consistency with shadcn/ui design principles. Components are particularly well-suited for SaaS applications, admin panels, marketing websites, and e-commerce platforms that require professional, accessible UI elements.
|
||||
|
||||
Integration patterns center around composability and customization rather than rigid package dependencies. Developers can cherry-pick individual components using the CLI, modify them at the source level to match their design system, and combine them with existing shadcn/ui components for a cohesive interface. The library supports both light and dark themes through CSS variables, integrates seamlessly with Tailwind CSS utility classes, and follows React best practices for performance and accessibility. Custom hooks provide reusable logic patterns that complement the visual components, creating a complete ecosystem for building feature-rich applications. The TypeScript-first approach ensures type safety throughout the development process, while the Recharts integration for data visualization provides powerful charting capabilities without additional configuration overhead.
|
||||
1578
skills/shadcn-ui/references/ui-reference.md
Normal file
1578
skills/shadcn-ui/references/ui-reference.md
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user