-
Lorem ipsum dolor sit amet, consectetur adipiscing
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
diff --git a/src/pages/examples/accordion/demo.tsx b/src/pages/examples/accordion/demo.tsx
new file mode 100644
index 0000000..58f1b06
--- /dev/null
+++ b/src/pages/examples/accordion/demo.tsx
@@ -0,0 +1,27 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion'
+
+export function AccordionDemo() {
+ return (
+
+
+ Is it accessible?
+
+ Yes. It adheres to the WAI-ARIA design pattern.
+
+
+
+ Is it styled?
+
+ Yes. It comes with default styles that matches the other components'
+ aesthetic.
+
+
+
+ Is it animated?
+
+ Yes. It's animated by default, but you can disable it if you prefer.
+
+
+
+ )
+}
diff --git a/src/pages/examples/alert-dialog/demo.tsx b/src/pages/examples/alert-dialog/demo.tsx
new file mode 100644
index 0000000..89efb63
--- /dev/null
+++ b/src/pages/examples/alert-dialog/demo.tsx
@@ -0,0 +1,35 @@
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger
+} from '@components/ui/alert-dialog'
+import { Button } from '@components/ui/button'
+
+export function AlertDialogDemo() {
+ return (
+
+
+ Show Dialog
+
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete your
+ account and remove your data from our servers.
+
+
+
+ Cancel
+ Continue
+
+
+
+ )
+}
diff --git a/src/pages/examples/alert/demo.tsx b/src/pages/examples/alert/demo.tsx
new file mode 100644
index 0000000..a988e5b
--- /dev/null
+++ b/src/pages/examples/alert/demo.tsx
@@ -0,0 +1,15 @@
+import { Terminal } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@components/ui/alert'
+
+export function AlertDemo() {
+ return (
+
+ Heads up!
+
+ You can add components to your app using the cli.
+
+
+ )
+}
diff --git a/src/pages/examples/alert/destructive.tsx b/src/pages/examples/alert/destructive.tsx
new file mode 100644
index 0000000..3c88dee
--- /dev/null
+++ b/src/pages/examples/alert/destructive.tsx
@@ -0,0 +1,15 @@
+import { AlertCircle } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@components/ui/alert'
+
+export function AlertDestructive() {
+ return (
+
+ Error
+
+ Your session has expired. Please log in again.
+
+
+ )
+}
diff --git a/src/pages/examples/aspect-ratio/demo.tsx b/src/pages/examples/aspect-ratio/demo.tsx
new file mode 100644
index 0000000..daa6256
--- /dev/null
+++ b/src/pages/examples/aspect-ratio/demo.tsx
@@ -0,0 +1,15 @@
+import { AspectRatio } from '@components/ui/aspect-ratio'
+import React from 'react'
+
+export function AspectRatioDemo() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/avatar/demo.tsx b/src/pages/examples/avatar/demo.tsx
new file mode 100644
index 0000000..98a526a
--- /dev/null
+++ b/src/pages/examples/avatar/demo.tsx
@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@components/ui/avatar'
+
+export function AvatarDemo() {
+ return (
+
+ CN
+
+ )
+}
diff --git a/src/pages/examples/badge/demo.tsx b/src/pages/examples/badge/demo.tsx
new file mode 100644
index 0000000..5dc8d55
--- /dev/null
+++ b/src/pages/examples/badge/demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from '@components/ui/badge'
+
+export function BadgeDemo() {
+ return Badge
+}
diff --git a/src/pages/examples/badge/destructive.tsx b/src/pages/examples/badge/destructive.tsx
new file mode 100644
index 0000000..4a7a10f
--- /dev/null
+++ b/src/pages/examples/badge/destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from '@components/ui/badge'
+
+export function BadgeDestructive() {
+ return Destructive
+}
diff --git a/src/pages/examples/badge/outline.tsx b/src/pages/examples/badge/outline.tsx
new file mode 100644
index 0000000..97a93fc
--- /dev/null
+++ b/src/pages/examples/badge/outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from '@components/ui/badge'
+
+export function BadgeOutline() {
+ return Outline
+}
diff --git a/src/pages/examples/badge/secondary.tsx b/src/pages/examples/badge/secondary.tsx
new file mode 100644
index 0000000..e42feb1
--- /dev/null
+++ b/src/pages/examples/badge/secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from '@components/ui/badge'
+
+export function BadgeSecondary() {
+ return Secondary
+}
diff --git a/src/pages/examples/button/demo.tsx b/src/pages/examples/button/demo.tsx
new file mode 100644
index 0000000..7414764
--- /dev/null
+++ b/src/pages/examples/button/demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from '@components/ui/button'
+
+export function ButtonDemo() {
+ return Button
+}
diff --git a/src/pages/examples/button/destructive.tsx b/src/pages/examples/button/destructive.tsx
new file mode 100644
index 0000000..0a2e437
--- /dev/null
+++ b/src/pages/examples/button/destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from '@components/ui/button'
+
+export function ButtonDestructive() {
+ return Destructive
+}
diff --git a/src/pages/examples/button/ghost.tsx b/src/pages/examples/button/ghost.tsx
new file mode 100644
index 0000000..238aaf1
--- /dev/null
+++ b/src/pages/examples/button/ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from '@components/ui/button'
+
+export function ButtonGhost() {
+ return Ghost
+}
diff --git a/src/pages/examples/button/link.tsx b/src/pages/examples/button/link.tsx
new file mode 100644
index 0000000..1fb033e
--- /dev/null
+++ b/src/pages/examples/button/link.tsx
@@ -0,0 +1,5 @@
+import { Button } from '@components/ui/button'
+
+export function ButtonLink() {
+ return Link
+}
diff --git a/src/pages/examples/button/loading.tsx b/src/pages/examples/button/loading.tsx
new file mode 100644
index 0000000..d987a3d
--- /dev/null
+++ b/src/pages/examples/button/loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from 'lucide-react'
+
+import { Button } from '@components/ui/button'
+
+export function ButtonLoading() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/button/outline.tsx b/src/pages/examples/button/outline.tsx
new file mode 100644
index 0000000..0124036
--- /dev/null
+++ b/src/pages/examples/button/outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from '@components/ui/button'
+
+export function ButtonOutline() {
+ return Outline
+}
diff --git a/src/pages/examples/button/secondary.tsx b/src/pages/examples/button/secondary.tsx
new file mode 100644
index 0000000..dd9d210
--- /dev/null
+++ b/src/pages/examples/button/secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from '@components/ui/button'
+
+export function ButtonSecondary() {
+ return Secondary
+}
diff --git a/src/pages/examples/button/with-icon.tsx b/src/pages/examples/button/with-icon.tsx
new file mode 100644
index 0000000..3634dfa
--- /dev/null
+++ b/src/pages/examples/button/with-icon.tsx
@@ -0,0 +1,11 @@
+import { Mail } from 'lucide-react'
+
+import { Button } from '@components/ui/button'
+
+export function ButtonWithIcon() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/calendar/date-picker.tsx b/src/pages/examples/calendar/date-picker.tsx
new file mode 100644
index 0000000..d0928a5
--- /dev/null
+++ b/src/pages/examples/calendar/date-picker.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import * as React from 'react'
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+
+import { cn } from '~/utils/utils.ts'
+import { Button } from '@components/ui/button'
+import { Calendar } from '@components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
+
+export function CalendarDatePicker() {
+ const [date, setDate] = React.useState()
+
+ return (
+
+
+
+ Pick a date }
+
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/calendar/date-range-picker.tsx b/src/pages/examples/calendar/date-range-picker.tsx
new file mode 100644
index 0000000..e03c6a8
--- /dev/null
+++ b/src/pages/examples/calendar/date-range-picker.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+import { DateRange } from 'react-day-picker'
+
+import { cn } from '~/utils/utils.ts'
+import { Button } from '@components/ui/button'
+import { Calendar } from '@components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
+
+export function CalendarDateRangePicker({
+ className,
+}: React.HTMLAttributes) {
+ const [date, setDate] = React.useState({
+ from: new Date(2022, 0, 20),
+ to: addDays(new Date(2022, 0, 20), 20),
+ })
+
+ return (
+
+
+
+
+ Pick a date
+ )}
+
+
+
+
+
+
(new Date())
+
+ return (
+ ()
+
+ return (
+
+
+
+ Pick a date }
+
+
+
+
+ setDate(addDays(new Date(), parseInt(value)))
+ }
+ >
+
+
+
+ Today
+ Tomorrow
+ In 3 days
+ In a week
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/card/demo.tsx b/src/pages/examples/card/demo.tsx
new file mode 100644
index 0000000..6b40d13
--- /dev/null
+++ b/src/pages/examples/card/demo.tsx
@@ -0,0 +1,71 @@
+import { BellRing, Check } from 'lucide-react'
+
+import { cn } from '~/utils/utils.ts'
+import { Button } from '@components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@components/ui/card'
+import { Switch } from '@components/ui/switch'
+
+const notifications = [
+ {
+ title: "Your call has been confirmed.",
+ description: "1 hour ago",
+ },
+ {
+ title: "You have a new message!",
+ description: "1 hour ago",
+ },
+ {
+ title: "Your subscription is expiring soon!",
+ description: "2 hours ago",
+ },
+]
+
+type CardProps = React.ComponentProps
+
+export function CardDemo({ className, ...props }: CardProps) {
+ return (
+
+
+ Notifications
+ You have 3 unread messages.
+
+
+
+
+
+
+ Push Notifications
+
+
+ Send notifications to device.
+
+
+
+
+ {notifications.map((notification, index) => (
+
+
+
+
+ {notification.title}
+
+
+ {notification.description}
+
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/card/with-form.tsx b/src/pages/examples/card/with-form.tsx
new file mode 100644
index 0000000..e45c279
--- /dev/null
+++ b/src/pages/examples/card/with-form.tsx
@@ -0,0 +1,44 @@
+import { Button } from '@components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@components/ui/card'
+import { Input } from '@components/ui/input'
+import { Label } from '@components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select'
+
+export function CardWithForm() {
+ return (
+
+
+ Create project
+ Deploy your new project in one-click.
+
+
+
+
+
+ Cancel
+ Deploy
+
+
+ )
+}
diff --git a/src/pages/examples/checkbox/demo.tsx b/src/pages/examples/checkbox/demo.tsx
new file mode 100644
index 0000000..adb3d1d
--- /dev/null
+++ b/src/pages/examples/checkbox/demo.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { Checkbox } from '@components/ui/checkbox'
+
+export function CheckboxDemo() {
+ return (
+
+
+ Accept terms and conditions
+
+
+ )
+}
diff --git a/src/pages/examples/checkbox/disabled.tsx b/src/pages/examples/checkbox/disabled.tsx
new file mode 100644
index 0000000..43e44d0
--- /dev/null
+++ b/src/pages/examples/checkbox/disabled.tsx
@@ -0,0 +1,15 @@
+import { Checkbox } from '@components/ui/checkbox'
+
+export function CheckboxDisabled() {
+ return (
+
+
+ Accept terms and conditions
+
+
+ )
+}
diff --git a/src/pages/examples/checkbox/with-text.tsx b/src/pages/examples/checkbox/with-text.tsx
new file mode 100644
index 0000000..cce72b7
--- /dev/null
+++ b/src/pages/examples/checkbox/with-text.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Checkbox } from '@components/ui/checkbox'
+
+export function CheckboxWithText() {
+ return (
+
+
+
+
+ Accept terms and conditions
+
+
+ You agree to our Terms of Service and Privacy Policy.
+
+
+
+
+
+ @peduarte starred 3 repositories
+
+
+
+ Toggle
+
+
+
+
+ @radix-ui/primitives
+
+
+
+ @radix-ui/colors
+
+
+ @stitches/react
+
+
+
+ )
+}
diff --git a/src/pages/examples/command/combobox.tsx b/src/pages/examples/command/combobox.tsx
new file mode 100644
index 0000000..8b9fbc2
--- /dev/null
+++ b/src/pages/examples/command/combobox.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import * as React from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+import { cn } from '~/utils/utils.ts'
+import { Button } from '@components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '@components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
+
+const frameworks = [
+ {
+ value: "next.js",
+ label: "Next.js",
+ },
+ {
+ value: "sveltekit",
+ label: "SvelteKit",
+ },
+ {
+ value: "nuxt.js",
+ label: "Nuxt.js",
+ },
+ {
+ value: "remix",
+ label: "Remix",
+ },
+ {
+ value: "astro",
+ label: "Astro",
+ },
+]
+
+export function CommandCombobox() {
+ const [open, setOpen] = React.useState(false)
+ const [value, setValue] = React.useState("")
+
+ return (
+
+
+
+ {value
+ ? frameworks.find((framework) => framework.value === value)?.label
+ : "Select framework..."}
+
+
+
+
+ No framework found.
+
+ {frameworks.map((framework) => (
+ {
+ setValue(currentValue === value ? "" : currentValue)
+ setOpen(false)
+ }}
+ >
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/command/demo.tsx b/src/pages/examples/command/demo.tsx
new file mode 100644
index 0000000..27e2386
--- /dev/null
+++ b/src/pages/examples/command/demo.tsx
@@ -0,0 +1,55 @@
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut
+} from '@components/ui/command'
+
+export function CommandDemo() {
+ return (
+
+
+ No results found.
+
+
+ Calendar
+
+
+ Search Emoji
+
+
+ Calculator
+
+
+
+
+ Profile
+ ⌘P
+
+
+ Billing
+ ⌘B
+
+
+ Settings
+ ⌘S
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/command/dialog.tsx b/src/pages/examples/command/dialog.tsx
new file mode 100644
index 0000000..81a1462
--- /dev/null
+++ b/src/pages/examples/command/dialog.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import * as React from 'react'
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+
+import {
+ CommandDialog,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut
+} from '@components/ui/command'
+
+export function CommandDialogDemo() {
+ const [open, setOpen] = React.useState(false)
+
+ React.useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === "j" && e.metaKey) {
+ setOpen((open) => !open)
+ }
+ }
+
+ document.addEventListener("keydown", down)
+ return () => document.removeEventListener("keydown", down)
+ }, [])
+
+ return (
+ <>
+
+ Press{" "}
+
+ ⌘ J
+
+
+
+
+ No results found.
+
+
+ Calendar
+
+
+ Search Emoji
+
+
+ Calculator
+
+
+
+
+ Profile
+ ⌘P
+
+
+ Billing
+ ⌘B
+
+
+ Settings
+ ⌘S
+
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/command/dropdown-menu.tsx b/src/pages/examples/command/dropdown-menu.tsx
new file mode 100644
index 0000000..ef32a2c
--- /dev/null
+++ b/src/pages/examples/command/dropdown-menu.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'
+
+import { Button } from '@components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@components/ui/command'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger
+} from '@components/ui/dropdown-menu'
+
+const labels = [
+ "feature",
+ "bug",
+ "enhancement",
+ "documentation",
+ "design",
+ "question",
+ "maintenance",
+]
+
+export function CommandDropdownMenu() {
+ const [label, setLabel] = React.useState("feature")
+ const [open, setOpen] = React.useState(false)
+
+ return (
+
+
+
+ {label}
+
+ Create a new project
+
+
+
+
+
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+ No label found.
+
+ {labels.map((label) => (
+ {
+ setLabel(value)
+ setOpen(false)
+ }}
+ >
+ {label}
+
+ ))}
+
+
+
+
+
+
+ ⌘⌫
+
+
+
+
+
(
+ null
+ )
+
+ return (
+
+
Status
+
+
+
+ {selectedStatus ? (
+ <>
+
+
+
+
+
+ No results found.
+
+ {statuses.map((status) => (
+ {
+ setSelectedStatus(
+ statuses.find((priority) => priority.value === value) ||
+ null
+ )
+ setOpen(false)
+ }}
+ >
+ {status.label}
+
+ ))}
+
+
+
+
+
+
+
+ Right click here
+
+
+
+ Back
+ ⌘[
+
+
+ Forward
+ ⌘]
+
+
+ Reload
+ ⌘R
+
+
+ More Tools
+
+
+ Save Page As...
+ ⇧⌘S
+
+ Create Shortcut...
+ Name Window...
+ Developer Tools
+
+
+
+ Show Bookmarks Bar
+ ⌘⇧B
+
+ Show Full URLs
+
+ People
+
+ Pedro Duarte
+
+ Colm Tuite
+
+
+
+ )
+}
diff --git a/src/pages/examples/dialog/demo.tsx b/src/pages/examples/dialog/demo.tsx
new file mode 100644
index 0000000..b7a8e2b
--- /dev/null
+++ b/src/pages/examples/dialog/demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@components/ui/button'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger
+} from '@components/ui/dialog'
+import { Input } from '@components/ui/input'
+import { Label } from '@components/ui/label'
+
+export function DialogDemo() {
+ return (
+
+
+ Edit Profile
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+
+ Save changes
+
+
+
+ )
+}
diff --git a/src/pages/examples/dropdown-menu/checkboxes.tsx b/src/pages/examples/dropdown-menu/checkboxes.tsx
new file mode 100644
index 0000000..f4b7174
--- /dev/null
+++ b/src/pages/examples/dropdown-menu/checkboxes.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
+
+import { Button } from '@components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger
+} from '@components/ui/dropdown-menu'
+
+type Checked = DropdownMenuCheckboxItemProps["checked"]
+
+export function DropdownMenuCheckboxes() {
+ const [showStatusBar, setShowStatusBar] = React.useState(true)
+ const [showActivityBar, setShowActivityBar] = React.useState(false)
+ const [showPanel, setShowPanel] = React.useState(false)
+
+ return (
+
+
+ Open
+
+
+ Appearance
+
+ Status Bar
+
+
+ Activity Bar
+
+
+ Panel
+
+
+
+ )
+}
diff --git a/src/pages/examples/dropdown-menu/demo.tsx b/src/pages/examples/dropdown-menu/demo.tsx
new file mode 100644
index 0000000..d86872b
--- /dev/null
+++ b/src/pages/examples/dropdown-menu/demo.tsx
@@ -0,0 +1,122 @@
+import {
+ Cloud,
+ CreditCard,
+ Github,
+ Keyboard,
+ LifeBuoy,
+ LogOut,
+ Mail,
+ MessageSquare,
+ Plus,
+ PlusCircle,
+ Settings,
+ User,
+ UserPlus,
+ Users
+} from 'lucide-react'
+
+import { Button } from '@components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuPortal,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger
+} from '@components/ui/dropdown-menu'
+
+export function DropdownMenuDemo() {
+ return (
+
+
+ Open
+
+
+ My Account
+
+
+ Profile
+ ⇧⌘P
+
+
+ Billing
+ ⌘B
+
+
+ Settings
+ ⌘S
+
+
+ Keyboard shortcuts
+ ⌘K
+
+
+
+
+ Team
+
+
+
+ Invite users
+
+
+
+
+ Email
+
+
+ Message
+
+
+ More...
+
+
+
+
+
+ New Team
+ ⌘+T
+
+
+
+ GitHub
+
+
+ Support
+
+
+ API
+
+
+ Log out
+ ⇧⌘Q
+
+
+
+ )
+}
diff --git a/src/pages/examples/dropdown-menu/radio-group.tsx b/src/pages/examples/dropdown-menu/radio-group.tsx
new file mode 100644
index 0000000..4075606
--- /dev/null
+++ b/src/pages/examples/dropdown-menu/radio-group.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+
+import { Button } from '@components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger
+} from '@components/ui/dropdown-menu'
+
+export function DropdownMenuRadioGroupDemo() {
+ const [position, setPosition] = React.useState("bottom")
+
+ return (
+
+
+ Open
+
+
+ Panel Position
+
+ Top
+ Bottom
+ Right
+
+
+
+ )
+}
diff --git a/src/pages/examples/hover-card/demo.tsx b/src/pages/examples/hover-card/demo.tsx
new file mode 100644
index 0000000..d63c8cf
--- /dev/null
+++ b/src/pages/examples/hover-card/demo.tsx
@@ -0,0 +1,35 @@
+import { CalendarDays } from 'lucide-react'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@components/ui/avatar'
+import { Button } from '@components/ui/button'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@components/ui/hover-card'
+
+export function HoverCardDemo() {
+ return (
+
+
+ @nextjs
+
+
+
+
+ VC
+
+
+
@nextjs
+
+ The React Framework – created and maintained by @vercel.
+
+
+
+ Joined December 2021
+
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/index.tsx b/src/pages/examples/index.tsx
new file mode 100644
index 0000000..fdebdc7
--- /dev/null
+++ b/src/pages/examples/index.tsx
@@ -0,0 +1,187 @@
+import { AccordionDemo } from './accordion/demo'
+import { AlertDialogDemo } from './alert-dialog/demo'
+import { AlertDemo } from './alert/demo'
+import { AlertDestructive } from './alert/destructive'
+import { AspectRatioDemo } from './aspect-ratio/demo'
+import { AvatarDemo } from './avatar/demo'
+import { BadgeDemo } from './badge/demo'
+import { BadgeDestructive } from './badge/destructive'
+import { BadgeOutline } from './badge/outline'
+import { BadgeSecondary } from './badge/secondary'
+import { ButtonDemo } from './button/demo'
+import { ButtonDestructive } from './button/destructive'
+import { ButtonGhost } from './button/ghost'
+import { ButtonLink } from './button/link'
+import { ButtonLoading } from './button/loading'
+import { ButtonOutline } from './button/outline'
+import { ButtonSecondary } from './button/secondary'
+import { ButtonWithIcon } from './button/with-icon'
+import { CalendarDatePicker } from './calendar/date-picker'
+import { CalendarDateRangePicker } from './calendar/date-range-picker'
+import { CalendarDemo } from './calendar/demo'
+import { CalendarDatePickerWithPresets } from './calendar/with-presets'
+import { CardDemo } from './card/demo'
+import { CardWithForm } from './card/with-form'
+import { CheckboxDemo } from './checkbox/demo'
+import { CheckboxDisabled } from './checkbox/disabled'
+import { CheckboxWithText } from './checkbox/with-text'
+import { CollapsibleDemo } from './collapsible/demo'
+import { CommandCombobox } from './command/combobox'
+import { CommandDemo } from './command/demo'
+import { CommandDialogDemo } from './command/dialog'
+import { CommandDropdownMenu } from './command/dropdown-menu'
+import { CommandPopover } from './command/popover'
+import { ContextMenuDemo } from './context-menu/demo'
+import { DialogDemo } from './dialog/demo'
+import { DropdownMenuCheckboxes } from './dropdown-menu/checkboxes'
+import { DropdownMenuDemo } from './dropdown-menu/demo'
+import { DropdownMenuRadioGroupDemo } from './dropdown-menu/radio-group'
+import { HoverCardDemo } from './hover-card/demo'
+import { InputDemo } from './input/demo'
+import { InputDisabled } from './input/disabled'
+import { InputFile } from './input/file'
+import { InputWithButton } from './input/with-button'
+import { InputWithLabel } from './input/with-label'
+import { InputWithText } from './input/with-text'
+import { LabelDemo } from './label/demo'
+import { MenubarDemo } from './menubar/demo'
+import { NavigationMenuDemo } from './navigation-menu/demo'
+import { PopoverDemo } from './popover/demo'
+import { ProgressDemo } from './progress/demo'
+import { RadioGroupDemo } from './radio-group/demo'
+import { ScrollAreaDemo } from './scroll-area/demo'
+import { SelectDemo } from './select/demo'
+import { SeparatorDemo } from './separator/demo'
+import { SheetDemo } from './sheet/demo'
+import { SheetPosition } from './sheet/position'
+import { SheetSize } from './sheet/size'
+import { SkeletonDemo } from './skeleton/demo'
+import { SliderDemo } from './slider/demo'
+import { SwitchDemo } from './switch/demo'
+import { TabsDemo } from './tabs/demo'
+import { TextareaDemo } from './textarea/demo'
+import { TextareaDisabled } from './textarea/disabled'
+import { TextareaWithButton } from './textarea/with-button'
+import { TextareaWithLabel } from './textarea/with-label'
+import { TextareaWithText } from './textarea/with-text'
+import { ToastDemo } from './toast/demo'
+import { ToastDestructive } from './toast/destructive'
+import { ToastSimple } from './toast/simple'
+import { ToastWithAction } from './toast/with-action'
+import { ToastWithTitle } from './toast/with-title'
+import { ToggleDemo } from './toggle/demo'
+import { ToggleDisabled } from './toggle/disabled'
+import { ToggleLg } from './toggle/lg'
+import { ToggleOutline } from './toggle/outline'
+import { ToggleSm } from './toggle/sm'
+import { ToggleWithText } from './toggle/with-text'
+import { TooltipDemo } from './tooltip/demo'
+import { TypographyBlockquote } from './typography/blockquote'
+import { TypographyDemo } from './typography/demo'
+import { TypographyH1 } from './typography/h1'
+import { TypographyH2 } from './typography/h2'
+import { TypographyH3 } from './typography/h3'
+import { TypographyH4 } from './typography/h4'
+import { TypographyInlineCode } from './typography/inline-code'
+import { TypographyLarge } from './typography/large'
+import { TypographyLead } from './typography/lead'
+import { TypographyList } from './typography/list'
+import { TypographyMuted } from './typography/muted'
+import { TypographyP } from './typography/p'
+import { TypographySmall } from './typography/small'
+import { TypographyTable } from './typography/table'
+
+export const examples = {
+ AccordionDemo,
+ AlertDemo,
+ AlertDialogDemo,
+ AlertDestructive,
+ AspectRatioDemo,
+ AvatarDemo,
+ BadgeDemo,
+ BadgeDestructive,
+ BadgeOutline,
+ BadgeSecondary,
+ ButtonDemo,
+ ButtonGhost,
+ ButtonDestructive,
+ ButtonLink,
+ ButtonLoading,
+ ButtonOutline,
+ ButtonSecondary,
+ ButtonWithIcon,
+ CalendarDemo,
+ CalendarDatePicker,
+ CalendarDateRangePicker,
+ CalendarDatePickerWithPresets,
+ CardDemo,
+ CardWithForm,
+ CheckboxDemo,
+ CheckboxDisabled,
+ CheckboxWithText,
+ CollapsibleDemo,
+ CommandDemo,
+ CommandDialogDemo,
+ CommandCombobox,
+ CommandPopover,
+ CommandDropdownMenu,
+ ContextMenuDemo,
+ DialogDemo,
+ DropdownMenuCheckboxes,
+ DropdownMenuDemo,
+ DropdownMenuRadioGroupDemo,
+ HoverCardDemo,
+ InputDemo,
+ InputDisabled,
+ InputFile,
+ InputWithButton,
+ InputWithLabel,
+ InputWithText,
+ LabelDemo,
+ MenubarDemo,
+ NavigationMenuDemo,
+ PopoverDemo,
+ ProgressDemo,
+ RadioGroupDemo,
+ ScrollAreaDemo,
+ SelectDemo,
+ SeparatorDemo,
+ SheetDemo,
+ SheetSize,
+ SheetPosition,
+ SkeletonDemo,
+ SliderDemo,
+ SwitchDemo,
+ TabsDemo,
+ TextareaDemo,
+ TextareaDisabled,
+ TextareaWithButton,
+ TextareaWithLabel,
+ TextareaWithText,
+ ToastDemo,
+ ToastDestructive,
+ ToastSimple,
+ ToastWithTitle,
+ ToastWithAction,
+ TooltipDemo,
+ TypographyBlockquote,
+ TypographyDemo,
+ TypographyH1,
+ TypographyH2,
+ TypographyH3,
+ TypographyH4,
+ TypographyInlineCode,
+ TypographyLarge,
+ TypographyLead,
+ TypographyList,
+ TypographyP,
+ TypographySmall,
+ TypographyMuted,
+ TypographyTable,
+ ToggleDemo,
+ ToggleSm,
+ ToggleLg,
+ ToggleOutline,
+ ToggleDisabled,
+ ToggleWithText,
+}
diff --git a/src/pages/examples/input/demo.tsx b/src/pages/examples/input/demo.tsx
new file mode 100644
index 0000000..5baa37a
--- /dev/null
+++ b/src/pages/examples/input/demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from '@components/ui/input'
+
+export function InputDemo() {
+ return
+ Picture
+
+ )
+}
diff --git a/src/pages/examples/input/with-button.tsx b/src/pages/examples/input/with-button.tsx
new file mode 100644
index 0000000..aa1d397
--- /dev/null
+++ b/src/pages/examples/input/with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+
+export function InputWithButton() {
+ return (
+
+ Subscribe
+
+ )
+}
diff --git a/src/pages/examples/input/with-label.tsx b/src/pages/examples/input/with-label.tsx
new file mode 100644
index 0000000..6d1cccd
--- /dev/null
+++ b/src/pages/examples/input/with-label.tsx
@@ -0,0 +1,11 @@
+import { Input } from '@components/ui/input'
+import { Label } from '@components/ui/label'
+
+export function InputWithLabel() {
+ return (
+
+ Email
+
+ )
+}
diff --git a/src/pages/examples/input/with-text.tsx b/src/pages/examples/input/with-text.tsx
new file mode 100644
index 0000000..499f370
--- /dev/null
+++ b/src/pages/examples/input/with-text.tsx
@@ -0,0 +1,12 @@
+import { Input } from '@components/ui/input'
+import { Label } from '@components/ui/label'
+
+export function InputWithText() {
+ return (
+
+
Email
+
+
Enter your email address.
+
+
+ Accept terms and conditions
+
+
+
+ File
+
+
+ New Tab ⌘T
+
+
+ New Window ⌘N
+
+ New Incognito Window
+
+ Share
+
+ Email link
+ Messages
+ Notes
+
+
+
+ Print... ⌘P
+
+
+
+
+ Edit
+
+
+ Undo ⌘Z
+
+
+ Redo ⇧⌘Z
+
+
+ Find
+
+ Search the web
+ Find...
+ Find Next
+ Find Previous
+
+
+ Cut
+ Copy
+ Paste
+
+
+
+ View
+
+ Always Show Bookmarks Bar
+
+ Always Show Full URLs
+
+
+ Reload ⌘R
+
+
+ Force Reload ⇧⌘R
+
+ Toggle Fullscreen
+ Hide Sidebar
+
+
+
+ Profiles
+
+
+ Andy
+ Benoit
+ Luis
+
+ Edit...
+ Add Profile...
+
+
+
+ )
+}
diff --git a/src/pages/examples/navigation-menu/demo.tsx b/src/pages/examples/navigation-menu/demo.tsx
new file mode 100644
index 0000000..8fa47fc
--- /dev/null
+++ b/src/pages/examples/navigation-menu/demo.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from '~/utils/utils.ts'
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ navigationMenuTriggerStyle
+} from '@components/ui/navigation-menu'
+import { Link } from 'react-router-dom'
+
+const components: { title: string; href: string; description: string }[] = [
+ {
+ title: "Alert Dialog",
+ href: "/docs/primitives/alert-dialog",
+ description:
+ "A modal dialog that interrupts the user with important content and expects a response.",
+ },
+ {
+ title: "Hover Card",
+ href: "/docs/primitives/hover-card",
+ description:
+ "For sighted users to preview content available behind a link.",
+ },
+ {
+ title: "Progress",
+ href: "/docs/primitives/progress",
+ description:
+ "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+ },
+ {
+ title: "Scroll-area",
+ href: "/docs/primitives/scroll-area",
+ description: "Visually or semantically separates content.",
+ },
+ {
+ title: "Tabs",
+ href: "/docs/primitives/tabs",
+ description:
+ "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+ },
+ {
+ title: "Tooltip",
+ href: "/docs/primitives/tooltip",
+ description:
+ "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+ },
+]
+
+export function NavigationMenuDemo() {
+ return (
+
+
+
+ Getting started
+
+
+
+
+
+ Components
+
+
+ {components.map((component) => (
+
+ {component.description}
+
+ ))}
+
+
+
+
+
+ Documentation
+
+
+
+
+
+ )
+}
+
+const ListItem = React.forwardRef<
+ React.ElementRef<"a">,
+ React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+ return (
+
+
+
+ {title}
+
+ {children}
+
+
+
+
+ )
+})
+ListItem.displayName = "ListItem"
diff --git a/src/pages/examples/popover/demo.tsx b/src/pages/examples/popover/demo.tsx
new file mode 100644
index 0000000..76457b4
--- /dev/null
+++ b/src/pages/examples/popover/demo.tsx
@@ -0,0 +1,63 @@
+import { Settings2 } from 'lucide-react'
+
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import { Label } from '@components/ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
+
+export function PopoverDemo() {
+ return (
+
+
+
+ Open popover
+
+
+
+
+
+
Dimensions
+
+ Set the dimensions for the layer.
+
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/progress/demo.tsx b/src/pages/examples/progress/demo.tsx
new file mode 100644
index 0000000..e7a5ec5
--- /dev/null
+++ b/src/pages/examples/progress/demo.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import * as React from 'react'
+
+import { Progress } from '@components/ui/progress'
+
+export function ProgressDemo() {
+ const [progress, setProgress] = React.useState(13)
+
+ React.useEffect(() => {
+ const timer = setTimeout(() => setProgress(66), 500)
+ return () => clearTimeout(timer)
+ }, [])
+
+ return
+
+ Default
+
+
+ Comfortable
+
+
+ Compact
+
+
+ )
+}
diff --git a/src/pages/examples/scroll-area/demo.tsx b/src/pages/examples/scroll-area/demo.tsx
new file mode 100644
index 0000000..0a64ba0
--- /dev/null
+++ b/src/pages/examples/scroll-area/demo.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import { ScrollArea } from '@components/ui/scroll-area'
+import { Separator } from '@components/ui/separator'
+
+const tags = Array.from({ length: 50 }).map(
+ (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export function ScrollAreaDemo() {
+ return (
+
+
+
Tags
+ {tags.map((tag) => (
+
+
+ {tag}
+
+
+ ))}
+
+ )
+}
diff --git a/src/pages/examples/select/demo.tsx b/src/pages/examples/select/demo.tsx
new file mode 100644
index 0000000..7ee343d
--- /dev/null
+++ b/src/pages/examples/select/demo.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue
+} from '@components/ui/select'
+
+export function SelectDemo() {
+ return (
+
+
+
+
+
+ Fruits
+ Apple
+ Banana
+ Blueberry
+ Grapes
+ Pineapple
+
+
+
+ )
+}
diff --git a/src/pages/examples/separator/demo.tsx b/src/pages/examples/separator/demo.tsx
new file mode 100644
index 0000000..419e30b
--- /dev/null
+++ b/src/pages/examples/separator/demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from '@components/ui/separator'
+
+export function SeparatorDemo() {
+ return (
+
+
+
Radix Primitives
+
+ An open-source UI component library.
+
+
+
+
+
Blog
+
+
Docs
+
+
Source
+
+
+
+ Open
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+
+ Save changes
+
+
+
+ )
+}
diff --git a/src/pages/examples/sheet/position.tsx b/src/pages/examples/sheet/position.tsx
new file mode 100644
index 0000000..f6fc4da
--- /dev/null
+++ b/src/pages/examples/sheet/position.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import { Label } from '@components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@components/ui/radio-group'
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger
+} from '@components/ui/sheet'
+
+const SHEET_POSITIONS = ["top", "right", "bottom", "left"] as const
+
+type SheetPosition = (typeof SHEET_POSITIONS)[number]
+
+export function SheetPosition() {
+ const [position, setPosition] = useState("right")
+ return (
+
+
setPosition(value as SheetPosition)}
+ >
+
+ {SHEET_POSITIONS.map((position, index) => (
+
+ {position}
+
+ ))}
+
+
+
+ Open {position} sheet
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+
+ Save changes
+
+
+
+
("default")
+ return (
+
+
setSize(value as SheetSize)}
+ >
+
+ {SHEET_SIZES.map((size, index) => (
+
+ {size}
+
+ ))}
+
+
+
+ Open {size} sheet
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+
+ Save changes
+
+
+
+
+
+export function SliderDemo({ className, ...props }: SliderProps) {
+ return (
+
+ Airplane Mode
+
+ )
+}
diff --git a/src/pages/examples/tabs/demo.tsx b/src/pages/examples/tabs/demo.tsx
new file mode 100644
index 0000000..65ab622
--- /dev/null
+++ b/src/pages/examples/tabs/demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from '@components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@components/ui/card'
+import { Input } from '@components/ui/input'
+import { Label } from '@components/ui/label'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@components/ui/tabs'
+
+export function TabsDemo() {
+ return (
+
+
+ Account
+ Password
+
+
+
+
+ Account
+
+ Make changes to your account here. Click save when you're done.
+
+
+
+
+ Name
+
+
+ Username
+
+
+
+ Save changes
+
+
+
+
+
+
+ Password
+
+ Change your password here. After saving, you'll be logged out.
+
+
+
+
+ Current password
+
+
+ New password
+
+
+
+ Save password
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/textarea/demo.tsx b/src/pages/examples/textarea/demo.tsx
new file mode 100644
index 0000000..a2999d5
--- /dev/null
+++ b/src/pages/examples/textarea/demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from '@components/ui/textarea'
+
+export function TextareaDemo() {
+ return
+}
diff --git a/src/pages/examples/textarea/disabled.tsx b/src/pages/examples/textarea/disabled.tsx
new file mode 100644
index 0000000..0da1749
--- /dev/null
+++ b/src/pages/examples/textarea/disabled.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from '@components/ui/textarea'
+
+export function TextareaDisabled() {
+ return
+}
diff --git a/src/pages/examples/textarea/with-button.tsx b/src/pages/examples/textarea/with-button.tsx
new file mode 100644
index 0000000..01a79ae
--- /dev/null
+++ b/src/pages/examples/textarea/with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from '@components/ui/button'
+import { Textarea } from '@components/ui/textarea'
+
+export function TextareaWithButton() {
+ return (
+
+
+ Send message
+
+ )
+}
diff --git a/src/pages/examples/textarea/with-label.tsx b/src/pages/examples/textarea/with-label.tsx
new file mode 100644
index 0000000..d1f3c3d
--- /dev/null
+++ b/src/pages/examples/textarea/with-label.tsx
@@ -0,0 +1,11 @@
+import { Label } from '@components/ui/label'
+import { Textarea } from '@components/ui/textarea'
+
+export function TextareaWithLabel() {
+ return (
+
+ Your message
+
+
+ )
+}
diff --git a/src/pages/examples/textarea/with-text.tsx b/src/pages/examples/textarea/with-text.tsx
new file mode 100644
index 0000000..6d7e3b3
--- /dev/null
+++ b/src/pages/examples/textarea/with-text.tsx
@@ -0,0 +1,14 @@
+import { Label } from '@components/ui/label'
+import { Textarea } from '@components/ui/textarea'
+
+export function TextareaWithText() {
+ return (
+
+
Your Message
+
+
+ Your message will be copied to the support team.
+
+
{
+ toast({
+ title: "Scheduled: Catch up ",
+ description: "Friday, February 10, 2023 at 5:57 PM",
+ action: (
+ Undo
+ ),
+ })
+ }}
+ >
+ Add to calendar
+
+ )
+}
diff --git a/src/pages/examples/toast/destructive.tsx b/src/pages/examples/toast/destructive.tsx
new file mode 100644
index 0000000..58f595a
--- /dev/null
+++ b/src/pages/examples/toast/destructive.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { Button } from '@components/ui/button'
+import { ToastAction } from '@components/ui/toast'
+import { useToast } from '@components/ui/use-toast'
+
+export function ToastDestructive() {
+ const { toast } = useToast()
+
+ return (
+ {
+ toast({
+ variant: "destructive",
+ title: "Uh oh! Something went wrong.",
+ description: "There was a problem with your request.",
+ action: Try again ,
+ })
+ }}
+ >
+ Show Toast
+
+ )
+}
diff --git a/src/pages/examples/toast/simple.tsx b/src/pages/examples/toast/simple.tsx
new file mode 100644
index 0000000..bb962da
--- /dev/null
+++ b/src/pages/examples/toast/simple.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { Button } from '@components/ui/button'
+import { useToast } from '@components/ui/use-toast'
+
+export function ToastSimple() {
+ const { toast } = useToast()
+
+ return (
+ {
+ toast({
+ description: "Your message has been sent.",
+ })
+ }}
+ >
+ Show Toast
+
+ )
+}
diff --git a/src/pages/examples/toast/with-action.tsx b/src/pages/examples/toast/with-action.tsx
new file mode 100644
index 0000000..83c8fe3
--- /dev/null
+++ b/src/pages/examples/toast/with-action.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { Button } from '@components/ui/button'
+import { ToastAction } from '@components/ui/toast'
+import { useToast } from '@components/ui/use-toast'
+
+export function ToastWithAction() {
+ const { toast } = useToast()
+
+ return (
+ {
+ toast({
+ title: "Uh oh! Something went wrong.",
+ description: "There was a problem with your request.",
+ action: Try again ,
+ })
+ }}
+ >
+ Show Toast
+
+ )
+}
diff --git a/src/pages/examples/toast/with-title.tsx b/src/pages/examples/toast/with-title.tsx
new file mode 100644
index 0000000..4c8322f
--- /dev/null
+++ b/src/pages/examples/toast/with-title.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Button } from '@components/ui/button'
+import { useToast } from '@components/ui/use-toast'
+
+export function ToastWithTitle() {
+ const { toast } = useToast()
+
+ return (
+ {
+ toast({
+ title: "Uh oh! Something went wrong.",
+ description: "There was a problem with your request.",
+ })
+ }}
+ >
+ Show Toast
+
+ )
+}
diff --git a/src/pages/examples/toggle/demo.tsx b/src/pages/examples/toggle/demo.tsx
new file mode 100644
index 0000000..3c4555f
--- /dev/null
+++ b/src/pages/examples/toggle/demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from 'lucide-react'
+
+import { Toggle } from '@components/ui/toggle'
+
+export function ToggleDemo() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/toggle/disabled.tsx b/src/pages/examples/toggle/disabled.tsx
new file mode 100644
index 0000000..af1ca31
--- /dev/null
+++ b/src/pages/examples/toggle/disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from 'lucide-react'
+
+import { Toggle } from '@components/ui/toggle'
+
+export function ToggleDisabled() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/toggle/lg.tsx b/src/pages/examples/toggle/lg.tsx
new file mode 100644
index 0000000..a77f37b
--- /dev/null
+++ b/src/pages/examples/toggle/lg.tsx
@@ -0,0 +1,11 @@
+import { Italic } from 'lucide-react'
+
+import { Toggle } from '@components/ui/toggle'
+
+export function ToggleLg() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/toggle/outline.tsx b/src/pages/examples/toggle/outline.tsx
new file mode 100644
index 0000000..84af894
--- /dev/null
+++ b/src/pages/examples/toggle/outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from 'lucide-react'
+
+import { Toggle } from '@components/ui/toggle'
+
+export function ToggleOutline() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/toggle/sm.tsx b/src/pages/examples/toggle/sm.tsx
new file mode 100644
index 0000000..3ef4a8c
--- /dev/null
+++ b/src/pages/examples/toggle/sm.tsx
@@ -0,0 +1,11 @@
+import { Italic } from 'lucide-react'
+
+import { Toggle } from '@components/ui/toggle'
+
+export function ToggleSm() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/toggle/with-text.tsx b/src/pages/examples/toggle/with-text.tsx
new file mode 100644
index 0000000..d8f27a7
--- /dev/null
+++ b/src/pages/examples/toggle/with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from 'lucide-react'
+
+import { Toggle } from '@components/ui/toggle'
+
+export function ToggleWithText() {
+ return (
+
+
+ )
+}
diff --git a/src/pages/examples/tooltip/demo.tsx b/src/pages/examples/tooltip/demo.tsx
new file mode 100644
index 0000000..d496c63
--- /dev/null
+++ b/src/pages/examples/tooltip/demo.tsx
@@ -0,0 +1,22 @@
+import { Plus } from 'lucide-react'
+
+import { Button } from '@components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@components/ui/tooltip'
+
+export function TooltipDemo() {
+ return (
+
+
+
+
+ Add
+
+
+
+ Add to library
+
+
+
+ )
+}
diff --git a/src/pages/examples/typography/blockquote.tsx b/src/pages/examples/typography/blockquote.tsx
new file mode 100644
index 0000000..30efd5d
--- /dev/null
+++ b/src/pages/examples/typography/blockquote.tsx
@@ -0,0 +1,8 @@
+export function TypographyBlockquote() {
+ return (
+
+ "After all," he said, "everyone enjoys a good joke, so it's only fair that
+ they should pay for the privilege."
+
+ )
+}
diff --git a/src/pages/examples/typography/demo.tsx b/src/pages/examples/typography/demo.tsx
new file mode 100644
index 0000000..e161378
--- /dev/null
+++ b/src/pages/examples/typography/demo.tsx
@@ -0,0 +1,119 @@
+export function TypographyDemo() {
+ return (
+
+
+ The Joke Tax Chronicles
+
+
+ Once upon a time, in a far-off land, there was a very lazy king who
+ spent all day lounging on his throne. One day, his advisors came to him
+ with a problem: the kingdom was running out of money.
+
+
+ The King's Plan
+
+
+ The king thought long and hard, and finally came up with{" "}
+
+ a brilliant plan
+
+ : he would tax the jokes in the kingdom.
+
+
+ "After all," he said, "everyone enjoys a good joke, so it's only fair
+ that they should pay for the privilege."
+
+
+ The Joke Tax
+
+
+ The king's subjects were not amused. They grumbled and complained, but
+ the king was firm:
+
+
+ 1st level of puns: 5 gold coins
+ 2nd level of jokes: 10 gold coins
+ 3rd level of one-liners : 20 gold coins
+
+
+ As a result, people stopped telling jokes, and the kingdom fell into a
+ gloom. But there was one person who refused to let the king's
+ foolishness get him down: a court jester named Jokester.
+
+
+ Jokester's Revolt
+
+
+ Jokester began sneaking into the castle in the middle of the night and
+ leaving jokes all over the place: under the king's pillow, in his soup,
+ even in the royal toilet. The king was furious, but he couldn't seem to
+ stop Jokester.
+
+
+ And then, one day, the people of the kingdom discovered that the jokes
+ left by Jokester were so funny that they couldn't help but laugh. And
+ once they started laughing, they couldn't stop.
+
+
+ The People's Rebellion
+
+
+ The people of the kingdom, feeling uplifted by the laughter, started to
+ tell jokes and puns again, and soon the entire kingdom was in on the
+ joke.
+
+
+
+
+
+
+ King's Treasury
+
+
+ People's happiness
+
+
+
+
+
+
+ Empty
+
+
+ Overflowing
+
+
+
+
+ Modest
+
+
+ Satisfied
+
+
+
+
+ Full
+
+
+ Ecstatic
+
+
+
+
+
+
+ The king, seeing how much happier his subjects were, realized the error
+ of his ways and repealed the joke tax. Jokester was declared a hero, and
+ the kingdom lived happily ever after.
+
+
+ The moral of the story is: never underestimate the power of a good laugh
+ and always be careful of bad ideas.
+
+
+ Taxing Laughter: The Joke Tax Chronicles
+
+ )
+}
diff --git a/src/pages/examples/typography/h2.tsx b/src/pages/examples/typography/h2.tsx
new file mode 100644
index 0000000..efd884c
--- /dev/null
+++ b/src/pages/examples/typography/h2.tsx
@@ -0,0 +1,7 @@
+export function TypographyH2() {
+ return (
+
+ The People of the Kingdom
+
+ )
+}
diff --git a/src/pages/examples/typography/h3.tsx b/src/pages/examples/typography/h3.tsx
new file mode 100644
index 0000000..ca55c0a
--- /dev/null
+++ b/src/pages/examples/typography/h3.tsx
@@ -0,0 +1,7 @@
+export function TypographyH3() {
+ return (
+
+ The Joke Tax
+
+ )
+}
diff --git a/src/pages/examples/typography/h4.tsx b/src/pages/examples/typography/h4.tsx
new file mode 100644
index 0000000..7003cd4
--- /dev/null
+++ b/src/pages/examples/typography/h4.tsx
@@ -0,0 +1,7 @@
+export function TypographyH4() {
+ return (
+
+ People stopped telling jokes
+
+ )
+}
diff --git a/src/pages/examples/typography/inline-code.tsx b/src/pages/examples/typography/inline-code.tsx
new file mode 100644
index 0000000..7679b87
--- /dev/null
+++ b/src/pages/examples/typography/inline-code.tsx
@@ -0,0 +1,7 @@
+export function TypographyInlineCode() {
+ return (
+
+ @radix-ui/react-alert-dialog
+
+ )
+}
diff --git a/src/pages/examples/typography/large.tsx b/src/pages/examples/typography/large.tsx
new file mode 100644
index 0000000..f7eb5cc
--- /dev/null
+++ b/src/pages/examples/typography/large.tsx
@@ -0,0 +1,5 @@
+export function TypographyLarge() {
+ return (
+ Are you sure absolutely sure?
+ )
+}
diff --git a/src/pages/examples/typography/lead.tsx b/src/pages/examples/typography/lead.tsx
new file mode 100644
index 0000000..b6609a5
--- /dev/null
+++ b/src/pages/examples/typography/lead.tsx
@@ -0,0 +1,8 @@
+export function TypographyLead() {
+ return (
+
+ A modal dialog that interrupts the user with important content and expects
+ a response.
+
+ )
+}
diff --git a/src/pages/examples/typography/list.tsx b/src/pages/examples/typography/list.tsx
new file mode 100644
index 0000000..068b343
--- /dev/null
+++ b/src/pages/examples/typography/list.tsx
@@ -0,0 +1,9 @@
+export function TypographyList() {
+ return (
+
+ 1st level of puns: 5 gold coins
+ 2nd level of jokes: 10 gold coins
+ 3rd level of one-liners : 20 gold coins
+
+ )
+}
diff --git a/src/pages/examples/typography/muted.tsx b/src/pages/examples/typography/muted.tsx
new file mode 100644
index 0000000..f737f56
--- /dev/null
+++ b/src/pages/examples/typography/muted.tsx
@@ -0,0 +1,5 @@
+export function TypographyMuted() {
+ return (
+ Enter your email address.
+ )
+}
diff --git a/src/pages/examples/typography/p.tsx b/src/pages/examples/typography/p.tsx
new file mode 100644
index 0000000..9f85b04
--- /dev/null
+++ b/src/pages/examples/typography/p.tsx
@@ -0,0 +1,8 @@
+export function TypographyP() {
+ return (
+
+ The king, seeing how much happier his subjects were, realized the error of
+ his ways and repealed the joke tax.
+
+ )
+}
diff --git a/src/pages/examples/typography/small.tsx b/src/pages/examples/typography/small.tsx
new file mode 100644
index 0000000..34fca42
--- /dev/null
+++ b/src/pages/examples/typography/small.tsx
@@ -0,0 +1,5 @@
+export function TypographySmall() {
+ return (
+ Email address
+ )
+}
diff --git a/src/pages/examples/typography/table.tsx b/src/pages/examples/typography/table.tsx
new file mode 100644
index 0000000..1f529a6
--- /dev/null
+++ b/src/pages/examples/typography/table.tsx
@@ -0,0 +1,44 @@
+export function TypographyTable() {
+ return (
+
+
+
+
+
+ King's Treasury
+
+
+ People's happiness
+
+
+
+
+
+
+ Empty
+
+
+ Overflowing
+
+
+
+
+ Modest
+
+
+ Satisfied
+
+
+
+
+ Full
+
+
+ Ecstatic
+
+
+
+
+