Initial commit
This commit is contained in:
Zhongwei Li
@@ -0,0 +1,266 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export default function DialogsPage() {
|
||||
const [isOpen, setIsOpen] = React.useState(false)
|
||||
|
||||
const handleSave = () => {
|
||||
toast.success('Changes saved successfully!')
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-4xl py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold">Dialog Examples</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Modal dialogs with focus trapping and keyboard navigation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Basic Dialog */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Basic Dialog</CardTitle>
|
||||
<CardDescription>Simple dialog with title and content</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Open Dialog</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Welcome!</DialogTitle>
|
||||
<DialogDescription>
|
||||
This is a basic dialog example. Press ESC or click outside to
|
||||
close.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Dialogs automatically handle:
|
||||
</p>
|
||||
<ul className="ml-6 mt-2 list-disc text-sm text-muted-foreground">
|
||||
<li>Focus trapping</li>
|
||||
<li>Keyboard navigation (ESC to close)</li>
|
||||
<li>Backdrop click to dismiss</li>
|
||||
<li>Return focus on close</li>
|
||||
</ul>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button onClick={() => toast.success('Action completed!')}>
|
||||
Confirm
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Dialog with Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Dialog with Form</CardTitle>
|
||||
<CardDescription>Dialog containing a form with inputs</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Edit Profile</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're
|
||||
done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" defaultValue="John Doe" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
defaultValue="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave}>Save Changes</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Confirmation Dialog */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Confirmation Dialog</CardTitle>
|
||||
<CardDescription>Destructive action confirmation</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="destructive">Delete Item</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you absolutely sure?</DialogTitle>
|
||||
<DialogDescription>
|
||||
This action cannot be undone. This will permanently delete
|
||||
your item and remove your data from our servers.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
toast.error('Item deleted')
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Info Dialog */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Information Dialog</CardTitle>
|
||||
<CardDescription>Display information without actions</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Show Info</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>About This App</DialogTitle>
|
||||
<DialogDescription>
|
||||
Built with modern web technologies
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium">Stack</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Next.js 16 with App Router</li>
|
||||
<li>• React 19</li>
|
||||
<li>• Tailwind CSS v3/v4</li>
|
||||
<li>• shadcn/ui components</li>
|
||||
<li>• TypeScript</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium">Features</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Dark mode support</li>
|
||||
<li>• Fully accessible (WCAG 2.1 AA)</li>
|
||||
<li>• Type-safe</li>
|
||||
<li>• Production-ready</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Accessibility Info */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Dialog Accessibility</CardTitle>
|
||||
<CardDescription>
|
||||
shadcn/ui dialogs are built on Radix UI with full accessibility
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4 text-sm">
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">Keyboard Navigation</h4>
|
||||
<ul className="ml-6 list-disc space-y-1 text-muted-foreground">
|
||||
<li>
|
||||
<kbd className="rounded bg-muted px-1.5 py-0.5">ESC</kbd> -
|
||||
Close dialog
|
||||
</li>
|
||||
<li>
|
||||
<kbd className="rounded bg-muted px-1.5 py-0.5">Tab</kbd> -
|
||||
Move focus forward
|
||||
</li>
|
||||
<li>
|
||||
<kbd className="rounded bg-muted px-1.5 py-0.5">
|
||||
Shift + Tab
|
||||
</kbd>{' '}
|
||||
- Move focus backward
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">Screen Reader Support</h4>
|
||||
<ul className="ml-6 list-disc space-y-1 text-muted-foreground">
|
||||
<li>
|
||||
Dialog title is announced via{' '}
|
||||
<code className="rounded bg-muted px-1">aria-labelledby</code>
|
||||
</li>
|
||||
<li>
|
||||
Description is read via{' '}
|
||||
<code className="rounded bg-muted px-1">aria-describedby</code>
|
||||
</li>
|
||||
<li>Focus is trapped within dialog when open</li>
|
||||
<li>Focus returns to trigger element on close</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">Mouse/Touch Support</h4>
|
||||
<ul className="ml-6 list-disc space-y-1 text-muted-foreground">
|
||||
<li>Click backdrop to dismiss (optional)</li>
|
||||
<li>Close button in top-right corner</li>
|
||||
<li>Scroll content if overflowing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export default function FormsPage() {
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false)
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
const formData = new FormData(event.currentTarget)
|
||||
const data = {
|
||||
name: formData.get('name'),
|
||||
email: formData.get('email'),
|
||||
message: formData.get('message'),
|
||||
}
|
||||
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
console.log('Form submitted:', data)
|
||||
toast.success('Form submitted successfully!')
|
||||
|
||||
// Reset form
|
||||
event.currentTarget.reset()
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-4xl py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold">Form Examples</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Accessible form components with HTML5 validation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{/* Basic Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Contact Form</CardTitle>
|
||||
<CardDescription>
|
||||
Basic form with HTML5 validation and toast notifications
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">
|
||||
Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="John Doe"
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">
|
||||
Email <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="john@example.com"
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="message">
|
||||
Message <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
placeholder="Your message here..."
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-2">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit'}
|
||||
</Button>
|
||||
<Button type="reset" variant="outline" disabled={isSubmitting}>
|
||||
Reset
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
{/* Form Validation Example */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Advanced Validation</CardTitle>
|
||||
<CardDescription>
|
||||
For production forms, consider using React Hook Form + Zod
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg bg-muted p-4">
|
||||
<code className="text-sm">
|
||||
<pre className="overflow-x-auto">
|
||||
{`import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import * as z from 'zod'
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(8)
|
||||
})
|
||||
|
||||
export function LoginForm() {
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema)
|
||||
})
|
||||
|
||||
// ... form implementation
|
||||
}`}
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Install dependencies:{' '}
|
||||
<code className="rounded bg-muted px-1 py-0.5">
|
||||
npm install react-hook-form @hookform/resolvers zod
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Accessibility Notes */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accessibility Guidelines</CardTitle>
|
||||
<CardDescription>Best practices for accessible forms</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="ml-6 list-disc space-y-2 text-sm">
|
||||
<li>
|
||||
<strong>Always pair labels with inputs</strong> using{' '}
|
||||
<code className="rounded bg-muted px-1">htmlFor</code> and{' '}
|
||||
<code className="rounded bg-muted px-1">id</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Mark required fields</strong> visually and with{' '}
|
||||
<code className="rounded bg-muted px-1">aria-required</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Provide clear error messages</strong> linked with{' '}
|
||||
<code className="rounded bg-muted px-1">aria-describedby</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Use appropriate input types</strong> (email, tel, url,
|
||||
etc.)
|
||||
</li>
|
||||
<li>
|
||||
<strong>Disable submit during processing</strong> with{' '}
|
||||
<code className="rounded bg-muted px-1">aria-busy</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Don't use placeholder as label</strong> - placeholders
|
||||
disappear on focus
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { AppShell } from '@/components/app-shell'
|
||||
import { FileText, Palette, SquareStack } from 'lucide-react'
|
||||
|
||||
const navigation = [
|
||||
{
|
||||
title: 'Forms',
|
||||
href: '/examples/forms',
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
title: 'Dialogs',
|
||||
href: '/examples/dialogs',
|
||||
icon: SquareStack,
|
||||
},
|
||||
{
|
||||
title: 'Theme',
|
||||
href: '/examples/theme',
|
||||
icon: Palette,
|
||||
},
|
||||
]
|
||||
|
||||
export default function ExamplesLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<AppShell navigation={navigation} siteTitle="Examples">
|
||||
{children}
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
export default function ThemePage() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
|
||||
// Prevent hydration mismatch
|
||||
React.useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-6xl py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold">Theme & Design Tokens</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Explore the color system and design tokens
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Theme Switcher */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Theme Switcher</CardTitle>
|
||||
<CardDescription>
|
||||
Current theme: <strong className="capitalize">{theme}</strong>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={theme === 'light' ? 'default' : 'outline'}
|
||||
onClick={() => setTheme('light')}
|
||||
>
|
||||
Light
|
||||
</Button>
|
||||
<Button
|
||||
variant={theme === 'dark' ? 'default' : 'outline'}
|
||||
onClick={() => setTheme('dark')}
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
<Button
|
||||
variant={theme === 'system' ? 'default' : 'outline'}
|
||||
onClick={() => setTheme('system')}
|
||||
>
|
||||
System
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Color Tokens */}
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Semantic Colors</CardTitle>
|
||||
<CardDescription>
|
||||
Colors that describe purpose, not appearance
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<ColorSwatch
|
||||
label="Background"
|
||||
description="Main background color"
|
||||
className="bg-background text-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Foreground"
|
||||
description="Main text color"
|
||||
className="bg-foreground text-background"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Primary"
|
||||
description="Brand color for main actions"
|
||||
className="bg-primary text-primary-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Secondary"
|
||||
description="Less prominent actions"
|
||||
className="bg-secondary text-secondary-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Muted"
|
||||
description="Disabled states, subtle backgrounds"
|
||||
className="bg-muted text-muted-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Accent"
|
||||
description="Highlights, hover states"
|
||||
className="bg-accent text-accent-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Destructive"
|
||||
description="Errors, delete actions"
|
||||
className="bg-destructive text-destructive-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Card"
|
||||
description="Elevated surfaces"
|
||||
className="border bg-card text-card-foreground"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Component Variants */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Button Variants</CardTitle>
|
||||
<CardDescription>
|
||||
Different button styles using semantic colors
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button>Default</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button size="sm">Small</Button>
|
||||
<Button size="default">Default</Button>
|
||||
<Button size="lg">Large</Button>
|
||||
<Button size="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="m12 5 7 7-7 7" />
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Typography */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Typography Scale</CardTitle>
|
||||
<CardDescription>Text styles with proper hierarchy</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Heading 1 (4xl)</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-4xl font-bold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold">Heading 2 (3xl)</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-3xl font-bold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold">Heading 3 (2xl)</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-2xl font-semibold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-semibold">Heading 4 (xl)</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-xl font-semibold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-base">Body text (base)</p>
|
||||
<p className="text-sm text-muted-foreground">text-base</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm">Small text (sm)</p>
|
||||
<p className="text-sm text-muted-foreground">text-sm</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Extra small (xs)
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">text-xs</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Customization Guide */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Customization</CardTitle>
|
||||
<CardDescription>How to customize your theme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">1. Update CSS Variables</h4>
|
||||
<p className="mb-2 text-sm text-muted-foreground">
|
||||
Edit <code className="rounded bg-muted px-1">app/globals.css</code>:
|
||||
</p>
|
||||
<pre className="overflow-x-auto rounded-lg bg-muted p-4 text-sm">
|
||||
<code>{`:root {
|
||||
--primary: 270 80% 45%; /* Change to your brand color */
|
||||
--radius: 0.75rem; /* Adjust border radius */
|
||||
}`}</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">2. Use HSL Color Picker</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Find HSL values using:{' '}
|
||||
<a
|
||||
href="https://hslpicker.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline"
|
||||
>
|
||||
HSL Color Picker
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">3. Test Contrast</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Ensure WCAG compliance using:{' '}
|
||||
<a
|
||||
href="https://webaim.org/resources/contrastchecker/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline"
|
||||
>
|
||||
WebAIM Contrast Checker
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">4. Test Both Themes</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Always verify colors look good in both light and dark mode
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ColorSwatch({
|
||||
label,
|
||||
description,
|
||||
className,
|
||||
}: {
|
||||
label: string
|
||||
description: string
|
||||
className: string
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
className={`flex h-20 items-center justify-center rounded-lg border ${className}`}
|
||||
>
|
||||
<span className="font-medium">{label}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{label}</p>
|
||||
<p className="text-xs text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import { ThemeProvider } from '@/components/theme-provider'
|
||||
import { Toaster } from 'sonner'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={inter.className}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{/* Skip link for accessibility */}
|
||||
<a href="#main-content" className="skip-link">
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
{children}
|
||||
|
||||
<Toaster richColors closeButton position="top-right" />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
141
skills/tailwind-shadcn-ui-setup/assets/app/page.tsx.template
Normal file
141
skills/tailwind-shadcn-ui-setup/assets/app/page.tsx.template
Normal file
@@ -0,0 +1,141 @@
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main id="main-content" className="container py-8">
|
||||
{/* Hero section */}
|
||||
<section className="flex flex-col items-center gap-4 py-12 text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
|
||||
Welcome to Your App
|
||||
</h1>
|
||||
<p className="max-w-[700px] text-lg text-muted-foreground sm:text-xl">
|
||||
Built with Next.js 16, Tailwind CSS, and shadcn/ui. Beautiful,
|
||||
accessible, and fully customizable.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<Link href="/examples">View Examples</Link>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<Link href="https://ui.shadcn.com" target="_blank" rel="noopener noreferrer">
|
||||
Documentation
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features grid */}
|
||||
<section className="py-12">
|
||||
<h2 className="mb-8 text-center text-3xl font-bold">Features</h2>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tailwind CSS</CardTitle>
|
||||
<CardDescription>
|
||||
Utility-first CSS framework with custom design tokens
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Fully configured with CSS variables for easy theming and
|
||||
customization.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>shadcn/ui</CardTitle>
|
||||
<CardDescription>
|
||||
Beautiful, accessible component library
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Built on Radix UI primitives with full TypeScript support.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Dark Mode</CardTitle>
|
||||
<CardDescription>
|
||||
Automatic dark mode with system preference
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Seamless theme switching with high contrast in both modes.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accessibility</CardTitle>
|
||||
<CardDescription>
|
||||
WCAG 2.1 Level AA compliant
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Built with semantic HTML, ARIA attributes, and keyboard
|
||||
navigation.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Type Safe</CardTitle>
|
||||
<CardDescription>
|
||||
Full TypeScript support
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Catch errors at compile time with comprehensive type definitions.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Production Ready</CardTitle>
|
||||
<CardDescription>
|
||||
Optimized for performance
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Fast builds, small bundles, and excellent Lighthouse scores.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA section */}
|
||||
<section className="flex flex-col items-center gap-4 py-12 text-center">
|
||||
<h2 className="text-3xl font-bold">Ready to build?</h2>
|
||||
<p className="max-w-[600px] text-muted-foreground">
|
||||
Explore the example pages to see components in action, or start
|
||||
building your own features.
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href="/examples">Explore Examples</Link>
|
||||
</Button>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
162
skills/tailwind-shadcn-ui-setup/assets/components/app-shell.tsx
Normal file
162
skills/tailwind-shadcn-ui-setup/assets/components/app-shell.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { Menu } from 'lucide-react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { ModeToggle } from '@/components/mode-toggle'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NavItem {
|
||||
title: string
|
||||
href: string
|
||||
icon?: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
interface AppShellProps {
|
||||
children: React.ReactNode
|
||||
navigation?: NavItem[]
|
||||
siteTitle?: string
|
||||
}
|
||||
|
||||
export function AppShell({
|
||||
children,
|
||||
navigation = [],
|
||||
siteTitle = 'App',
|
||||
}: AppShellProps) {
|
||||
const pathname = usePathname()
|
||||
const [open, setOpen] = React.useState(false)
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-16 items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Mobile menu trigger */}
|
||||
{navigation.length > 0 && (
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="w-64 pr-0">
|
||||
<MobileNav
|
||||
items={navigation}
|
||||
pathname={pathname}
|
||||
onItemClick={() => setOpen(false)}
|
||||
/>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)}
|
||||
|
||||
{/* Site title */}
|
||||
<Link href="/" className="flex items-center space-x-2">
|
||||
<span className="text-xl font-bold">{siteTitle}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right side actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<ModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-1">
|
||||
{/* Desktop sidebar */}
|
||||
{navigation.length > 0 && (
|
||||
<aside className="hidden w-64 border-r bg-background md:block">
|
||||
<nav className="sticky top-16 flex h-[calc(100vh-4rem)] flex-col gap-2 p-4">
|
||||
<DesktopNav items={navigation} pathname={pathname} />
|
||||
</nav>
|
||||
</aside>
|
||||
)}
|
||||
|
||||
{/* Main content */}
|
||||
<main id="main-content" className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MobileNav({
|
||||
items,
|
||||
pathname,
|
||||
onItemClick,
|
||||
}: {
|
||||
items: NavItem[]
|
||||
pathname: string
|
||||
onItemClick: () => void
|
||||
}) {
|
||||
return (
|
||||
<nav className="flex flex-col gap-2 py-4">
|
||||
{items.map((item) => {
|
||||
const Icon = item.icon
|
||||
const isActive = pathname === item.href
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onItemClick}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-4 w-4" />}
|
||||
{item.title}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
function DesktopNav({
|
||||
items,
|
||||
pathname,
|
||||
}: {
|
||||
items: NavItem[]
|
||||
pathname: string
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{items.map((item) => {
|
||||
const Icon = item.icon
|
||||
const isActive = pathname === item.href
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-4 w-4" />}
|
||||
{item.title}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Moon, Sun } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
|
||||
export function ModeToggle() {
|
||||
const { setTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" aria-label="Toggle theme">
|
||||
<Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme('light')}>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme('dark')}>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme('system')}>
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { ThemeProvider as NextThemesProvider } from 'next-themes'
|
||||
import { type ThemeProviderProps } from 'next-themes/dist/types'
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
97
skills/tailwind-shadcn-ui-setup/assets/globals.css.template
Normal file
97
skills/tailwind-shadcn-ui-setup/assets/globals.css.template
Normal file
@@ -0,0 +1,97 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
|
||||
/* Base theme: {{THEME_PRESET}} */
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5.9% 10%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
*:focus-visible {
|
||||
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Skip link for accessibility */
|
||||
.skip-link {
|
||||
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50;
|
||||
@apply px-4 py-2 bg-background border-2 border-ring rounded-md;
|
||||
@apply text-foreground font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Text balance for headings */
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
// TODO: When Tailwind v4 is stable, consider migrating to @theme directive
|
||||
// See references/tailwind-v4-migration.md for details
|
||||
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./lib/**/*.{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))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: '0' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
} satisfies Config
|
||||
Reference in New Issue
Block a user