+ Enter your email below to login to your account +
++ +20.1% from last month +
++ +180.1% from last month +
++ +19% from last month +
++ +201 since last hour +
++ Olivia Martin +
++ olivia.martin@email.com +
++ Jackson Lee +
++ jackson.lee@email.com +
++ Isabella Nguyen +
++ isabella.nguyen@email.com +
++ William Kim +
++ will@email.com +
++ Sofia Davis +
++ sofia.davis@email.com +
++ You can start selling as soon as you add a product. +
+ +
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/card-demo.tsx b/apps/www/__registry__/default/example/card-demo.tsx
new file mode 100644
index 00000000000..136f42ab848
--- /dev/null
+++ b/apps/www/__registry__/default/example/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/registry/default/ui/card"
+import { Switch } from "@/registry/default/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+ Push Notifications +
++ Send notifications to device. +
++ {notification.title} +
++ {notification.description} +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/checkbox-form-single.tsx b/apps/www/__registry__/default/example/checkbox-form-single.tsx
new file mode 100644
index 00000000000..95f0b7f8f48
--- /dev/null
+++ b/apps/www/__registry__/default/example/checkbox-form-single.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/default/ui/button"
+import { Checkbox } from "@/registry/default/ui/checkbox"
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+} from "@/registry/default/ui/form"
+import { toast } from "@/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+ mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+ const form = useForm
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/checkbox-with-text.tsx b/apps/www/__registry__/default/example/checkbox-with-text.tsx
new file mode 100644
index 00000000000..4b9479e4aa2
--- /dev/null
+++ b/apps/www/__registry__/default/example/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Checkbox } from "@/registry/default/ui/checkbox"
+
+export default function CheckboxWithText() {
+ return (
+ + You agree to our Terms of Service and Privacy Policy. +
++ + {label} + + Create a new project +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/combobox-popover.tsx b/apps/www/__registry__/default/example/combobox-popover.tsx
new file mode 100644
index 00000000000..aacb34dc51e
--- /dev/null
+++ b/apps/www/__registry__/default/example/combobox-popover.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import {
+ ArrowUpCircle,
+ CheckCircle2,
+ Circle,
+ HelpCircle,
+ LucideIcon,
+ XCircle,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/registry/default/ui/command"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+type Status = {
+ value: string
+ label: string
+ icon: LucideIcon
+}
+
+const statuses: Status[] = [
+ {
+ value: "backlog",
+ label: "Backlog",
+ icon: HelpCircle,
+ },
+ {
+ value: "todo",
+ label: "Todo",
+ icon: Circle,
+ },
+ {
+ value: "in progress",
+ label: "In Progress",
+ icon: ArrowUpCircle,
+ },
+ {
+ value: "done",
+ label: "Done",
+ icon: CheckCircle2,
+ },
+ {
+ value: "canceled",
+ label: "Canceled",
+ icon: XCircle,
+ },
+]
+
+export default function ComboboxPopover() {
+ const [open, setOpen] = React.useState(false)
+ const [selectedStatus, setSelectedStatus] = React.useStateStatus
++ Press{" "} + + ⌘J + +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/date-picker-with-presets.tsx b/apps/www/__registry__/default/example/date-picker-with-presets.tsx
new file mode 100644
index 00000000000..1e5cd1605a2
--- /dev/null
+++ b/apps/www/__registry__/default/example/date-picker-with-presets.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Calendar } from "@/registry/default/ui/calendar"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/registry/default/ui/popover"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function DatePickerWithPresets() {
+ const [date, setDate] = React.useState+ The React Framework – created and maintained by @vercel. +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/input-otp-controlled.tsx b/apps/www/__registry__/default/example/input-otp-controlled.tsx
new file mode 100644
index 00000000000..c5f95cfbfca
--- /dev/null
+++ b/apps/www/__registry__/default/example/input-otp-controlled.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+
+export default function InputOTPControlled() {
+ const [value, setValue] = React.useState("")
+
+ return (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/input-otp-pattern.tsx b/apps/www/__registry__/default/example/input-otp-pattern.tsx
new file mode 100644
index 00000000000..87d711b0ecd
--- /dev/null
+++ b/apps/www/__registry__/default/example/input-otp-pattern.tsx
@@ -0,0 +1,22 @@
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+
+export default function InputOTPPattern() {
+ return (
+ Enter your email address.
++ Beautifully designed components that you can copy and + paste into your apps. Accessible. Customizable. Open + Source. +
+ ++ {children} +
+ ++ Set the dimensions for the layer. +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/resizable-demo-with-handle.tsx b/apps/www/__registry__/default/example/resizable-demo-with-handle.tsx
new file mode 100644
index 00000000000..af9c5973d3f
--- /dev/null
+++ b/apps/www/__registry__/default/example/resizable-demo-with-handle.tsx
@@ -0,0 +1,36 @@
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "@/registry/default/ui/resizable"
+
+export default function ResizableDemo() {
+ return (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/select-scrollable.tsx b/apps/www/__registry__/default/example/select-scrollable.tsx
new file mode 100644
index 00000000000..44ed74c15f5
--- /dev/null
+++ b/apps/www/__registry__/default/example/select-scrollable.tsx
@@ -0,0 +1,75 @@
+import * as React from "react"
+
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/registry/default/ui/select"
+
+export default function SelectScrollable() {
+ return (
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/separator-demo.tsx b/apps/www/__registry__/default/example/separator-demo.tsx
new file mode 100644
index 00000000000..8d7f86f7016
--- /dev/null
+++ b/apps/www/__registry__/default/example/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/default/ui/separator"
+
+export default function SeparatorDemo() {
+ return (
+ + An open-source UI component library. +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/table-demo.tsx b/apps/www/__registry__/default/example/table-demo.tsx
new file mode 100644
index 00000000000..3b830de01d8
--- /dev/null
+++ b/apps/www/__registry__/default/example/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/registry/default/ui/table"
+
+const invoices = [
+ {
+ invoice: "INV001",
+ paymentStatus: "Paid",
+ totalAmount: "$250.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV002",
+ paymentStatus: "Pending",
+ totalAmount: "$150.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV003",
+ paymentStatus: "Unpaid",
+ totalAmount: "$350.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV004",
+ paymentStatus: "Paid",
+ totalAmount: "$450.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV005",
+ paymentStatus: "Paid",
+ totalAmount: "$550.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV006",
+ paymentStatus: "Pending",
+ totalAmount: "$200.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV007",
+ paymentStatus: "Unpaid",
+ totalAmount: "$300.00",
+ paymentMethod: "Credit Card",
+ },
+]
+
+export default function TableDemo() {
+ return (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/textarea-with-button.tsx b/apps/www/__registry__/default/example/textarea-with-button.tsx
new file mode 100644
index 00000000000..9ab32cb99d3
--- /dev/null
+++ b/apps/www/__registry__/default/example/textarea-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/registry/default/ui/button"
+import { Textarea } from "@/registry/default/ui/textarea"
+
+export default function TextareaWithButton() {
+ return (
+ + Your message will be copied to the support team. +
+Add to library
++ "After all," he said, "everyone enjoys a good joke, so it's only fair that + they should pay for the privilege." ++ ) +} diff --git a/apps/www/__registry__/default/example/typography-demo.tsx b/apps/www/__registry__/default/example/typography-demo.tsx new file mode 100644 index 00000000000..dfc6deebd50 --- /dev/null +++ b/apps/www/__registry__/default/example/typography-demo.tsx @@ -0,0 +1,119 @@ +export default function TypographyDemo() { + return ( +
+ 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 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 king's subjects were not amused. They grumbled and complained, but + the king was firm: +
++ 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 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 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. +
+
+ @radix-ui/react-alert-dialog
+
+ )
+}
diff --git a/apps/www/__registry__/default/example/typography-large.tsx b/apps/www/__registry__/default/example/typography-large.tsx
new file mode 100644
index 00000000000..944f4478d38
--- /dev/null
+++ b/apps/www/__registry__/default/example/typography-large.tsx
@@ -0,0 +1,3 @@
+export default function TypographyLarge() {
+ return + A modal dialog that interrupts the user with important content and expects + a response. +
+ ) +} diff --git a/apps/www/__registry__/default/example/typography-list.tsx b/apps/www/__registry__/default/example/typography-list.tsx new file mode 100644 index 00000000000..a814f661f0b --- /dev/null +++ b/apps/www/__registry__/default/example/typography-list.tsx @@ -0,0 +1,9 @@ +export default function TypographyList() { + return ( +Enter your email address.
+ ) +} diff --git a/apps/www/__registry__/default/example/typography-p.tsx b/apps/www/__registry__/default/example/typography-p.tsx new file mode 100644 index 00000000000..88fd4795485 --- /dev/null +++ b/apps/www/__registry__/default/example/typography-p.tsx @@ -0,0 +1,8 @@ +export default 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/apps/www/__registry__/default/example/typography-small.tsx b/apps/www/__registry__/default/example/typography-small.tsx new file mode 100644 index 00000000000..822019d1df0 --- /dev/null +++ b/apps/www/__registry__/default/example/typography-small.tsx @@ -0,0 +1,5 @@ +export default function TypographySmall() { + return ( + Email address + ) +} diff --git a/apps/www/__registry__/default/example/typography-table.tsx b/apps/www/__registry__/default/example/typography-table.tsx new file mode 100644 index 00000000000..0698c475194 --- /dev/null +++ b/apps/www/__registry__/default/example/typography-table.tsx @@ -0,0 +1,44 @@ +export default function TypographyTable() { + return ( +| + King's Treasury + | ++ People's happiness + | +
|---|---|
| + Empty + | ++ Overflowing + | +
| + Modest + | ++ Satisfied + | +
| + Full + | ++ Ecstatic + | +
+ {body} +
+ ) +}) +FormMessage.displayName = "FormMessage" + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +} diff --git a/apps/www/__registry__/default/ui/hover-card.tsx b/apps/www/__registry__/default/ui/hover-card.tsx new file mode 100644 index 00000000000..e54d91cf81f --- /dev/null +++ b/apps/www/__registry__/default/ui/hover-card.tsx @@ -0,0 +1,29 @@ +"use client" + +import * as React from "react" +import * as HoverCardPrimitive from "@radix-ui/react-hover-card" + +import { cn } from "@/lib/utils" + +const HoverCard = HoverCardPrimitive.Root + +const HoverCardTrigger = HoverCardPrimitive.Trigger + +const HoverCardContent = React.forwardRef< + React.ElementRef