(new Date())
9 |
10 | return (
11 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/carousel-demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { Card, CardContent } from "@/registry/default/ui/card"
4 | import {
5 | Carousel,
6 | CarouselContent,
7 | CarouselItem,
8 | CarouselNext,
9 | CarouselPrevious,
10 | } from "@/registry/default/ui/carousel"
11 |
12 | export default function CarouselDemo() {
13 | return (
14 |
15 |
16 | {Array.from({ length: 5 }).map((_, index) => (
17 |
18 |
19 |
20 |
21 | {index + 1}
22 |
23 |
24 |
25 |
26 | ))}
27 |
28 |
29 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/checkbox-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Checkbox } from "@/registry/default/ui/checkbox"
4 |
5 | export default function CheckboxDemo() {
6 | return (
7 |
8 |
9 |
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/checkbox-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/default/ui/checkbox"
2 |
3 | export default function CheckboxDisabled() {
4 | return (
5 |
6 |
7 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/checkbox-with-text.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Checkbox } from "@/registry/default/ui/checkbox"
4 |
5 | export default function CheckboxWithText() {
6 | return (
7 |
8 |
9 |
10 |
16 |
17 | You agree to our Terms of Service and Privacy Policy.
18 |
19 |
20 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/input-otp-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSeparator,
5 | InputOTPSlot,
6 | } from "@/registry/default/ui/input-otp"
7 |
8 | export default function InputOTPDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/input-otp-pattern.tsx:
--------------------------------------------------------------------------------
1 | import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
2 |
3 | import {
4 | InputOTP,
5 | InputOTPGroup,
6 | InputOTPSlot,
7 | } from "@/registry/default/ui/input-otp"
8 |
9 | export default function InputOTPPattern() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/input-otp-separator.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | import {
4 | InputOTP,
5 | InputOTPGroup,
6 | InputOTPSeparator,
7 | InputOTPSlot,
8 | } from "@/registry/default/ui/input-otp"
9 |
10 | export default function InputOTPWithSeparator() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/input-with-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 | import { Input } from "@/registry/default/ui/input"
3 |
4 | export default function InputWithButton() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/input-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/default/ui/input"
2 | import { Label } from "@/registry/default/ui/label"
3 |
4 | export default function InputWithLabel() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/input-with-text.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/default/ui/input"
2 | import { Label } from "@/registry/default/ui/label"
3 |
4 | export default function InputWithText() {
5 | return (
6 |
7 |
8 |
9 |
Enter your email address.
10 |
7 |
8 |
9 |
10 |
11 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/resizable-handle.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ResizableHandle,
3 | ResizablePanel,
4 | ResizablePanelGroup,
5 | } from "@/registry/default/ui/resizable"
6 |
7 | export default function ResizableDemo() {
8 | return (
9 |
13 |
14 |
15 | Sidebar
16 |
17 |
18 |
19 |
20 |
21 | Content
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/resizable-vertical.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ResizableHandle,
3 | ResizablePanel,
4 | ResizablePanelGroup,
5 | } from "@/registry/default/ui/resizable"
6 |
7 | export default function ResizableDemo() {
8 | return (
9 |
13 |
14 |
15 | Header
16 |
17 |
18 |
19 |
20 |
21 | Content
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/scroll-area-demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { ScrollArea } from "@/registry/default/ui/scroll-area"
4 | import { Separator } from "@/registry/default/ui/separator"
5 |
6 | const tags = Array.from({ length: 50 }).map(
7 | (_, i, a) => `v1.2.0-beta.${a.length - i}`
8 | )
9 |
10 | export default function ScrollAreaDemo() {
11 | return (
12 |
13 |
14 |
Tags
15 | {tags.map((tag) => (
16 | <>
17 |
18 | {tag}
19 |
20 |
21 |
22 | ))}
23 |
6 |
7 |
Radix Primitives
8 |
9 | An open-source UI component library.
10 |
11 |
12 |
13 |
14 |
Blog
15 |
16 |
Docs
17 |
18 |
Source
19 |
20 |
6 |
7 |
8 |
9 |
10 |
11 |
6 |
7 |
8 |
9 |
10 |
11 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/textarea-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 |
3 | export default function TextareaDemo() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/textarea-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 |
3 | export default function TextareaDisabled() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/textarea-with-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 | import { Textarea } from "@/registry/default/ui/textarea"
3 |
4 | export default function TextareaWithButton() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/textarea-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/default/ui/label"
2 | import { Textarea } from "@/registry/default/ui/textarea"
3 |
4 | export default function TextareaWithLabel() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/textarea-with-text.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/default/ui/label"
2 | import { Textarea } from "@/registry/default/ui/textarea"
3 |
4 | export default function TextareaWithText() {
5 | return (
6 |
7 |
8 |
9 |
10 | Your message will be copied to the support team.
11 |
12 |
Add to library
18 |
19 |
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-blockquote.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyBlockquote() {
2 | return (
3 |
4 | "After all," he said, "everyone enjoys a good joke, so it's only fair that
5 | they should pay for the privilege."
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-h1.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH1() {
2 | return (
3 |
4 | Taxing Laughter: The Joke Tax Chronicles
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-h2.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH2() {
2 | return (
3 |
4 | The People of the Kingdom
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-h3.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH3() {
2 | return (
3 |
4 | The Joke Tax
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-h4.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH4() {
2 | return (
3 |
4 | People stopped telling jokes
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-inline-code.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyInlineCode() {
2 | return (
3 |
4 | @radix-ui/react-alert-dialog
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-large.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLarge() {
2 | return Are you absolutely sure?
3 | }
4 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-lead.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLead() {
2 | return (
3 |
4 | A modal dialog that interrupts the user with important content and expects
5 | a response.
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-list.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyList() {
2 | return (
3 |
4 | - 1st level of puns: 5 gold coins
5 | - 2nd level of jokes: 10 gold coins
6 | - 3rd level of one-liners : 20 gold coins
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-muted.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyMuted() {
2 | return (
3 | Enter your email address.
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-p.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyP() {
2 | return (
3 |
4 | The king, seeing how much happier his subjects were, realized the error of
5 | his ways and repealed the joke tax.
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/__registry__/default/example/typography-small.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographySmall() {
2 | return (
3 | Email address
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 |
5 | const AspectRatio = AspectRatioPrimitive.Root
6 |
7 | export { AspectRatio }
8 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4 |
5 | const Collapsible = CollapsiblePrimitive.Root
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | )
21 | }
22 | )
23 | Input.displayName = "Input"
24 |
25 | export { Input }
26 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 |
26 | export { Label }
27 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, value, ...props }, ref) => (
12 |
20 |
24 |
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 |
28 | export { Progress }
29 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(
12 | (
13 | { className, orientation = "horizontal", decorative = true, ...props },
14 | ref
15 | ) => (
16 |
27 | )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 |
31 | export { Separator }
32 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils"
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | )
13 | }
14 |
15 | export { Skeleton }
16 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useTheme } from "next-themes"
4 | import { Toaster as Sonner } from "sonner"
5 |
6 | type ToasterProps = React.ComponentProps
7 |
8 | const Toaster = ({ ...props }: ToasterProps) => {
9 | const { theme = "system" } = useTheme()
10 |
11 | return (
12 |
28 | )
29 | }
30 |
31 | export { Toaster }
32 |
--------------------------------------------------------------------------------
/src/__registry__/default/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | )
20 | }
21 | )
22 | Textarea.displayName = "Textarea"
23 |
24 | export { Textarea }
25 |
--------------------------------------------------------------------------------
/src/app/(app)/api/unsubscribe/route.ts:
--------------------------------------------------------------------------------
1 | import { Redis } from "@upstash/redis";
2 | import { NextRequest, NextResponse } from "next/server";
3 |
4 | const redis = Redis.fromEnv();
5 |
6 | export async function GET(request: NextRequest) {
7 | const { searchParams } = new URL(request.url);
8 | const email = searchParams.get("email");
9 |
10 | if (!email) {
11 | return NextResponse.json(
12 | { error: "Email parameter is missing" },
13 | { status: 400 }
14 | );
15 | }
16 |
17 | const hashKey = `subscriptions:${email}`;
18 | const field = "shadcn-ui-customizer";
19 |
20 | const isSubscribed = await redis.hget(hashKey, field);
21 | if (!isSubscribed) {
22 | return NextResponse.json(
23 | { error: "Email is not subscribed" },
24 | { status: 400 }
25 | );
26 | }
27 |
28 | await redis.hdel(hashKey, field);
29 |
30 | return NextResponse.json(
31 | { message: "Email unsubscribed successfully" },
32 | { status: 200 }
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/block-display.tsx:
--------------------------------------------------------------------------------
1 | import { getBlock } from "@/lib/blocks"
2 | import { BlockPreview } from "@/components/block-preview"
3 | import { styles } from "@/registry/styles"
4 |
5 | export async function BlockDisplay({ name }: { name: string }) {
6 | const blocks = await Promise.all(
7 | styles.map(async (style) => {
8 | const block = await getBlock(name, style.name)
9 | const hasLiftMode = block?.chunks ? block?.chunks?.length > 0 : false
10 |
11 | // Cannot (and don't need to) pass to the client.
12 | delete block?.component
13 | delete block?.chunks
14 |
15 | return {
16 | ...block,
17 | hasLiftMode,
18 | }
19 | })
20 | )
21 |
22 | if (!blocks?.length) {
23 | return null
24 | }
25 |
26 | return blocks.map((block) => (
27 |
28 | ))
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/counterscale-script.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Script from "next/script";
4 |
5 | export default function CounterscaleScript() {
6 | return (
7 | <>
8 |
17 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/providers.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ThemeProvider } from "next-themes";
4 | import { TooltipProvider } from "./ui/tooltip";
5 |
6 | export default function Providers({ children }: { children: React.ReactNode }) {
7 | return (
8 |
14 | {children}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 |
5 | const AspectRatio = AspectRatioPrimitive.Root
6 |
7 | export { AspectRatio }
8 |
--------------------------------------------------------------------------------
/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4 |
5 | const Collapsible = CollapsiblePrimitive.Root
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | )
21 | }
22 | )
23 | Input.displayName = "Input"
24 |
25 | export { Input }
26 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 |
26 | export { Label }
27 |
--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, value, ...props }, ref) => (
12 |
20 |
24 |
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 |
28 | export { Progress }
29 |
--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(
12 | (
13 | { className, orientation = "horizontal", decorative = true, ...props },
14 | ref
15 | ) => (
16 |
27 | )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 |
31 | export { Separator }
32 |
--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils"
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | )
13 | }
14 |
15 | export { Skeleton }
16 |
--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useTheme } from "next-themes";
4 | import { Toaster as Sonner } from "sonner";
5 |
6 | type ToasterProps = React.ComponentProps;
7 |
8 | const Toaster = ({ ...props }: ToasterProps) => {
9 | const { theme = "system" } = useTheme();
10 |
11 | return (
12 |
28 | );
29 | };
30 |
31 | export { Toaster };
32 |
--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | )
20 | }
21 | )
22 | Textarea.displayName = "Textarea"
23 |
24 | export { Textarea }
25 |
--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast()
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | )
31 | })}
32 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/hooks/use-config.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useAtom } from "jotai";
4 | import { atomWithStorage } from "jotai/utils";
5 |
6 | import { Style } from "@/registry/styles";
7 | import { Theme, CssVars, themes } from "@/registry/themes";
8 |
9 | type Config = {
10 | style: Style["name"];
11 | theme: Theme["name"];
12 | cssVars: {
13 | light: Partial;
14 | dark: Partial;
15 | };
16 | };
17 |
18 | const configAtom = atomWithStorage("config", {
19 | style: "default",
20 | theme: "zinc",
21 | cssVars: {
22 | light: themes.find((theme) => theme.name === "zinc")?.cssVars
23 | .light as Partial,
24 | dark: themes.find((theme) => theme.name === "zinc")?.cssVars
25 | .dark as Partial,
26 | },
27 | });
28 |
29 | export function useConfig() {
30 | return useAtom(configAtom);
31 | }
32 |
--------------------------------------------------------------------------------
/src/hooks/use-debounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function useDebounce(value: T, delay: number): T {
4 | const [debouncedValue, setDebouncedValue] = useState(value);
5 |
6 | useEffect(() => {
7 | const handler = setTimeout(() => {
8 | setDebouncedValue(value);
9 | }, delay);
10 |
11 | return () => {
12 | clearTimeout(handler);
13 | };
14 | }, [value, delay]);
15 |
16 | return debouncedValue;
17 | }
18 |
--------------------------------------------------------------------------------
/src/hooks/use-lift-mode.ts:
--------------------------------------------------------------------------------
1 | import { useAtom } from "jotai"
2 | import { atomWithStorage } from "jotai/utils"
3 |
4 | const configAtom = atomWithStorage("lift-mode", [])
5 |
6 | export function useLiftMode(name: string) {
7 | const [chunks, setChunks] = useAtom(configAtom)
8 |
9 | function toggleLiftMode(name: string) {
10 | setChunks((prev) => {
11 | return prev.includes(name)
12 | ? prev.filter((n) => n !== name)
13 | : [...prev, name]
14 | })
15 | }
16 |
17 | return {
18 | isLiftMode: chunks.includes(name),
19 | toggleLiftMode,
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/hooks/use-media-query.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | export function useMediaQuery(query: string) {
4 | const [value, setValue] = React.useState(false)
5 |
6 | React.useEffect(() => {
7 | function onChange(event: MediaQueryListEvent) {
8 | setValue(event.matches)
9 | }
10 |
11 | const result = matchMedia(query)
12 | result.addEventListener("change", onChange)
13 | setValue(result.matches)
14 |
15 | return () => result.removeEventListener("change", onChange)
16 | }, [query])
17 |
18 | return value
19 | }
20 |
--------------------------------------------------------------------------------
/src/lib/events.ts:
--------------------------------------------------------------------------------
1 | import va from "@vercel/analytics";
2 | import { z } from "zod";
3 |
4 | const eventSchema = z.object({
5 | name: z.enum([
6 | "copy_npm_command",
7 | "copy_usage_import_code",
8 | "copy_usage_code",
9 | "copy_primitive_code",
10 | "copy_theme_code",
11 | "copy_block_code",
12 | "copy_chunk_code",
13 | ]),
14 | // declare type AllowedPropertyValues = string | number | boolean | null
15 | properties: z
16 | .record(z.union([z.string(), z.number(), z.boolean(), z.null()]))
17 | .optional(),
18 | });
19 |
20 | export type Event = z.infer;
21 |
22 | export function trackEvent(input: Event): void {
23 | const event = eventSchema.parse(input);
24 | if (event) {
25 | va.track(event.name, event.properties);
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/lib/highlight-code.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { promises as fs } from "fs";
4 | import path from "path";
5 | import { getHighlighter } from "shiki";
6 |
7 | // Highlighting is failing in server components.
8 | // Disabling this in development.
9 | // TODO: Remove this when we figure out the issue.
10 | const highlightCodeEnabled = process.env.NODE_ENV !== "development";
11 |
12 | export async function highlightCode(code: string) {
13 | if (!highlightCodeEnabled) {
14 | return code;
15 | }
16 |
17 | const editorTheme = await fs.readFile(
18 | path.join(process.cwd(), "src/lib/themes/dark.json"),
19 | "utf-8"
20 | );
21 |
22 | const highlighter = await getHighlighter({
23 | langs: ["typescript"],
24 | themes: [],
25 | });
26 |
27 | await highlighter.loadTheme(JSON.parse(editorTheme));
28 |
29 | const html = await highlighter.codeToHtml(code, {
30 | lang: "typescript",
31 | theme: "Lambda Studio — Blackout",
32 | });
33 |
34 | return html;
35 | }
36 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export function absoluteUrl(path: string) {
9 | return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
10 | }
11 |
--------------------------------------------------------------------------------
/src/registry/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/eslintrc",
3 | "rules": {
4 | "react/no-unescaped-entities": "off"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-01-chunk-0.tsx:
--------------------------------------------------------------------------------
1 | import { DollarSign } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/default/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Total Revenue
15 |
16 |
17 |
18 | $45,231.89
19 | +20.1% from last month
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-01-chunk-1.tsx:
--------------------------------------------------------------------------------
1 | import { Users } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/default/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Subscriptions
15 |
16 |
17 |
18 | +2350
19 | +180.1% from last month
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-01-chunk-2.tsx:
--------------------------------------------------------------------------------
1 | import { CreditCard } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/default/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Sales
15 |
16 |
17 |
18 | +12,234
19 | +19% from last month
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-01-chunk-3.tsx:
--------------------------------------------------------------------------------
1 | import { Activity } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/default/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Active Now
15 |
16 |
17 |
18 | +573
19 | +201 since last hour
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-02-chunk-0.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 | import {
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/default/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Upgrade to Pro
15 |
16 | Unlock all features and get unlimited access to our support team.
17 |
18 |
19 |
20 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-02-chunk-1.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 |
3 | export default function Component() {
4 | return (
5 |
9 |
10 |
11 | You have no products
12 |
13 |
14 | You can start selling as soon as you add a product.
15 |
16 |
17 |
18 |
+25% from last week
20 |
21 |
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-05-chunk-2.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardContent,
4 | CardDescription,
5 | CardFooter,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/default/ui/card"
9 | import { Progress } from "@/registry/default/ui/progress"
10 |
11 | export default function Component() {
12 | return (
13 |
14 |
15 | This Month
16 | $5,329
17 |
18 |
19 |
20 | +10% from last month
21 |
22 |
23 |
24 |
25 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/src/registry/default/block/dashboard-07-chunk-5.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 | import {
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/default/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Archive Product
15 |
16 | Lipsum dolor sit amet, consectetur adipiscing elit.
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/registry/default/example/alert-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Terminal } from "lucide-react"
2 |
3 | import {
4 | Alert,
5 | AlertDescription,
6 | AlertTitle,
7 | } from "@/registry/default/ui/alert"
8 |
9 | export default function AlertDemo() {
10 | return (
11 |
12 |
13 | Heads up!
14 |
15 | You can add components to your app using the cli.
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/registry/default/example/alert-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { AlertCircle } from "lucide-react"
2 |
3 | import {
4 | Alert,
5 | AlertDescription,
6 | AlertTitle,
7 | } from "@/registry/default/ui/alert"
8 |
9 | export default function AlertDestructive() {
10 | return (
11 |
12 |
13 | Error
14 |
15 | Your session has expired. Please log in again.
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/registry/default/example/aspect-ratio-demo.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 |
3 | import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
4 |
5 | export default function AspectRatioDemo() {
6 | return (
7 |
8 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/src/registry/default/example/avatar-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Avatar,
3 | AvatarFallback,
4 | AvatarImage,
5 | } from "@/registry/default/ui/avatar"
6 |
7 | export default function AvatarDemo() {
8 | return (
9 |
10 |
11 | CN
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/registry/default/example/badge-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/default/ui/badge"
2 |
3 | export default function BadgeDemo() {
4 | return Badge
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/badge-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/default/ui/badge"
2 |
3 | export default function BadgeDestructive() {
4 | return Destructive
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/badge-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/default/ui/badge"
2 |
3 | export default function BadgeOutline() {
4 | return Outline
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/badge-secondary.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/default/ui/badge"
2 |
3 | export default function BadgeSecondary() {
4 | return Secondary
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/breadcrumb-link.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 |
3 | import {
4 | Breadcrumb,
5 | BreadcrumbItem,
6 | BreadcrumbLink,
7 | BreadcrumbList,
8 | BreadcrumbPage,
9 | BreadcrumbSeparator,
10 | } from "@/registry/default/ui/breadcrumb"
11 |
12 | export default function BreadcrumbWithCustomSeparator() {
13 | return (
14 |
15 |
16 |
17 |
18 | Home
19 |
20 |
21 |
22 |
23 |
24 | Components
25 |
26 |
27 |
28 |
29 | Breadcrumb
30 |
31 |
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/registry/default/example/breadcrumb-separator.tsx:
--------------------------------------------------------------------------------
1 | import { Slash } from "lucide-react"
2 |
3 | import {
4 | Breadcrumb,
5 | BreadcrumbItem,
6 | BreadcrumbLink,
7 | BreadcrumbList,
8 | BreadcrumbPage,
9 | BreadcrumbSeparator,
10 | } from "@/registry/default/ui/breadcrumb"
11 |
12 | export default function BreadcrumbWithCustomSeparator() {
13 | return (
14 |
15 |
16 |
17 | Home
18 |
19 |
20 |
21 |
22 |
23 | Components
24 |
25 |
26 |
27 |
28 |
29 | Breadcrumb
30 |
31 |
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-as-child.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 |
3 | import { Button } from "@/registry/default/ui/button"
4 |
5 | export default function ButtonAsChild() {
6 | return (
7 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 |
3 | export default function ButtonDemo() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 |
3 | export default function ButtonDestructive() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-ghost.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 |
3 | export default function ButtonGhost() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-icon.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronRight } from "lucide-react"
2 |
3 | import { Button } from "@/registry/default/ui/button"
4 |
5 | export default function ButtonIcon() {
6 | return (
7 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-link.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 |
3 | export default function ButtonLink() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-loading.tsx:
--------------------------------------------------------------------------------
1 | import { Loader2 } from "lucide-react"
2 |
3 | import { Button } from "@/registry/default/ui/button"
4 |
5 | export default function ButtonLoading() {
6 | return (
7 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 |
3 | export default function ButtonOutline() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-secondary.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 |
3 | export default function ButtonSecondary() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/button-with-icon.tsx:
--------------------------------------------------------------------------------
1 | import { Mail } from "lucide-react"
2 |
3 | import { Button } from "@/registry/default/ui/button"
4 |
5 | export default function ButtonWithIcon() {
6 | return (
7 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/calendar-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 |
5 | import { Calendar } from "@/registry/default/ui/calendar"
6 |
7 | export default function CalendarDemo() {
8 | const [date, setDate] = React.useState(new Date())
9 |
10 | return (
11 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/registry/default/example/cards/calendar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { addDays } from "date-fns"
4 |
5 | import { Calendar } from "@/registry/default/ui/calendar"
6 | import { Card, CardContent } from "@/registry/default/ui/card"
7 |
8 | const start = new Date(2023, 5, 5)
9 |
10 | export function CardsCalendar() {
11 | return (
12 |
13 |
14 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/default/example/carousel-demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { Card, CardContent } from "@/registry/default/ui/card"
4 | import {
5 | Carousel,
6 | CarouselContent,
7 | CarouselItem,
8 | CarouselNext,
9 | CarouselPrevious,
10 | } from "@/registry/default/ui/carousel"
11 |
12 | export default function CarouselDemo() {
13 | return (
14 |
15 |
16 | {Array.from({ length: 5 }).map((_, index) => (
17 |
18 |
19 |
20 |
21 | {index + 1}
22 |
23 |
24 |
25 |
26 | ))}
27 |
28 |
29 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/registry/default/example/checkbox-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Checkbox } from "@/registry/default/ui/checkbox"
4 |
5 | export default function CheckboxDemo() {
6 | return (
7 |
8 |
9 |
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/registry/default/example/checkbox-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/default/ui/checkbox"
2 |
3 | export default function CheckboxDisabled() {
4 | return (
5 |
6 |
7 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/registry/default/example/checkbox-with-text.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Checkbox } from "@/registry/default/ui/checkbox"
4 |
5 | export default function CheckboxWithText() {
6 | return (
7 |
8 |
9 |
10 |
16 |
17 | You agree to our Terms of Service and Privacy Policy.
18 |
19 |
20 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/input-otp-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSeparator,
5 | InputOTPSlot,
6 | } from "@/registry/default/ui/input-otp"
7 |
8 | export default function InputOTPDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/src/registry/default/example/input-otp-pattern.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
3 |
4 | import {
5 | InputOTP,
6 | InputOTPGroup,
7 | InputOTPSlot,
8 | } from "@/registry/default/ui/input-otp";
9 |
10 | export default function InputOTPPattern() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/default/example/input-otp-separator.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | import {
4 | InputOTP,
5 | InputOTPGroup,
6 | InputOTPSeparator,
7 | InputOTPSlot,
8 | } from "@/registry/default/ui/input-otp"
9 |
10 | export default function InputOTPWithSeparator() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/registry/default/example/input-with-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 | import { Input } from "@/registry/default/ui/input"
3 |
4 | export default function InputWithButton() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/input-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/default/ui/input"
2 | import { Label } from "@/registry/default/ui/label"
3 |
4 | export default function InputWithLabel() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/input-with-text.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/default/ui/input"
2 | import { Label } from "@/registry/default/ui/label"
3 |
4 | export default function InputWithText() {
5 | return (
6 |
7 |
8 |
9 |
Enter your email address.
10 |
7 |
8 |
9 |
10 |
11 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/registry/default/example/resizable-handle.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ResizableHandle,
3 | ResizablePanel,
4 | ResizablePanelGroup,
5 | } from "@/registry/default/ui/resizable"
6 |
7 | export default function ResizableDemo() {
8 | return (
9 |
13 |
14 |
15 | Sidebar
16 |
17 |
18 |
19 |
20 |
21 | Content
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/default/example/resizable-vertical.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ResizableHandle,
3 | ResizablePanel,
4 | ResizablePanelGroup,
5 | } from "@/registry/default/ui/resizable"
6 |
7 | export default function ResizableDemo() {
8 | return (
9 |
13 |
14 |
15 | Header
16 |
17 |
18 |
19 |
20 |
21 | Content
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/default/example/scroll-area-demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { ScrollArea } from "@/registry/default/ui/scroll-area"
4 | import { Separator } from "@/registry/default/ui/separator"
5 |
6 | const tags = Array.from({ length: 50 }).map(
7 | (_, i, a) => `v1.2.0-beta.${a.length - i}`
8 | )
9 |
10 | export default function ScrollAreaDemo() {
11 | return (
12 |
13 |
14 |
Tags
15 | {tags.map((tag) => (
16 | <>
17 |
18 | {tag}
19 |
20 |
21 |
22 | ))}
23 |
6 |
7 |
Radix Primitives
8 |
9 | An open-source UI component library.
10 |
11 |
12 |
13 |
14 |
Blog
15 |
16 |
Docs
17 |
18 |
Source
19 |
20 |
6 |
7 |
8 |
9 |
10 |
11 |
6 |
7 |
8 |
9 |
10 |
11 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/textarea-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 |
3 | export default function TextareaDemo() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/textarea-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 |
3 | export default function TextareaDisabled() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/textarea-with-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/default/ui/button"
2 | import { Textarea } from "@/registry/default/ui/textarea"
3 |
4 | export default function TextareaWithButton() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/textarea-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/default/ui/label"
2 | import { Textarea } from "@/registry/default/ui/textarea"
3 |
4 | export default function TextareaWithLabel() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/default/example/textarea-with-text.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/default/ui/label"
2 | import { Textarea } from "@/registry/default/ui/textarea"
3 |
4 | export default function TextareaWithText() {
5 | return (
6 |
7 |
8 |
9 |
10 | Your message will be copied to the support team.
11 |
12 |
Add to library
18 |
19 |
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-blockquote.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyBlockquote() {
2 | return (
3 |
4 | "After all," he said, "everyone enjoys a good joke, so it's only fair that
5 | they should pay for the privilege."
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-h1.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH1() {
2 | return (
3 |
4 | Taxing Laughter: The Joke Tax Chronicles
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-h2.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH2() {
2 | return (
3 |
4 | The People of the Kingdom
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-h3.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH3() {
2 | return (
3 |
4 | The Joke Tax
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-h4.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH4() {
2 | return (
3 |
4 | People stopped telling jokes
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-inline-code.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyInlineCode() {
2 | return (
3 |
4 | @radix-ui/react-alert-dialog
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-large.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLarge() {
2 | return Are you absolutely sure?
3 | }
4 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-lead.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLead() {
2 | return (
3 |
4 | A modal dialog that interrupts the user with important content and expects
5 | a response.
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-list.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyList() {
2 | return (
3 |
4 | - 1st level of puns: 5 gold coins
5 | - 2nd level of jokes: 10 gold coins
6 | - 3rd level of one-liners : 20 gold coins
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-muted.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyMuted() {
2 | return (
3 | Enter your email address.
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-p.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyP() {
2 | return (
3 |
4 | The king, seeing how much happier his subjects were, realized the error of
5 | his ways and repealed the joke tax.
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/registry/default/example/typography-small.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographySmall() {
2 | return (
3 | Email address
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/default/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 |
5 | const AspectRatio = AspectRatioPrimitive.Root
6 |
7 | export { AspectRatio }
8 |
--------------------------------------------------------------------------------
/src/registry/default/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4 |
5 | const Collapsible = CollapsiblePrimitive.Root
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 |
--------------------------------------------------------------------------------
/src/registry/default/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | )
21 | }
22 | )
23 | Input.displayName = "Input"
24 |
25 | export { Input }
26 |
--------------------------------------------------------------------------------
/src/registry/default/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 |
26 | export { Label }
27 |
--------------------------------------------------------------------------------
/src/registry/default/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, value, ...props }, ref) => (
12 |
20 |
24 |
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 |
28 | export { Progress }
29 |
--------------------------------------------------------------------------------
/src/registry/default/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(
12 | (
13 | { className, orientation = "horizontal", decorative = true, ...props },
14 | ref
15 | ) => (
16 |
27 | )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 |
31 | export { Separator }
32 |
--------------------------------------------------------------------------------
/src/registry/default/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils"
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | )
13 | }
14 |
15 | export { Skeleton }
16 |
--------------------------------------------------------------------------------
/src/registry/default/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useTheme } from "next-themes"
4 | import { Toaster as Sonner } from "sonner"
5 |
6 | type ToasterProps = React.ComponentProps
7 |
8 | const Toaster = ({ ...props }: ToasterProps) => {
9 | const { theme = "system" } = useTheme()
10 |
11 | return (
12 |
28 | )
29 | }
30 |
31 | export { Toaster }
32 |
--------------------------------------------------------------------------------
/src/registry/default/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | )
20 | }
21 | )
22 | Textarea.displayName = "Textarea"
23 |
24 | export { Textarea }
25 |
--------------------------------------------------------------------------------
/src/registry/default/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/registry/default/ui/toast"
11 | import { useToast } from "@/registry/default/ui/use-toast"
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast()
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | )
31 | })}
32 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-01-chunk-0.tsx:
--------------------------------------------------------------------------------
1 | import { DollarSign } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/new-york/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Total Revenue
15 |
16 |
17 |
18 | $45,231.89
19 | +20.1% from last month
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-01-chunk-1.tsx:
--------------------------------------------------------------------------------
1 | import { Users } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/new-york/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Subscriptions
15 |
16 |
17 |
18 | +2350
19 | +180.1% from last month
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-01-chunk-2.tsx:
--------------------------------------------------------------------------------
1 | import { CreditCard } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/new-york/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Sales
15 |
16 |
17 |
18 | +12,234
19 | +19% from last month
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-01-chunk-3.tsx:
--------------------------------------------------------------------------------
1 | import { Activity } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/new-york/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Active Now
15 |
16 |
17 |
18 | +573
19 | +201 since last hour
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-02-chunk-0.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 | import {
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/new-york/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Upgrade to Pro
15 |
16 | Unlock all features and get unlimited access to our support team.
17 |
18 |
19 |
20 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-02-chunk-1.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 |
3 | export default function Component() {
4 | return (
5 |
9 |
10 |
11 | You have no products
12 |
13 |
14 | You can start selling as soon as you add a product.
15 |
16 |
17 |
18 |
+25% from last week
20 |
21 |
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-05-chunk-2.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardContent,
4 | CardDescription,
5 | CardFooter,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/new-york/ui/card"
9 | import { Progress } from "@/registry/new-york/ui/progress"
10 |
11 | export default function Component() {
12 | return (
13 |
14 |
15 | This Month
16 | $5,329
17 |
18 |
19 |
20 | +10% from last month
21 |
22 |
23 |
24 |
25 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/src/registry/new-york/block/dashboard-07-chunk-5.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 | import {
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/registry/new-york/ui/card"
9 |
10 | export default function Component() {
11 | return (
12 |
13 |
14 | Archive Product
15 |
16 | Lipsum dolor sit amet, consectetur adipiscing elit.
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/alert-demo.tsx:
--------------------------------------------------------------------------------
1 | import { RocketIcon } from "@radix-ui/react-icons"
2 |
3 | import {
4 | Alert,
5 | AlertDescription,
6 | AlertTitle,
7 | } from "@/registry/new-york/ui/alert"
8 |
9 | export default function AlertDemo() {
10 | return (
11 |
12 |
13 | Heads up!
14 |
15 | You can add components to your app using the cli.
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/alert-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { ExclamationTriangleIcon } from "@radix-ui/react-icons"
2 |
3 | import {
4 | Alert,
5 | AlertDescription,
6 | AlertTitle,
7 | } from "@/registry/new-york/ui/alert"
8 |
9 | export default function AlertDestructive() {
10 | return (
11 |
12 |
13 | Error
14 |
15 | Your session has expired. Please log in again.
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/aspect-ratio-demo.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 |
3 | import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
4 |
5 | export default function AspectRatioDemo() {
6 | return (
7 |
8 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/avatar-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Avatar,
3 | AvatarFallback,
4 | AvatarImage,
5 | } from "@/registry/new-york/ui/avatar"
6 |
7 | export default function AvatarDemo() {
8 | return (
9 |
10 |
11 | CN
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/badge-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/new-york/ui/badge"
2 |
3 | export default function BadgeDemo() {
4 | return Badge
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/badge-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/new-york/ui/badge"
2 |
3 | export default function BadgeDestructive() {
4 | return Destructive
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/badge-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/new-york/ui/badge"
2 |
3 | export default function BadgeOutline() {
4 | return Outline
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/badge-secondary.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/registry/new-york/ui/badge"
2 |
3 | export default function BadgeSecondary() {
4 | return Secondary
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/breadcrumb-link.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 |
3 | import {
4 | Breadcrumb,
5 | BreadcrumbItem,
6 | BreadcrumbLink,
7 | BreadcrumbList,
8 | BreadcrumbPage,
9 | BreadcrumbSeparator,
10 | } from "@/registry/new-york/ui/breadcrumb"
11 |
12 | export default function BreadcrumbWithCustomSeparator() {
13 | return (
14 |
15 |
16 |
17 |
18 | Home
19 |
20 |
21 |
22 |
23 |
24 | Components
25 |
26 |
27 |
28 |
29 | Breadcrumb
30 |
31 |
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-as-child.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 |
3 | import { Button } from "@/registry/new-york/ui/button"
4 |
5 | export default function ButtonAsChild() {
6 | return (
7 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 |
3 | export default function ButtonDemo() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-destructive.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 |
3 | export default function ButtonDestructive() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-ghost.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 |
3 | export default function ButtonGhost() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-icon.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronRightIcon } from "@radix-ui/react-icons"
2 |
3 | import { Button } from "@/registry/new-york/ui/button"
4 |
5 | export default function ButtonIcon() {
6 | return (
7 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-link.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 |
3 | export default function ButtonLink() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-loading.tsx:
--------------------------------------------------------------------------------
1 | import { ReloadIcon } from "@radix-ui/react-icons"
2 |
3 | import { Button } from "@/registry/new-york/ui/button"
4 |
5 | export default function ButtonLoading() {
6 | return (
7 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-outline.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 |
3 | export default function ButtonOutline() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-secondary.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 |
3 | export default function ButtonSecondary() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/button-with-icon.tsx:
--------------------------------------------------------------------------------
1 | import { EnvelopeOpenIcon } from "@radix-ui/react-icons"
2 |
3 | import { Button } from "@/registry/new-york/ui/button"
4 |
5 | export default function ButtonWithIcon() {
6 | return (
7 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/calendar-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 |
5 | import { Calendar } from "@/registry/new-york/ui/calendar"
6 |
7 | export default function CalendarDemo() {
8 | const [date, setDate] = React.useState(new Date())
9 |
10 | return (
11 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/cards/calendar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { addDays } from "date-fns"
4 |
5 | import { Calendar } from "@/registry/new-york/ui/calendar"
6 | import { Card, CardContent } from "@/registry/new-york/ui/card"
7 |
8 | const start = new Date(2023, 5, 5)
9 |
10 | export function CardsCalendar() {
11 | return (
12 |
13 |
14 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/carousel-demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { Card, CardContent } from "@/registry/new-york/ui/card"
4 | import {
5 | Carousel,
6 | CarouselContent,
7 | CarouselItem,
8 | CarouselNext,
9 | CarouselPrevious,
10 | } from "@/registry/new-york/ui/carousel"
11 |
12 | export default function CarouselDemo() {
13 | return (
14 |
15 |
16 | {Array.from({ length: 5 }).map((_, index) => (
17 |
18 |
19 |
20 |
21 | {index + 1}
22 |
23 |
24 |
25 |
26 | ))}
27 |
28 |
29 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/checkbox-demo.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Checkbox } from "@/registry/new-york/ui/checkbox"
4 |
5 | export default function CheckboxDemo() {
6 | return (
7 |
8 |
9 |
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/checkbox-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/registry/new-york/ui/checkbox"
2 |
3 | export default function CheckboxDisabled() {
4 | return (
5 |
6 |
7 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/checkbox-with-text.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Checkbox } from "@/registry/new-york/ui/checkbox"
4 |
5 | export default function CheckboxWithText() {
6 | return (
7 |
8 |
9 |
10 |
16 |
17 | You agree to our Terms of Service and Privacy Policy.
18 |
19 |
20 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/input-otp-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSeparator,
5 | InputOTPSlot,
6 | } from "@/registry/new-york/ui/input-otp"
7 |
8 | export default function InputOTPDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/input-otp-pattern.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
4 |
5 | import {
6 | InputOTP,
7 | InputOTPGroup,
8 | InputOTPSlot,
9 | } from "@/registry/new-york/ui/input-otp";
10 |
11 | export default function InputOTPPattern() {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/input-otp-separator.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | import {
4 | InputOTP,
5 | InputOTPGroup,
6 | InputOTPSeparator,
7 | InputOTPSlot,
8 | } from "@/registry/new-york/ui/input-otp"
9 |
10 | export default function InputOTPWithSeparator() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/input-with-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 | import { Input } from "@/registry/new-york/ui/input"
3 |
4 | export default function InputWithButton() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/input-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/new-york/ui/input"
2 | import { Label } from "@/registry/new-york/ui/label"
3 |
4 | export default function InputWithLabel() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/input-with-text.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/registry/new-york/ui/input"
2 | import { Label } from "@/registry/new-york/ui/label"
3 |
4 | export default function InputWithText() {
5 | return (
6 |
7 |
8 |
9 |
Enter your email address.
10 |
7 |
8 |
9 |
10 |
11 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/resizable-handle.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ResizableHandle,
3 | ResizablePanel,
4 | ResizablePanelGroup,
5 | } from "@/registry/new-york/ui/resizable"
6 |
7 | export default function ResizableDemo() {
8 | return (
9 |
13 |
14 |
15 | Sidebar
16 |
17 |
18 |
19 |
20 |
21 | Content
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/resizable-vertical.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ResizableHandle,
3 | ResizablePanel,
4 | ResizablePanelGroup,
5 | } from "@/registry/new-york/ui/resizable"
6 |
7 | export default function ResizableDemo() {
8 | return (
9 |
13 |
14 |
15 | Header
16 |
17 |
18 |
19 |
20 |
21 | Content
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/scroll-area-demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
4 | import { Separator } from "@/registry/new-york/ui/separator"
5 |
6 | const tags = Array.from({ length: 50 }).map(
7 | (_, i, a) => `v1.2.0-beta.${a.length - i}`
8 | )
9 |
10 | export default function ScrollAreaDemo() {
11 | return (
12 |
13 |
14 |
Tags
15 | {tags.map((tag) => (
16 | <>
17 |
18 | {tag}
19 |
20 |
21 |
22 | ))}
23 |
6 |
7 |
Radix Primitives
8 |
9 | An open-source UI component library.
10 |
11 |
12 |
13 |
14 |
Blog
15 |
16 |
Docs
17 |
18 |
Source
19 |
20 |
6 |
7 |
8 |
9 |
10 |
11 |
6 |
7 |
8 |
9 |
10 |
11 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/textarea-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/new-york/ui/textarea"
2 |
3 | export default function TextareaDemo() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/textarea-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/new-york/ui/textarea"
2 |
3 | export default function TextareaDisabled() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/textarea-with-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/registry/new-york/ui/button"
2 | import { Textarea } from "@/registry/new-york/ui/textarea"
3 |
4 | export default function TextareaWithButton() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/textarea-with-label.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/new-york/ui/label"
2 | import { Textarea } from "@/registry/new-york/ui/textarea"
3 |
4 | export default function TextareaWithLabel() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/textarea-with-text.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/new-york/ui/label"
2 | import { Textarea } from "@/registry/new-york/ui/textarea"
3 |
4 | export default function TextareaWithText() {
5 | return (
6 |
7 |
8 |
9 |
10 | Your message will be copied to the support team.
11 |
12 |
Add to library
18 |
19 |
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-blockquote.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyBlockquote() {
2 | return (
3 |
4 | "After all," he said, "everyone enjoys a good joke, so it's only fair that
5 | they should pay for the privilege."
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-h1.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH1() {
2 | return (
3 |
4 | Taxing Laughter: The Joke Tax Chronicles
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-h2.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH2() {
2 | return (
3 |
4 | The People of the Kingdom
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-h3.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH3() {
2 | return (
3 |
4 | The Joke Tax
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-h4.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH4() {
2 | return (
3 |
4 | People stopped telling jokes
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-inline-code.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyInlineCode() {
2 | return (
3 |
4 | @radix-ui/react-alert-dialog
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-large.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLarge() {
2 | return Are you absolutely sure?
3 | }
4 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-lead.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLead() {
2 | return (
3 |
4 | A modal dialog that interrupts the user with important content and expects
5 | a response.
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-list.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyList() {
2 | return (
3 |
4 | - 1st level of puns: 5 gold coins
5 | - 2nd level of jokes: 10 gold coins
6 | - 3rd level of one-liners : 20 gold coins
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-muted.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyMuted() {
2 | return (
3 | Enter your email address.
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-p.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyP() {
2 | return (
3 |
4 | The king, seeing how much happier his subjects were, realized the error of
5 | his ways and repealed the joke tax.
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/registry/new-york/example/typography-small.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographySmall() {
2 | return (
3 | Email address
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 |
5 | const AspectRatio = AspectRatioPrimitive.Root
6 |
7 | export { AspectRatio }
8 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4 |
5 | const Collapsible = CollapsiblePrimitive.Root
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | )
21 | }
22 | )
23 | Input.displayName = "Input"
24 |
25 | export { Input }
26 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 |
26 | export { Label }
27 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, value, ...props }, ref) => (
12 |
20 |
24 |
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 |
28 | export { Progress }
29 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(
12 | (
13 | { className, orientation = "horizontal", decorative = true, ...props },
14 | ref
15 | ) => (
16 |
27 | )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 |
31 | export { Separator }
32 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils"
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | )
13 | }
14 |
15 | export { Skeleton }
16 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useTheme } from "next-themes"
4 | import { Toaster as Sonner } from "sonner"
5 |
6 | type ToasterProps = React.ComponentProps
7 |
8 | const Toaster = ({ ...props }: ToasterProps) => {
9 | const { theme = "system" } = useTheme()
10 |
11 | return (
12 |
28 | )
29 | }
30 |
31 | export { Toaster }
32 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | )
20 | }
21 | )
22 | Textarea.displayName = "Textarea"
23 |
24 | export { Textarea }
25 |
--------------------------------------------------------------------------------
/src/registry/new-york/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/registry/new-york/ui/toast"
11 | import { useToast } from "@/registry/new-york/ui/use-toast"
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast()
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | )
31 | })}
32 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/registry/registry.ts:
--------------------------------------------------------------------------------
1 | import { blocks } from "@/registry/blocks"
2 | import { examples } from "@/registry/examples"
3 | import { Registry } from "@/registry/schema"
4 | import { ui } from "@/registry/ui"
5 |
6 | export const registry: Registry = [...ui, ...examples, ...blocks]
7 |
--------------------------------------------------------------------------------
/src/registry/styles.ts:
--------------------------------------------------------------------------------
1 | export const styles = [
2 | {
3 | name: "default",
4 | label: "Default",
5 | },
6 | {
7 | name: "new-york",
8 | label: "New York",
9 | },
10 | ] as const
11 |
12 | export type Style = (typeof styles)[number]
13 |
--------------------------------------------------------------------------------
/src/types/unist.ts:
--------------------------------------------------------------------------------
1 | //@ts-ignore
2 | import { Node } from "unist-builder";
3 |
4 | export interface UnistNode extends Node {
5 | type: string;
6 | name?: string;
7 | tagName?: string;
8 | value?: string;
9 | properties?: {
10 | __rawString__?: string;
11 | __className__?: string;
12 | __event__?: string;
13 | [key: string]: unknown;
14 | } & NpmCommands;
15 | attributes?: {
16 | name: string;
17 | value: unknown;
18 | type?: string;
19 | }[];
20 | children?: UnistNode[];
21 | }
22 |
23 | export interface UnistTree extends Node {
24 | children: UnistNode[];
25 | }
26 |
27 | export interface NpmCommands {
28 | __npmCommand__?: string;
29 | __yarnCommand__?: string;
30 | __pnpmCommand__?: string;
31 | }
32 |
--------------------------------------------------------------------------------
/ss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Railly/shadcn-ui-customizer/aea975e3cfc55f5aa7136889058d2f81353b2c09/ss.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "bundler",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------