5 |
6 | export default function SliderDemo({ className, ...props }: SliderProps) {
7 | return (
8 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/switch-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/registry/default/ui/label"
2 | import { Switch } from "@/registry/default/ui/switch"
3 |
4 | export default function SwitchDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/textarea-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 |
3 | export default function TextareaDemo() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/textarea-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 |
3 | export default function TextareaDisabled() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/typography-h2.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH2() {
2 | return (
3 |
4 | The People of the Kingdom
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/typography-h3.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH3() {
2 | return (
3 |
4 | The Joke Tax
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/typography-h4.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH4() {
2 | return (
3 |
4 | People stopped telling jokes
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/typography-large.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLarge() {
2 | return (
3 | Are you sure absolutely sure?
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/typography-muted.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyMuted() {
2 | return (
3 | Enter your email address.
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/default/example/typography-small.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographySmall() {
2 | return (
3 | Email address
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/default/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { Check } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
21 |
24 |
25 |
26 |
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 |
30 | export { Checkbox }
31 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/default/ui/slider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SliderPrimitive from "@radix-ui/react-slider"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Slider = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 |
20 |
21 |
22 |
23 |
24 |
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 |
28 | export { Slider }
29 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/example/accordion-demo.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Accordion,
3 | AccordionContent,
4 | AccordionItem,
5 | AccordionTrigger,
6 | } from "@/registry/new-york/ui/accordion"
7 |
8 | export default function AccordionDemo() {
9 | return (
10 |
11 |
12 | Is it accessible?
13 |
14 | Yes. It adheres to the WAI-ARIA design pattern.
15 |
16 |
17 |
18 | Is it styled?
19 |
20 | Yes. It comes with default styles that matches the other
21 | components' aesthetic.
22 |
23 |
24 |
25 | Is it animated?
26 |
27 | Yes. It's animated by default, but you can disable it if you prefer.
28 |
29 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
{tag}
18 |
19 |
20 | ))}
21 |
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 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/example/typography-h3.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH3() {
2 | return (
3 |
4 | The Joke Tax
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/example/typography-h4.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyH4() {
2 | return (
3 |
4 | People stopped telling jokes
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/example/typography-large.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyLarge() {
2 | return (
3 | Are you sure absolutely sure?
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/example/typography-muted.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographyMuted() {
2 | return (
3 | Enter your email address.
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/example/typography-small.tsx:
--------------------------------------------------------------------------------
1 | export default function TypographySmall() {
2 | return (
3 | Email address
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { CheckIcon } from "@radix-ui/react-icons"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
21 |
24 |
25 |
26 |
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 |
30 | export { Checkbox }
31 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/new-york/ui/slider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SliderPrimitive from "@radix-ui/react-slider"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Slider = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 |
20 |
21 |
22 |
23 |
24 |
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 |
28 | export { Slider }
29 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/registry/schema.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod"
2 |
3 | export const registrySchema = z.array(
4 | z.object({
5 | name: z.string(),
6 | dependencies: z.array(z.string()).optional(),
7 | registryDependencies: z.array(z.string()).optional(),
8 | files: z.array(z.string()),
9 | type: z.enum([
10 | "components:ui",
11 | "components:component",
12 | "components:example",
13 | ]),
14 | })
15 | )
16 |
17 | export type Registry = z.infer
18 |
--------------------------------------------------------------------------------
/apps/www/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 |
--------------------------------------------------------------------------------
/apps/www/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const baseConfig = require("../../tailwind.config.cjs")
2 |
3 | /** @type {import('tailwindcss').Config} */
4 | module.exports = {
5 | ...baseConfig,
6 | content: [
7 | ...baseConfig.content,
8 | "content/**/*.mdx",
9 | "registry/**/*.{ts,tsx}",
10 | ],
11 | }
12 |
--------------------------------------------------------------------------------
/apps/www/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "target": "es5",
6 | "lib": ["dom", "dom.iterable", "esnext"],
7 | "allowJs": true,
8 | "skipLibCheck": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noEmit": true,
12 | "incremental": true,
13 | "esModuleInterop": true,
14 | "module": "esnext",
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "jsx": "preserve",
18 | "baseUrl": ".",
19 | "paths": {
20 | "@/*": ["./*"],
21 | "contentlayer/generated": ["./.contentlayer/generated"]
22 | },
23 | "plugins": [
24 | {
25 | "name": "next"
26 | }
27 | ]
28 | },
29 | "include": [
30 | "next-env.d.ts",
31 | "**/*.ts",
32 | "**/*.tsx",
33 | ".next/types/**/*.ts",
34 | ".contentlayer/generated"
35 | ],
36 | "exclude": ["node_modules", "./scripts/build-registry.ts"]
37 | }
38 |
--------------------------------------------------------------------------------
/apps/www/tsconfig.scripts.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "target": "es6",
6 | "module": "commonjs",
7 | "esModuleInterop": true,
8 | "isolatedModules": false
9 | },
10 | "include": [".contentlayer/generated", "scripts/**/*.ts"],
11 | "exclude": ["node_modules"]
12 | }
13 |
--------------------------------------------------------------------------------
/apps/www/types/nav.ts:
--------------------------------------------------------------------------------
1 | import { Icons } from "@/components/icons"
2 |
3 | export interface NavItem {
4 | title: string
5 | href?: string
6 | disabled?: boolean
7 | external?: boolean
8 | icon?: keyof typeof Icons
9 | label?: string
10 | }
11 |
12 | export interface NavItemWithChildren extends NavItem {
13 | items: NavItemWithChildren[]
14 | }
15 |
16 | export interface MainNavItem extends NavItem {}
17 |
18 | export interface SidebarNavItem extends NavItemWithChildren {}
19 |
--------------------------------------------------------------------------------
/apps/www/types/unist.ts:
--------------------------------------------------------------------------------
1 | import { Node } from "unist-builder"
2 |
3 | export interface UnistNode extends Node {
4 | type: string
5 | name?: string
6 | tagName?: string
7 | value?: string
8 | properties?: {
9 | __rawString__?: string
10 | __className__?: string
11 | __event__?: string
12 | [key: string]: unknown
13 | } & NpmCommands
14 | attributes?: {
15 | name: string
16 | value: unknown
17 | type?: string
18 | }[]
19 | children?: UnistNode[]
20 | }
21 |
22 | export interface UnistTree extends Node {
23 | children: UnistNode[]
24 | }
25 |
26 | export interface NpmCommands {
27 | __npmCommand__?: string
28 | __yarnCommand__?: string
29 | __pnpmCommand__?: string
30 | }
31 |
--------------------------------------------------------------------------------
/fix_user.sh:
--------------------------------------------------------------------------------
1 | git filter-branch --env-filter '
2 | NEW_NAME="midas-1119"
3 | NEW_EMAIL="lucas.chalie1119@gmail.com"
4 |
5 | if [ "$GIT_COMMITTER_EMAIL" != "$NEW_EMAIL" ]
6 | then
7 | export GIT_COMMITTER_NAME="$NEW_NAME"
8 | export GIT_COMMITTER_EMAIL="$NEW_EMAIL"
9 | fi
10 | if [ "$GIT_AUTHOR_EMAIL" != "$NEW_EMAIL" ]
11 | then
12 | export GIT_AUTHOR_NAME="$NEW_NAME"
13 | export GIT_AUTHOR_EMAIL="$NEW_EMAIL"
14 | fi
15 | ' --tag-name-filter cat -- --branches --tags
--------------------------------------------------------------------------------
/packages/cli/.gitignore:
--------------------------------------------------------------------------------
1 | components
2 | dist
3 | .turbo
--------------------------------------------------------------------------------
/packages/cli/.prettierignore:
--------------------------------------------------------------------------------
1 | test
--------------------------------------------------------------------------------
/packages/cli/README.md:
--------------------------------------------------------------------------------
1 | # shadcn-ui
2 |
3 | A CLI for adding components to your project.
4 |
5 | ## Usage
6 |
7 | Use the `init` command to initialize dependencies for a new project.
8 |
9 | The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
10 |
11 | ```bash
12 | npx shadcn-ui init
13 | ```
14 |
15 | ## add
16 |
17 | Use the `add` command to add components to your project.
18 |
19 | The `add` command adds a component to your project and installs all required dependencies.
20 |
21 | ```bash
22 | npx shadcn-ui add [component]
23 | ```
24 |
25 | ### Example
26 |
27 | ```bash
28 | npx shadcn-ui add alert-dialog
29 | ```
30 |
31 | You can also run the command without any arguments to view a list of all available components:
32 |
33 | ```bash
34 | npx shadcn-ui add
35 | ```
36 |
37 | ## Documentation
38 |
39 | Visit http://ui.shadcn.com/docs to view the documentation.
40 |
41 | ## License
42 |
43 | Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
44 |
--------------------------------------------------------------------------------
/packages/cli/src/index.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | import { add } from "@/src/commands/add"
3 | import { diff } from "@/src/commands/diff"
4 | import { init } from "@/src/commands/init"
5 | import { Command } from "commander"
6 |
7 | import { getPackageInfo } from "./utils/get-package-info"
8 |
9 | process.on("SIGINT", () => process.exit(0))
10 | process.on("SIGTERM", () => process.exit(0))
11 |
12 | async function main() {
13 | const packageInfo = await getPackageInfo()
14 |
15 | const program = new Command()
16 | .name("shadcn-ui")
17 | .description("add components and dependencies to your project")
18 | .version(
19 | packageInfo.version || "1.0.0",
20 | "-v, --version",
21 | "display the version number"
22 | )
23 |
24 | program.addCommand(init).addCommand(add).addCommand(diff)
25 |
26 | program.parse()
27 | }
28 |
29 | main()
30 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/get-package-info.ts:
--------------------------------------------------------------------------------
1 | import path from "path"
2 | import fs from "fs-extra"
3 | import { type PackageJson } from "type-fest"
4 |
5 | export function getPackageInfo() {
6 | const packageJsonPath = path.join("package.json")
7 |
8 | return fs.readJSONSync(packageJsonPath) as PackageJson
9 | }
10 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/get-package-manager.ts:
--------------------------------------------------------------------------------
1 | import { detect } from "@antfu/ni"
2 |
3 | export async function getPackageManager(
4 | targetDir: string
5 | ): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
6 | const packageManager = await detect({ programmatic: true, cwd: targetDir })
7 |
8 | if (packageManager === "yarn@berry") return "yarn"
9 | if (packageManager === "pnpm@6") return "pnpm"
10 | if (packageManager === "bun") return "bun"
11 |
12 | return packageManager ?? "npm"
13 | }
14 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/get-project-info.ts:
--------------------------------------------------------------------------------
1 | import { existsSync } from "fs"
2 | import path from "path"
3 | import fs from "fs-extra"
4 |
5 | export async function getProjectInfo() {
6 | const info = {
7 | tsconfig: null,
8 | srcDir: false,
9 | appDir: false,
10 | srcComponentsUiDir: false,
11 | componentsUiDir: false,
12 | }
13 |
14 | try {
15 | const tsconfig = await getTsConfig()
16 |
17 | return {
18 | tsconfig,
19 | srcDir: existsSync(path.resolve("./src")),
20 | appDir:
21 | existsSync(path.resolve("./app")) ||
22 | existsSync(path.resolve("./src/app")),
23 | srcComponentsUiDir: existsSync(path.resolve("./src/components/ui")),
24 | componentsUiDir: existsSync(path.resolve("./components/ui")),
25 | }
26 | } catch (error) {
27 | return info
28 | }
29 | }
30 |
31 | export async function getTsConfig() {
32 | try {
33 | const tsconfigPath = path.join("tsconfig.json")
34 | const tsconfig = await fs.readJSON(tsconfigPath)
35 |
36 | if (!tsconfig) {
37 | throw new Error("tsconfig.json is missing")
38 | }
39 |
40 | return tsconfig
41 | } catch (error) {
42 | return null
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/handle-error.ts:
--------------------------------------------------------------------------------
1 | import { logger } from "@/src/utils/logger"
2 |
3 | export function handleError(error: unknown) {
4 | if (typeof error === "string") {
5 | logger.error(error)
6 | process.exit(1)
7 | }
8 |
9 | if (error instanceof Error) {
10 | logger.error(error.message)
11 | process.exit(1)
12 | }
13 |
14 | logger.error("Something went wrong. Please try again.")
15 | process.exit(1)
16 | }
17 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/logger.ts:
--------------------------------------------------------------------------------
1 | import chalk from "chalk"
2 |
3 | export const logger = {
4 | error(...args: unknown[]) {
5 | console.log(chalk.red(...args))
6 | },
7 | warn(...args: unknown[]) {
8 | console.log(chalk.yellow(...args))
9 | },
10 | info(...args: unknown[]) {
11 | console.log(chalk.cyan(...args))
12 | },
13 | success(...args: unknown[]) {
14 | console.log(chalk.green(...args))
15 | },
16 | break() {
17 | console.log("")
18 | },
19 | }
20 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/resolve-import.ts:
--------------------------------------------------------------------------------
1 | import { createMatchPath, type ConfigLoaderSuccessResult } from "tsconfig-paths"
2 |
3 | export async function resolveImport(
4 | importPath: string,
5 | config: Pick
6 | ) {
7 | return createMatchPath(config.absoluteBaseUrl, config.paths)(
8 | importPath,
9 | undefined,
10 | () => true,
11 | [".ts", ".tsx"]
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/transformers/transform-import.ts:
--------------------------------------------------------------------------------
1 | import { Transformer } from "@/src/utils/transformers"
2 |
3 | export const transformImport: Transformer = async ({ sourceFile, config }) => {
4 | const importDeclarations = sourceFile.getImportDeclarations()
5 |
6 | for (const importDeclaration of importDeclarations) {
7 | const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
8 |
9 | // Replace @/registry/[style] with the components alias.
10 | if (moduleSpecifier.startsWith("@/registry/")) {
11 | importDeclaration.setModuleSpecifier(
12 | moduleSpecifier.replace(
13 | /^@\/registry\/[^/]+/,
14 | config.aliases.components
15 | )
16 | )
17 | }
18 |
19 | // Replace `import { cn } from "@/lib/utils"`
20 | if (moduleSpecifier == "@/lib/utils") {
21 | const namedImports = importDeclaration.getNamedImports()
22 | const cnImport = namedImports.find((i) => i.getName() === "cn")
23 | if (cnImport) {
24 | importDeclaration.setModuleSpecifier(
25 | moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils)
26 | )
27 | }
28 | }
29 | }
30 |
31 | return sourceFile
32 | }
33 |
--------------------------------------------------------------------------------
/packages/cli/src/utils/transformers/transform-rsc.ts:
--------------------------------------------------------------------------------
1 | import { Transformer } from "@/src/utils/transformers"
2 | import { SyntaxKind } from "ts-morph"
3 |
4 | export const transformRsc: Transformer = async ({ sourceFile, config }) => {
5 | if (config.rsc) {
6 | return sourceFile
7 | }
8 |
9 | // Remove "use client" from the top of the file.
10 | const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement)
11 | if (first?.getText() === `"use client"`) {
12 | first.remove()
13 | }
14 |
15 | return sourceFile
16 | }
17 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-full/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "style": "new-york",
3 | "tailwind": {
4 | "config": "tailwind.config.ts",
5 | "css": "src/app/globals.css",
6 | "baseColor": "zinc",
7 | "cssVariables": true
8 | },
9 | "rsc": false,
10 | "aliases": {
11 | "utils": "~/lib/utils",
12 | "components": "~/components"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-full/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-config-full",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-full/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "checkJs": true,
7 | "skipLibCheck": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "preserve",
17 | "incremental": true,
18 | "noUncheckedIndexedAccess": true,
19 | "baseUrl": ".",
20 | "paths": {
21 | "~/*": ["./src/*"]
22 | }
23 | },
24 | "include": [
25 | ".eslintrc.cjs",
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | "**/*.cjs",
30 | "**/*.mjs"
31 | ],
32 | "exclude": ["node_modules"]
33 | }
34 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-invalid/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "cn": "./components",
3 | "ui": "./ui",
4 | "does-not-exist": "./does-not-exist"
5 | }
6 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-invalid/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-config-invalid",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-jsx/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "style": "default",
3 | "tsx": false,
4 | "tailwind": {
5 | "config": "./tailwind.config.js",
6 | "css": "./src/assets/css/tailwind.css",
7 | "baseColor": "neutral",
8 | "cssVariables": false
9 | },
10 | "aliases": {
11 | "utils": "@/lib/utils",
12 | "components": "@/components"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-jsx/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "@/*": ["./*"]
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-jsx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-config-partial",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-none/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-config-none",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-partial/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "style": "default",
3 | "tailwind": {
4 | "config": "./tailwind.config.ts",
5 | "css": "./src/assets/css/tailwind.css",
6 | "baseColor": "neutral",
7 | "cssVariables": false
8 | },
9 | "aliases": {
10 | "utils": "@/lib/utils",
11 | "components": "@/components"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-partial/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-config-partial",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/config-partial/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": ["./*"]
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next-src/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next-src/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 |
4 | module.exports = nextConfig
5 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next-src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "text-cli-next-src",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next-src/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
18 |
19 | body {
20 | color: rgb(var(--foreground-rgb));
21 | background: linear-gradient(
22 | to bottom,
23 | transparent,
24 | rgb(var(--background-end-rgb))
25 | )
26 | rgb(var(--background-start-rgb));
27 | }
28 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next-src/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 | 'gradient-conic':
13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 | },
15 | },
16 | },
17 | plugins: [],
18 | }
19 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next-src/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": "node",
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 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
18 |
19 | body {
20 | color: rgb(var(--foreground-rgb));
21 | background: linear-gradient(
22 | to bottom,
23 | transparent,
24 | rgb(var(--background-end-rgb))
25 | )
26 | rgb(var(--background-start-rgb));
27 | }
28 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 |
4 | module.exports = nextConfig
5 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-next",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@types/node": "20.2.5",
13 | "@types/react": "18.2.7",
14 | "@types/react-dom": "18.2.4",
15 | "autoprefixer": "10.4.14",
16 | "eslint": "8.41.0",
17 | "eslint-config-next": "13.4.4",
18 | "next": "13.4.4",
19 | "postcss": "8.4.23",
20 | "react": "18.2.0",
21 | "react-dom": "18.2.0",
22 | "tailwindcss": "3.3.2",
23 | "typescript": "5.0.4"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: "6.0"
2 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/next/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": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-bun/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coincatcher22/ui/cefee5dc6f84b3c5d50b48027c52d578ea300734/packages/cli/test/fixtures/project-bun/bun.lockb
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-bun/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-project-bun",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-npm/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-npm-project",
3 | "version": "1.0.0",
4 | "lockfileVersion": 2,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "npm-project",
9 | "version": "1.0.0",
10 | "license": "MIT"
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-npm/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-project-npm",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-pnpm/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-project-pnpm",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-pnpm/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: '6.0'
2 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-src/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "components": "src/components",
3 | "ui": "src/ui",
4 | "styles": "src/styles/main.css",
5 | "utils": "src/lib/cn.ts",
6 | "tailwindConfig": "tailwind.config.ts"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-src/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-project-src",
3 | "version": "1.0.0",
4 | "lockfileVersion": 2,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "npm-project",
9 | "version": "1.0.0",
10 | "license": "MIT"
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "project-src",
3 | "version": "0.1.0",
4 | "private": true
5 | }
6 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-yarn/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-project-yarn",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "shadcn",
6 | "license": "MIT"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project-yarn/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "tailwindConfig": "./tailwind.config.ts",
3 | "importPaths": {
4 | "styles": "~/styles/globals.css",
5 | "utils:cn": "~/lib/cn.ts",
6 | "components:ui": "~/components/ui"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-project",
3 | "version": "0.1.0",
4 | "private": true
5 | }
6 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/project/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: "6.0"
2 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-var-requires
2 | const path = require("path");
3 |
4 | /** @type {import("eslint").Linter.Config} */
5 | const config = {
6 | overrides: [
7 | {
8 | extends: [
9 | "plugin:@typescript-eslint/recommended-requiring-type-checking",
10 | ],
11 | files: ["*.ts", "*.tsx"],
12 | parserOptions: {
13 | project: path.join(__dirname, "tsconfig.json"),
14 | },
15 | },
16 | ],
17 | parser: "@typescript-eslint/parser",
18 | parserOptions: {
19 | project: path.join(__dirname, "tsconfig.json"),
20 | },
21 | plugins: ["@typescript-eslint"],
22 | extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
23 | rules: {
24 | "@typescript-eslint/consistent-type-imports": [
25 | "warn",
26 | {
27 | prefer: "type-imports",
28 | fixStyle: "inline-type-imports",
29 | },
30 | ],
31 | "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
32 | },
33 | };
34 |
35 | module.exports = config;
36 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # database
12 | /prisma/db.sqlite
13 | /prisma/db.sqlite-journal
14 |
15 | # next.js
16 | /.next/
17 | /out/
18 | next-env.d.ts
19 |
20 | # production
21 | /build
22 |
23 | # misc
24 | .DS_Store
25 | *.pem
26 |
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 |
33 | # local env files
34 | # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
35 | .env
36 | .env*.local
37 |
38 | # vercel
39 | .vercel
40 |
41 | # typescript
42 | *.tsbuildinfo
43 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/next.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
3 | * for Docker builds.
4 | */
5 | await import("./src/env.mjs");
6 |
7 | /** @type {import("next").NextConfig} */
8 | const config = {
9 | reactStrictMode: true,
10 |
11 | /**
12 | * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
13 | * out.
14 | *
15 | * @see https://github.com/vercel/next.js/issues/41980
16 | */
17 | i18n: {
18 | locales: ["en"],
19 | defaultLocale: "en",
20 | },
21 | };
22 | export default config;
23 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-cli-t3-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "build": "next build",
7 | "dev": "next dev",
8 | "lint": "next lint",
9 | "start": "next start"
10 | },
11 | "dependencies": {
12 | "@t3-oss/env-nextjs": "^0.3.1",
13 | "next": "^13.4.2",
14 | "react": "18.2.0",
15 | "react-dom": "18.2.0",
16 | "zod": "^3.21.4"
17 | },
18 | "devDependencies": {
19 | "@types/eslint": "^8.37.0",
20 | "@types/node": "^18.16.0",
21 | "@types/prettier": "^2.7.2",
22 | "@types/react": "^18.2.6",
23 | "@types/react-dom": "^18.2.4",
24 | "@typescript-eslint/eslint-plugin": "^5.59.6",
25 | "@typescript-eslint/parser": "^5.59.6",
26 | "autoprefixer": "^10.4.14",
27 | "eslint": "^8.40.0",
28 | "eslint-config-next": "^13.4.2",
29 | "postcss": "^8.4.21",
30 | "prettier": "^2.8.8",
31 | "prettier-plugin-tailwindcss": "^0.2.8",
32 | "tailwindcss": "^3.3.0",
33 | "typescript": "^5.0.4"
34 | },
35 | "ct3aMetadata": {
36 | "initVersion": "7.13.1"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import { type AppType } from "next/dist/shared/lib/utils";
2 | import "~/styles/globals.css";
3 |
4 | const MyApp: AppType = ({ Component, pageProps }) => {
5 | return ;
6 | };
7 |
8 | export default MyApp;
9 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import { type Config } from "tailwindcss";
2 |
3 | export default {
4 | content: ["./src/**/*.{js,ts,jsx,tsx}"],
5 | theme: {
6 | extend: {},
7 | },
8 | plugins: [],
9 | } satisfies Config;
10 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/t3-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "checkJs": true,
7 | "skipLibCheck": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "preserve",
17 | "incremental": true,
18 | "noUncheckedIndexedAccess": true,
19 | "baseUrl": ".",
20 | "paths": {
21 | "~/*": ["./src/*"]
22 | }
23 | },
24 | "include": [
25 | ".eslintrc.cjs",
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | "**/*.cjs",
30 | "**/*.mjs"
31 | ],
32 | "exclude": ["node_modules"]
33 | }
34 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/with-base-url/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@/*": ["./*"]
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/cli/test/fixtures/without-base-url/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "compilerOptions": {
4 | "paths": {
5 | "~/components/*": ["./components/*"],
6 | "~/lib/*": ["./lib/*"]
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`transform css vars 1`] = `
4 | "import * as React from \\"react\\"
5 | export function Foo() {
6 | return foo
7 | }\\"
8 | "
9 | `;
10 |
11 | exports[`transform css vars 2`] = `
12 | "import * as React from \\"react\\"
13 | export function Foo() {
14 | return foo
15 | }\\"\\"
16 | "
17 | `;
18 |
19 | exports[`transform css vars 3`] = `
20 | "import * as React from \\"react\\"
21 | export function Foo() {
22 | return foo
23 | }\\"\\"
24 | "
25 | `;
26 |
--------------------------------------------------------------------------------
/packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`transform rsc 1`] = `
4 | "import * as React from \\"react\\"
5 | import { Foo } from \\"bar\\"
6 | "
7 | `;
8 |
9 | exports[`transform rsc 2`] = `
10 | "\\"use client\\"
11 |
12 | import * as React from \\"react\\"
13 | import { Foo } from \\"bar\\"
14 | "
15 | `;
16 |
17 | exports[`transform rsc 3`] = `
18 | " import * as React from \\"react\\"
19 | import { Foo } from \\"bar\\"
20 | "
21 | `;
22 |
23 | exports[`transform rsc 4`] = `
24 | "\\"use foo\\"
25 |
26 | import * as React from \\"react\\"
27 | import { Foo } from \\"bar\\"
28 |
29 | \\"use client\\"
30 | "
31 | `;
32 |
--------------------------------------------------------------------------------
/packages/cli/test/utils/get-package-manager.test.ts:
--------------------------------------------------------------------------------
1 | import path from "path"
2 | import { expect, test } from "vitest"
3 |
4 | import { getPackageManager } from "../../src/utils/get-package-manager"
5 |
6 | test("get package manager", async () => {
7 | expect(
8 | await getPackageManager(path.resolve(__dirname, "../fixtures/project-yarn"))
9 | ).toBe("yarn")
10 |
11 | expect(
12 | await getPackageManager(path.resolve(__dirname, "../fixtures/project-npm"))
13 | ).toBe("npm")
14 |
15 | expect(
16 | await getPackageManager(path.resolve(__dirname, "../fixtures/project-pnpm"))
17 | ).toBe("pnpm")
18 |
19 | expect(
20 | await getPackageManager(path.resolve(__dirname, "../fixtures/project-bun"))
21 | ).toBe("bun")
22 |
23 | expect(
24 | await getPackageManager(path.resolve(__dirname, "../fixtures/next"))
25 | ).toBe("pnpm")
26 | })
27 |
--------------------------------------------------------------------------------
/packages/cli/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "isolatedModules": false,
6 | "baseUrl": ".",
7 | "paths": {
8 | "@/*": ["./*"]
9 | }
10 | },
11 | "include": ["src/**/*.ts"],
12 | "exclude": ["node_modules"]
13 | }
14 |
--------------------------------------------------------------------------------
/packages/cli/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup"
2 |
3 | export default defineConfig({
4 | clean: true,
5 | dts: true,
6 | entry: ["src/index.ts"],
7 | format: ["esm"],
8 | sourcemap: true,
9 | target: "esnext",
10 | outDir: "dist",
11 | })
12 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "apps/*"
3 | - "packages/*"
4 | - "templates/*"
5 | - "!**/test/**"
6 |
--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('prettier').Config} */
2 | module.exports = {
3 | endOfLine: "lf",
4 | semi: false,
5 | singleQuote: false,
6 | tabWidth: 2,
7 | trailingComma: "es5",
8 | importOrder: [
9 | "^(react/(.*)$)|^(react$)",
10 | "^(next/(.*)$)|^(next$)",
11 | "",
12 | "",
13 | "^types$",
14 | "^@/types/(.*)$",
15 | "^@/config/(.*)$",
16 | "^@/lib/(.*)$",
17 | "^@/hooks/(.*)$",
18 | "^@/components/ui/(.*)$",
19 | "^@/components/(.*)$",
20 | "^@/registry/(.*)$",
21 | "^@/styles/(.*)$",
22 | "^@/app/(.*)$",
23 | "",
24 | "^[./]",
25 | ],
26 | importOrderSeparation: false,
27 | importOrderSortSpecifiers: true,
28 | importOrderBuiltinModulesToTop: true,
29 | importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
30 | importOrderMergeDuplicateImports: true,
31 | importOrderCombineTypeAndValueImports: true,
32 | plugins: ["@ianvs/prettier-plugin-sort-imports"],
33 | }
34 |
--------------------------------------------------------------------------------
/scripts/sync-templates.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | set -e # bail on errors
4 | GLOB=$1
5 | IS_CI="${CI:-false}"
6 | BASE=$(pwd)
7 | COMMIT_MESSAGE=$(git log -1 --pretty=%B)
8 |
9 | for folder in $GLOB; do
10 | [ -d "$folder" ] || continue
11 | cd $BASE
12 |
13 | if [ -n "$(git status --porcelain)" ]; then
14 | git add .
15 | git commit -m "chore: update template"
16 | git push origin main
17 | fi
18 |
19 | NAME=${folder##*/}
20 | CLONE_DIR="__${NAME}__clone__"
21 |
22 | # sync to read-only clones
23 | # clone, delete files in the clone, and copy (new) files over
24 | # this handles file deletions, additions, and changes seamlessly
25 | # note: redirect output to dev/null to avoid any possibility of leaking token
26 | git clone --quiet --depth 1 git@github.com:shadcn/${NAME}.git $CLONE_DIR > /dev/null
27 | cd $CLONE_DIR
28 | find . | grep -v ".git" | grep -v "^\.*$" | xargs rm -rf # delete all files (to handle deletions in monorepo)
29 | cp -r $BASE/$folder/. .
30 |
31 | if [ -n "$(git status --porcelain)" ]; then
32 | git add .
33 | git commit -m "$COMMIT_MESSAGE"
34 | git push origin main
35 | fi
36 |
37 | cd $BASE
38 | rm -rf $CLONE_DIR
39 | done
40 |
--------------------------------------------------------------------------------
/templates/next-template/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | end_of_line = lf
7 | indent_size = 2
8 | indent_style = space
9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/templates/next-template/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/*
2 | .cache
3 | public
4 | node_modules
5 | *.esm.js
6 |
--------------------------------------------------------------------------------
/templates/next-template/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/eslintrc",
3 | "root": true,
4 | "extends": [
5 | "next/core-web-vitals",
6 | "prettier",
7 | "plugin:tailwindcss/recommended"
8 | ],
9 | "plugins": ["tailwindcss"],
10 | "rules": {
11 | "@next/next/no-html-link-for-pages": "off",
12 | "react/jsx-key": "off",
13 | "tailwindcss/no-custom-classname": "off"
14 | },
15 | "settings": {
16 | "tailwindcss": {
17 | "callees": ["cn"],
18 | "config": "tailwind.config.js"
19 | },
20 | "next": {
21 | "rootDir": ["./"]
22 | }
23 | },
24 | "overrides": [
25 | {
26 | "files": ["*.ts", "*.tsx"],
27 | "parser": "@typescript-eslint/parser"
28 | }
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/templates/next-template/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | .pnp
6 | .pnp.js
7 |
8 | # testing
9 | coverage
10 |
11 | # next.js
12 | .next/
13 | out/
14 | build
15 |
16 | # misc
17 | .DS_Store
18 | *.pem
19 |
20 | # debug
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .pnpm-debug.log*
25 |
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 |
32 | # turbo
33 | .turbo
34 |
35 | .contentlayer
36 | .env
--------------------------------------------------------------------------------
/templates/next-template/.prettierignore:
--------------------------------------------------------------------------------
1 | cache
2 | .cache
3 | package.json
4 | package-lock.json
5 | public
6 | CHANGELOG.md
7 | .yarn
8 | dist
9 | node_modules
10 | .next
11 | build
12 | .contentlayer
--------------------------------------------------------------------------------
/templates/next-template/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
3 | "typescript.enablePromptUseWorkspaceTsdk": true
4 | }
5 |
--------------------------------------------------------------------------------
/templates/next-template/README.md:
--------------------------------------------------------------------------------
1 | # next-template
2 |
3 | A Next.js 13 template for building apps with Radix UI and Tailwind CSS.
4 |
5 | ## Usage
6 |
7 | ```bash
8 | npx create-next-app -e https://github.com/shadcn/next-template
9 | ```
10 |
11 | ## Features
12 |
13 | - Next.js 13 App Directory
14 | - Radix UI Primitives
15 | - Tailwind CSS
16 | - Icons from [Lucide](https://lucide.dev)
17 | - Dark mode with `next-themes`
18 | - Tailwind CSS class sorting, merging and linting.
19 |
20 | ## License
21 |
22 | Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
23 |
--------------------------------------------------------------------------------
/templates/next-template/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "tailwind": {
5 | "config": "tailwind.config.js",
6 | "css": "app/globals.css",
7 | "baseColor": "slate",
8 | "cssVariables": true
9 | },
10 | "rsc": false,
11 | "aliases": {
12 | "utils": "@/lib/utils",
13 | "components": "@/components"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/templates/next-template/components/tailwind-indicator.tsx:
--------------------------------------------------------------------------------
1 | export function TailwindIndicator() {
2 | if (process.env.NODE_ENV === "production") return null
3 |
4 | return (
5 |
6 |
xs
7 |
sm
8 |
md
9 |
lg
10 |
xl
11 |
2xl
12 |