Initial commit with translated description
This commit is contained in:
342
references/shadcn-components.md
Normal file
342
references/shadcn-components.md
Normal file
@@ -0,0 +1,342 @@
|
||||
# shadcn/ui Component Reference
|
||||
|
||||
Quick reference for the 40+ pre-installed shadcn/ui components.
|
||||
|
||||
Documentation: https://ui.shadcn.com/docs/components
|
||||
|
||||
## Most Used for Landing Pages
|
||||
|
||||
| Component | Use Case | Example |
|
||||
|-----------|----------|---------|
|
||||
| `Button` | CTAs, actions | Hero buttons, form submits |
|
||||
| `Badge` | Labels, status | "New", "Popular", "Beta" |
|
||||
| `Card` | Content containers | Feature cards, pricing tiers |
|
||||
| `Accordion` | Collapsible content | FAQ sections |
|
||||
| `Dialog` | Modals | Video players, signup forms |
|
||||
| `NavigationMenu` | Header navigation | Main nav with dropdowns |
|
||||
| `Tabs` | Tabbed content | Feature showcases |
|
||||
| `Carousel` | Sliding content | Testimonials, galleries |
|
||||
|
||||
## Full Component List
|
||||
|
||||
### Layout & Navigation
|
||||
- `Accordion` — Collapsible sections
|
||||
- `Breadcrumb` — Navigation trail
|
||||
- `Carousel` — Sliding content
|
||||
- `Collapsible` — Expand/collapse
|
||||
- `NavigationMenu` — Header nav with dropdowns
|
||||
- `Pagination` — Page navigation
|
||||
- `Resizable` — Resizable panels
|
||||
- `Scroll-Area` — Custom scrollbars
|
||||
- `Separator` — Visual divider
|
||||
- `Sheet` — Slide-out panels
|
||||
- `Sidebar` — App sidebars
|
||||
- `Tabs` — Tabbed content
|
||||
|
||||
### Data Display
|
||||
- `Avatar` — User images
|
||||
- `Badge` — Labels and status
|
||||
- `Card` — Content container
|
||||
- `HoverCard` — Hover popups
|
||||
- `Table` — Data tables
|
||||
|
||||
### Forms
|
||||
- `Button` — Actions
|
||||
- `Checkbox` — Multi-select
|
||||
- `Combobox` — Searchable select
|
||||
- `DatePicker` — Date selection
|
||||
- `Form` — Form wrapper with validation
|
||||
- `Input` — Text input
|
||||
- `InputOTP` — One-time password
|
||||
- `Label` — Form labels
|
||||
- `RadioGroup` — Single select
|
||||
- `Select` — Dropdown select
|
||||
- `Slider` — Range selection
|
||||
- `Switch` — Toggle
|
||||
- `Textarea` — Multi-line input
|
||||
- `Toggle` — Toggle button
|
||||
- `ToggleGroup` — Button group
|
||||
|
||||
### Feedback
|
||||
- `Alert` — Info messages
|
||||
- `AlertDialog` — Confirmation dialogs
|
||||
- `Dialog` — Modal windows
|
||||
- `Drawer` — Bottom sheets
|
||||
- `Popover` — Popup content
|
||||
- `Progress` — Loading bars
|
||||
- `Skeleton` — Loading placeholders
|
||||
- `Sonner` — Toast notifications
|
||||
- `Toast` — Notifications
|
||||
- `Tooltip` — Hover hints
|
||||
|
||||
### Utilities
|
||||
- `AspectRatio` — Maintain ratios
|
||||
- `Calendar` — Date display
|
||||
- `Chart` — Data visualization
|
||||
- `Command` — Command palette
|
||||
- `ContextMenu` — Right-click menus
|
||||
- `DropdownMenu` — Dropdown menus
|
||||
- `Menubar` — App menubars
|
||||
|
||||
---
|
||||
|
||||
## Code Examples
|
||||
|
||||
### Hero with Badge and Buttons
|
||||
|
||||
```tsx
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<section className="py-24 text-center">
|
||||
<Badge variant="secondary" className="mb-4">
|
||||
Now in beta
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-5xl font-bold mb-6">
|
||||
Your headline here
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||||
Subheadline with more details about your product.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4 justify-center">
|
||||
<Button size="lg">Get Started</Button>
|
||||
<Button size="lg" variant="outline">Learn More</Button>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Feature Cards
|
||||
|
||||
```tsx
|
||||
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { Zap, Shield, Globe } from "lucide-react"
|
||||
|
||||
const features = [
|
||||
{ icon: Zap, title: "Fast", description: "Lightning quick performance" },
|
||||
{ icon: Shield, title: "Secure", description: "Enterprise-grade security" },
|
||||
{ icon: Globe, title: "Global", description: "CDN in 200+ locations" },
|
||||
]
|
||||
|
||||
function Features() {
|
||||
return (
|
||||
<section className="py-24">
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{features.map((f) => (
|
||||
<Card key={f.title}>
|
||||
<CardHeader>
|
||||
<f.icon className="h-10 w-10 mb-4 text-primary" />
|
||||
<CardTitle>{f.title}</CardTitle>
|
||||
<CardDescription>{f.description}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Pricing Table
|
||||
|
||||
```tsx
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Check } from "lucide-react"
|
||||
|
||||
const plans = [
|
||||
{ name: "Free", price: 0, features: ["5 projects", "Basic support"] },
|
||||
{ name: "Pro", price: 19, features: ["Unlimited projects", "Priority support", "API access"], popular: true },
|
||||
{ name: "Team", price: 49, features: ["Everything in Pro", "Team features", "SSO"] },
|
||||
]
|
||||
|
||||
function Pricing() {
|
||||
return (
|
||||
<section className="py-24">
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{plans.map((plan) => (
|
||||
<Card key={plan.name} className={plan.popular ? "border-primary" : ""}>
|
||||
<CardHeader>
|
||||
{plan.popular && <Badge className="w-fit mb-2">Most Popular</Badge>}
|
||||
<CardTitle>{plan.name}</CardTitle>
|
||||
<CardDescription>
|
||||
<span className="text-4xl font-bold">${plan.price}</span>
|
||||
<span className="text-muted-foreground">/month</span>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
{plan.features.map((f) => (
|
||||
<li key={f} className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-primary" />
|
||||
{f}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button className="w-full" variant={plan.popular ? "default" : "outline"}>
|
||||
Get Started
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### FAQ Accordion
|
||||
|
||||
```tsx
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion"
|
||||
|
||||
const faqs = [
|
||||
{ q: "How does it work?", a: "Our platform uses AI to..." },
|
||||
{ q: "Is there a free trial?", a: "Yes, you get 14 days free..." },
|
||||
{ q: "Can I cancel anytime?", a: "Absolutely, no questions asked..." },
|
||||
]
|
||||
|
||||
function FAQ() {
|
||||
return (
|
||||
<section className="py-24 max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<Accordion type="single" collapsible>
|
||||
{faqs.map((faq, i) => (
|
||||
<AccordionItem key={i} value={`item-${i}`}>
|
||||
<AccordionTrigger>{faq.q}</AccordionTrigger>
|
||||
<AccordionContent>{faq.a}</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Mobile Navigation with Sheet
|
||||
|
||||
```tsx
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { Menu } from "lucide-react"
|
||||
|
||||
function MobileNav() {
|
||||
return (
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="md:hidden">
|
||||
<Menu className="h-6 w-6" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right">
|
||||
<nav className="flex flex-col gap-4 mt-8">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<Button className="mt-4">Get Started</Button>
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Video Modal with Dialog
|
||||
|
||||
```tsx
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Play } from "lucide-react"
|
||||
|
||||
function VideoModal() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="lg">
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Watch Demo
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-4xl p-0">
|
||||
<div className="aspect-video">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/..."
|
||||
className="w-full h-full"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Styling Tips
|
||||
|
||||
### Customizing Colors
|
||||
|
||||
shadcn uses CSS variables. Override in your globals.css:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary: 220 90% 56%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--accent: 25 95% 53%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--primary: 220 90% 66%;
|
||||
}
|
||||
```
|
||||
|
||||
### Extending Variants
|
||||
|
||||
```tsx
|
||||
// components/ui/button.tsx
|
||||
const buttonVariants = cva(
|
||||
"...",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "...",
|
||||
// Add custom variant
|
||||
gradient: "bg-gradient-to-r from-primary to-accent text-white hover:opacity-90",
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### Using with Tailwind
|
||||
|
||||
All components accept `className` for additional styling:
|
||||
|
||||
```tsx
|
||||
<Button className="rounded-full px-8">
|
||||
Pill Button
|
||||
</Button>
|
||||
|
||||
<Card className="bg-gradient-to-br from-primary/10 to-accent/10">
|
||||
Gradient Card
|
||||
</Card>
|
||||
```
|
||||
Reference in New Issue
Block a user