mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-24 13:15:45 +00:00
feat: add manual installation for components (#666)
This commit is contained in:
shadcn
GitHub
@@ -1,9 +1,269 @@
|
||||
// @ts-nocheck
|
||||
// This file is autogenerated by scripts/build-registry.ts
|
||||
// Do not edit this file directly.
|
||||
import * as React from "react"
|
||||
|
||||
export const Index: Record<string, any> = {
|
||||
"default": {
|
||||
"accordion": {
|
||||
name: "accordion",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/accordion")),
|
||||
files: ["registry/default/ui/accordion.tsx"],
|
||||
},
|
||||
"alert": {
|
||||
name: "alert",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/alert")),
|
||||
files: ["registry/default/ui/alert.tsx"],
|
||||
},
|
||||
"alert-dialog": {
|
||||
name: "alert-dialog",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["button"],
|
||||
component: React.lazy(() => import("@/registry/default/ui/alert-dialog")),
|
||||
files: ["registry/default/ui/alert-dialog.tsx"],
|
||||
},
|
||||
"aspect-ratio": {
|
||||
name: "aspect-ratio",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/aspect-ratio")),
|
||||
files: ["registry/default/ui/aspect-ratio.tsx"],
|
||||
},
|
||||
"avatar": {
|
||||
name: "avatar",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/avatar")),
|
||||
files: ["registry/default/ui/avatar.tsx"],
|
||||
},
|
||||
"badge": {
|
||||
name: "badge",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/badge")),
|
||||
files: ["registry/default/ui/badge.tsx"],
|
||||
},
|
||||
"button": {
|
||||
name: "button",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/button")),
|
||||
files: ["registry/default/ui/button.tsx"],
|
||||
},
|
||||
"calendar": {
|
||||
name: "calendar",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["button"],
|
||||
component: React.lazy(() => import("@/registry/default/ui/calendar")),
|
||||
files: ["registry/default/ui/calendar.tsx"],
|
||||
},
|
||||
"card": {
|
||||
name: "card",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/card")),
|
||||
files: ["registry/default/ui/card.tsx"],
|
||||
},
|
||||
"checkbox": {
|
||||
name: "checkbox",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/checkbox")),
|
||||
files: ["registry/default/ui/checkbox.tsx"],
|
||||
},
|
||||
"collapsible": {
|
||||
name: "collapsible",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/collapsible")),
|
||||
files: ["registry/default/ui/collapsible.tsx"],
|
||||
},
|
||||
"command": {
|
||||
name: "command",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["dialog"],
|
||||
component: React.lazy(() => import("@/registry/default/ui/command")),
|
||||
files: ["registry/default/ui/command.tsx"],
|
||||
},
|
||||
"context-menu": {
|
||||
name: "context-menu",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/context-menu")),
|
||||
files: ["registry/default/ui/context-menu.tsx"],
|
||||
},
|
||||
"dialog": {
|
||||
name: "dialog",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/dialog")),
|
||||
files: ["registry/default/ui/dialog.tsx"],
|
||||
},
|
||||
"dropdown-menu": {
|
||||
name: "dropdown-menu",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/dropdown-menu")),
|
||||
files: ["registry/default/ui/dropdown-menu.tsx"],
|
||||
},
|
||||
"form": {
|
||||
name: "form",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["button","label"],
|
||||
component: React.lazy(() => import("@/registry/default/ui/form")),
|
||||
files: ["registry/default/ui/form.tsx"],
|
||||
},
|
||||
"hover-card": {
|
||||
name: "hover-card",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/hover-card")),
|
||||
files: ["registry/default/ui/hover-card.tsx"],
|
||||
},
|
||||
"input": {
|
||||
name: "input",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/input")),
|
||||
files: ["registry/default/ui/input.tsx"],
|
||||
},
|
||||
"label": {
|
||||
name: "label",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/label")),
|
||||
files: ["registry/default/ui/label.tsx"],
|
||||
},
|
||||
"menubar": {
|
||||
name: "menubar",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/menubar")),
|
||||
files: ["registry/default/ui/menubar.tsx"],
|
||||
},
|
||||
"navigation-menu": {
|
||||
name: "navigation-menu",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/navigation-menu")),
|
||||
files: ["registry/default/ui/navigation-menu.tsx"],
|
||||
},
|
||||
"popover": {
|
||||
name: "popover",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/popover")),
|
||||
files: ["registry/default/ui/popover.tsx"],
|
||||
},
|
||||
"progress": {
|
||||
name: "progress",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/progress")),
|
||||
files: ["registry/default/ui/progress.tsx"],
|
||||
},
|
||||
"radio-group": {
|
||||
name: "radio-group",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/radio-group")),
|
||||
files: ["registry/default/ui/radio-group.tsx"],
|
||||
},
|
||||
"scroll-area": {
|
||||
name: "scroll-area",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/scroll-area")),
|
||||
files: ["registry/default/ui/scroll-area.tsx"],
|
||||
},
|
||||
"select": {
|
||||
name: "select",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/select")),
|
||||
files: ["registry/default/ui/select.tsx"],
|
||||
},
|
||||
"separator": {
|
||||
name: "separator",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/separator")),
|
||||
files: ["registry/default/ui/separator.tsx"],
|
||||
},
|
||||
"sheet": {
|
||||
name: "sheet",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/sheet")),
|
||||
files: ["registry/default/ui/sheet.tsx"],
|
||||
},
|
||||
"skeleton": {
|
||||
name: "skeleton",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/skeleton")),
|
||||
files: ["registry/default/ui/skeleton.tsx"],
|
||||
},
|
||||
"slider": {
|
||||
name: "slider",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/slider")),
|
||||
files: ["registry/default/ui/slider.tsx"],
|
||||
},
|
||||
"switch": {
|
||||
name: "switch",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/switch")),
|
||||
files: ["registry/default/ui/switch.tsx"],
|
||||
},
|
||||
"table": {
|
||||
name: "table",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/table")),
|
||||
files: ["registry/default/ui/table.tsx"],
|
||||
},
|
||||
"tabs": {
|
||||
name: "tabs",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/tabs")),
|
||||
files: ["registry/default/ui/tabs.tsx"],
|
||||
},
|
||||
"textarea": {
|
||||
name: "textarea",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/textarea")),
|
||||
files: ["registry/default/ui/textarea.tsx"],
|
||||
},
|
||||
"toast": {
|
||||
name: "toast",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/toast")),
|
||||
files: ["registry/default/ui/toast.tsx","registry/default/ui/use-toast.ts","registry/default/ui/toaster.tsx"],
|
||||
},
|
||||
"toggle": {
|
||||
name: "toggle",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/toggle")),
|
||||
files: ["registry/default/ui/toggle.tsx"],
|
||||
},
|
||||
"tooltip": {
|
||||
name: "tooltip",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/tooltip")),
|
||||
files: ["registry/default/ui/tooltip.tsx"],
|
||||
},
|
||||
"accordion-demo": {
|
||||
name: "accordion-demo",
|
||||
type: "components:example",
|
||||
@@ -747,6 +1007,265 @@ export const Index: Record<string, any> = {
|
||||
files: ["registry/default/example/mode-toggle.tsx"],
|
||||
},
|
||||
}, "new-york": {
|
||||
"accordion": {
|
||||
name: "accordion",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/accordion")),
|
||||
files: ["registry/new-york/ui/accordion.tsx"],
|
||||
},
|
||||
"alert": {
|
||||
name: "alert",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/alert")),
|
||||
files: ["registry/new-york/ui/alert.tsx"],
|
||||
},
|
||||
"alert-dialog": {
|
||||
name: "alert-dialog",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["button"],
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/alert-dialog")),
|
||||
files: ["registry/new-york/ui/alert-dialog.tsx"],
|
||||
},
|
||||
"aspect-ratio": {
|
||||
name: "aspect-ratio",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/aspect-ratio")),
|
||||
files: ["registry/new-york/ui/aspect-ratio.tsx"],
|
||||
},
|
||||
"avatar": {
|
||||
name: "avatar",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/avatar")),
|
||||
files: ["registry/new-york/ui/avatar.tsx"],
|
||||
},
|
||||
"badge": {
|
||||
name: "badge",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/badge")),
|
||||
files: ["registry/new-york/ui/badge.tsx"],
|
||||
},
|
||||
"button": {
|
||||
name: "button",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/button")),
|
||||
files: ["registry/new-york/ui/button.tsx"],
|
||||
},
|
||||
"calendar": {
|
||||
name: "calendar",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["button"],
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/calendar")),
|
||||
files: ["registry/new-york/ui/calendar.tsx"],
|
||||
},
|
||||
"card": {
|
||||
name: "card",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/card")),
|
||||
files: ["registry/new-york/ui/card.tsx"],
|
||||
},
|
||||
"checkbox": {
|
||||
name: "checkbox",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/checkbox")),
|
||||
files: ["registry/new-york/ui/checkbox.tsx"],
|
||||
},
|
||||
"collapsible": {
|
||||
name: "collapsible",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/collapsible")),
|
||||
files: ["registry/new-york/ui/collapsible.tsx"],
|
||||
},
|
||||
"command": {
|
||||
name: "command",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["dialog"],
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/command")),
|
||||
files: ["registry/new-york/ui/command.tsx"],
|
||||
},
|
||||
"context-menu": {
|
||||
name: "context-menu",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/context-menu")),
|
||||
files: ["registry/new-york/ui/context-menu.tsx"],
|
||||
},
|
||||
"dialog": {
|
||||
name: "dialog",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/dialog")),
|
||||
files: ["registry/new-york/ui/dialog.tsx"],
|
||||
},
|
||||
"dropdown-menu": {
|
||||
name: "dropdown-menu",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/dropdown-menu")),
|
||||
files: ["registry/new-york/ui/dropdown-menu.tsx"],
|
||||
},
|
||||
"form": {
|
||||
name: "form",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["button","label"],
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/form")),
|
||||
files: ["registry/new-york/ui/form.tsx"],
|
||||
},
|
||||
"hover-card": {
|
||||
name: "hover-card",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/hover-card")),
|
||||
files: ["registry/new-york/ui/hover-card.tsx"],
|
||||
},
|
||||
"input": {
|
||||
name: "input",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/input")),
|
||||
files: ["registry/new-york/ui/input.tsx"],
|
||||
},
|
||||
"label": {
|
||||
name: "label",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/label")),
|
||||
files: ["registry/new-york/ui/label.tsx"],
|
||||
},
|
||||
"menubar": {
|
||||
name: "menubar",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/menubar")),
|
||||
files: ["registry/new-york/ui/menubar.tsx"],
|
||||
},
|
||||
"navigation-menu": {
|
||||
name: "navigation-menu",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/navigation-menu")),
|
||||
files: ["registry/new-york/ui/navigation-menu.tsx"],
|
||||
},
|
||||
"popover": {
|
||||
name: "popover",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/popover")),
|
||||
files: ["registry/new-york/ui/popover.tsx"],
|
||||
},
|
||||
"progress": {
|
||||
name: "progress",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/progress")),
|
||||
files: ["registry/new-york/ui/progress.tsx"],
|
||||
},
|
||||
"radio-group": {
|
||||
name: "radio-group",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/radio-group")),
|
||||
files: ["registry/new-york/ui/radio-group.tsx"],
|
||||
},
|
||||
"scroll-area": {
|
||||
name: "scroll-area",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/scroll-area")),
|
||||
files: ["registry/new-york/ui/scroll-area.tsx"],
|
||||
},
|
||||
"select": {
|
||||
name: "select",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/select")),
|
||||
files: ["registry/new-york/ui/select.tsx"],
|
||||
},
|
||||
"separator": {
|
||||
name: "separator",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/separator")),
|
||||
files: ["registry/new-york/ui/separator.tsx"],
|
||||
},
|
||||
"sheet": {
|
||||
name: "sheet",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/sheet")),
|
||||
files: ["registry/new-york/ui/sheet.tsx"],
|
||||
},
|
||||
"skeleton": {
|
||||
name: "skeleton",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/skeleton")),
|
||||
files: ["registry/new-york/ui/skeleton.tsx"],
|
||||
},
|
||||
"slider": {
|
||||
name: "slider",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/slider")),
|
||||
files: ["registry/new-york/ui/slider.tsx"],
|
||||
},
|
||||
"switch": {
|
||||
name: "switch",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/switch")),
|
||||
files: ["registry/new-york/ui/switch.tsx"],
|
||||
},
|
||||
"table": {
|
||||
name: "table",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/table")),
|
||||
files: ["registry/new-york/ui/table.tsx"],
|
||||
},
|
||||
"tabs": {
|
||||
name: "tabs",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/tabs")),
|
||||
files: ["registry/new-york/ui/tabs.tsx"],
|
||||
},
|
||||
"textarea": {
|
||||
name: "textarea",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/textarea")),
|
||||
files: ["registry/new-york/ui/textarea.tsx"],
|
||||
},
|
||||
"toast": {
|
||||
name: "toast",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/toast")),
|
||||
files: ["registry/new-york/ui/toast.tsx","registry/new-york/ui/use-toast.ts","registry/new-york/ui/toaster.tsx"],
|
||||
},
|
||||
"toggle": {
|
||||
name: "toggle",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/toggle")),
|
||||
files: ["registry/new-york/ui/toggle.tsx"],
|
||||
},
|
||||
"tooltip": {
|
||||
name: "tooltip",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/new-york/ui/tooltip")),
|
||||
files: ["registry/new-york/ui/tooltip.tsx"],
|
||||
},
|
||||
"accordion-demo": {
|
||||
name: "accordion-demo",
|
||||
type: "components:example",
|
||||
|
||||
@@ -40,7 +40,7 @@ export function CodeBlockWrapper({
|
||||
</CollapsibleContent>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute flex items-center justify-center bg-gradient-to-b from-background/30 to-muted/90 p-2",
|
||||
"absolute flex items-center justify-center bg-gradient-to-b from-zinc-700/30 to-zinc-950/90 p-2",
|
||||
isOpened ? "inset-x-0 bottom-0 h-12" : "inset-0"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -9,7 +9,11 @@ interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
src: string
|
||||
}
|
||||
|
||||
export function ComponentSource({ children, className }: ComponentSourceProps) {
|
||||
export function ComponentSource({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: ComponentSourceProps) {
|
||||
return (
|
||||
<CodeBlockWrapper
|
||||
expandButtonTitle="Expand"
|
||||
|
||||
@@ -7,12 +7,14 @@ import { NpmCommands } from "types/unist"
|
||||
|
||||
import { Event } from "@/lib/events"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useConfig } from "@/hooks/use-config"
|
||||
import { Callout } from "@/components/callout"
|
||||
import { CodeBlockWrapper } from "@/components/code-block-wrapper"
|
||||
import { ComponentExample } from "@/components/component-example"
|
||||
import { ComponentPreview } from "@/components/component-preview"
|
||||
import { ComponentSource } from "@/components/component-source"
|
||||
import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button"
|
||||
import { StyleWrapper } from "@/components/style-wrapper"
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
@@ -25,6 +27,13 @@ import {
|
||||
AlertTitle,
|
||||
} from "@/registry/new-york/ui/alert"
|
||||
import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/new-york/ui/tabs"
|
||||
import { Style } from "@/registry/styles"
|
||||
|
||||
const components = {
|
||||
Accordion,
|
||||
@@ -164,15 +173,17 @@ const components = {
|
||||
__withMeta__,
|
||||
__src__,
|
||||
__event__,
|
||||
__style__,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLPreElement> & {
|
||||
__style__?: Style["name"]
|
||||
__rawString__?: string
|
||||
__withMeta__?: boolean
|
||||
__src__?: string
|
||||
__event__?: Event["name"]
|
||||
} & NpmCommands) => {
|
||||
return (
|
||||
<>
|
||||
<StyleWrapper styleName={__style__}>
|
||||
<pre
|
||||
className={cn(
|
||||
"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
|
||||
@@ -198,7 +209,7 @@ const components = {
|
||||
className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</StyleWrapper>
|
||||
)
|
||||
},
|
||||
code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
|
||||
@@ -219,12 +230,60 @@ const components = {
|
||||
CodeBlockWrapper: ({ ...props }) => (
|
||||
<CodeBlockWrapper className="rounded-md border" {...props} />
|
||||
),
|
||||
Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
|
||||
<h3
|
||||
className={cn(
|
||||
"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
Steps: ({ ...props }) => (
|
||||
<div
|
||||
className="[&>h3]:step mb-12 ml-4 border-l pl-8 [counter-reset:step]"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => (
|
||||
<Tabs className={cn("relative mt-6 w-full", className)} {...props} />
|
||||
),
|
||||
TabsList: ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsList>) => (
|
||||
<TabsList
|
||||
className={cn(
|
||||
"w-full justify-start rounded-none border-b bg-transparent p-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
TabsTrigger: ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsTrigger>) => (
|
||||
<TabsTrigger
|
||||
className={cn(
|
||||
"relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
TabsContent: ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsContent>) => (
|
||||
<TabsContent
|
||||
className={cn(
|
||||
"relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-normal",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
}
|
||||
|
||||
interface MdxProps {
|
||||
@@ -232,7 +291,10 @@ interface MdxProps {
|
||||
}
|
||||
|
||||
export function Mdx({ code }: MdxProps) {
|
||||
const Component = useMDXComponent(code)
|
||||
const [config] = useConfig()
|
||||
const Component = useMDXComponent(code, {
|
||||
style: config.style,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="mdx">
|
||||
|
||||
20
apps/www/components/style-wrapper.tsx
Normal file
20
apps/www/components/style-wrapper.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { useConfig } from "@/hooks/use-config"
|
||||
import { Style } from "@/registry/styles"
|
||||
|
||||
interface StyleWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
styleName?: Style["name"]
|
||||
}
|
||||
|
||||
export function StyleWrapper({ styleName, children }: StyleWrapperProps) {
|
||||
const [config] = useConfig()
|
||||
|
||||
if (!styleName || config.style === styleName) {
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -14,15 +14,24 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="cli">
|
||||
|
||||
<Steps>
|
||||
|
||||
### Command
|
||||
<Step>Run the following command:</Step>
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add accordion
|
||||
```
|
||||
|
||||
### tailwind.config.js
|
||||
<Step>Update `tailwind.config.js`</Step>
|
||||
|
||||
Add the following animations to your `tailwind.config.js` file:
|
||||
|
||||
@@ -50,7 +59,55 @@ module.exports = {
|
||||
}
|
||||
```
|
||||
|
||||
### Usage
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="accordion" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
<Step>Update `tailwind.config.js`</Step>
|
||||
|
||||
Add the following animations to your `tailwind.config.js` file:
|
||||
|
||||
```js title="tailwind.config.js" {5-18}
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: 0 },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -71,5 +128,3 @@ import {
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -12,15 +12,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add alert-dialog
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="alert-dialog" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -54,5 +76,3 @@ import {
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -8,15 +8,37 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add alert
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="alert" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
@@ -32,8 +54,6 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
</Alert>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add aspect-ratio
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="aspect-ratio" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import Image from "next/image"
|
||||
@@ -38,5 +60,3 @@ import { AspectRatio } from "@/components/ui/aspect-ratio"
|
||||
</AspectRatio>
|
||||
</div>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add avatar
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="avatar" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
@@ -31,5 +53,3 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
<AvatarFallback>CN</AvatarFallback>
|
||||
</Avatar>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -8,15 +8,37 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add badge
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="badge" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
@@ -26,8 +48,6 @@ import { Badge } from "@/components/ui/badge"
|
||||
<Badge variant="outline">Badge</Badge>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
### Link
|
||||
|
||||
You can use the `badgeVariants` helper to create a link that looks like a badge.
|
||||
|
||||
@@ -9,15 +9,37 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add button
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="button" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Button } from "@/components/ui/button"
|
||||
@@ -27,9 +49,7 @@ import { Button } from "@/components/ui/button"
|
||||
<Button variant="outline">Button</Button>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
### Link
|
||||
## Link
|
||||
|
||||
You can use the `buttonVariants` helper to create a link that looks like a button.
|
||||
|
||||
|
||||
@@ -12,15 +12,37 @@ The `Calendar` component is built on top of [React DayPicker](https://react-day-
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add calendar
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="calendar" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Calendar } from "@/components/ui/calendar"
|
||||
@@ -41,8 +63,6 @@ return (
|
||||
|
||||
See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
|
||||
|
||||
</Steps>
|
||||
|
||||
## Date Picker
|
||||
|
||||
You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
|
||||
|
||||
@@ -4,19 +4,41 @@ description: Displays a card with header, content, and footer.
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview name="card-demo" />
|
||||
<ComponentPreview name="card-with-form" />
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add card
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="card" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -44,8 +66,6 @@ import {
|
||||
</Card>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
<ComponentPreview name="card-with-form" />
|
||||
<ComponentPreview name="card-demo" />
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add checkbox
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="checkbox" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
@@ -29,8 +51,6 @@ import { Checkbox } from "@/components/ui/checkbox"
|
||||
<Checkbox />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### With text
|
||||
@@ -39,7 +59,7 @@ import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentPreview name="checkbox-with-disabled" />
|
||||
<ComponentPreview name="checkbox-disabled" />
|
||||
|
||||
### Form
|
||||
|
||||
|
||||
@@ -12,15 +12,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add collapsible
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="collapsible" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -39,5 +61,3 @@ import {
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -8,13 +8,11 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
|
||||
|
||||
### About
|
||||
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
|
||||
|
||||
The Combobox is built using a composition of the `<Popover />` and the `<Command />` components. See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
|
||||
|
||||
### Usage
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
@@ -109,8 +107,6 @@ export function ComboboxDemo() {
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Combobox
|
||||
|
||||
@@ -16,15 +16,37 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add command
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="command" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -59,10 +81,6 @@ import {
|
||||
</Command>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Dialog
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add context-menu
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="context-menu" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -41,5 +63,3 @@ import {
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -8,11 +8,9 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
|
||||
|
||||
### About
|
||||
|
||||
The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components. See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
|
||||
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -64,8 +62,6 @@ export function DatePickerDemo() {
|
||||
|
||||
See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Date Picker
|
||||
|
||||
@@ -12,15 +12,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add dialog
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="dialog" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -48,10 +70,6 @@ import {
|
||||
</Dialog>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
|
||||
|
||||
@@ -12,15 +12,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add dropdown-menu
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="dropdown-menu" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -47,10 +69,6 @@ import {
|
||||
</DropdownMenu>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Checkboxes
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add hover-card
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="hover-card" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -37,5 +59,3 @@ import {
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -8,15 +8,37 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add input
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="input" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Input } from "@/components/ui/input"
|
||||
@@ -26,10 +48,6 @@ import { Input } from "@/components/ui/input"
|
||||
<Input />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add label
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="label" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Label } from "@/components/ui/label"
|
||||
@@ -28,5 +50,3 @@ import { Label } from "@/components/ui/label"
|
||||
```tsx
|
||||
<Label htmlFor="email">Your email address</Label>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add menubar
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="menubar" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -50,5 +72,3 @@ import {
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add navigation-menu
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="navigation-menu" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -47,8 +69,6 @@ import {
|
||||
</NavigationMenu>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Link Component
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add popover
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="popover" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -35,5 +57,3 @@ import {
|
||||
<PopoverContent>Place content for the popover here.</PopoverContent>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add progress
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="progress" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
@@ -28,5 +50,3 @@ import { Progress } from "@/components/ui/progress"
|
||||
```tsx
|
||||
<Progress value={33} />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add radio-group
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="radio-group" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Label } from "@/components/ui/label"
|
||||
@@ -39,8 +61,6 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
</RadioGroup>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Form
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add scroll-area
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="scroll-area" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
@@ -35,5 +57,3 @@ import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
started laughing, they couldn't stop.
|
||||
</ScrollArea>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -12,15 +12,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add select
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="select" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -45,10 +67,6 @@ import {
|
||||
</Select>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Form
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### CommandMenu
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add separator
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="separator" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
@@ -28,5 +50,3 @@ import { Separator } from "@/components/ui/separator"
|
||||
```tsx
|
||||
<Separator />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,14 +11,36 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add sheet
|
||||
```
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="sheet" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
### Usage
|
||||
|
||||
```tsx
|
||||
@@ -47,10 +69,6 @@ import {
|
||||
</Sheet>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Side
|
||||
|
||||
@@ -8,15 +8,41 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add skeleton
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="skeleton" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add skeleton
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
@@ -25,5 +51,3 @@ import { Skeleton } from "@/components/ui/skeleton"
|
||||
```tsx
|
||||
<Skeleton className="w-[100px] h-[20px] rounded-full" />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add slider
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="slider" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Slider } from "@/components/ui/slider"
|
||||
@@ -28,5 +50,3 @@ import { Slider } from "@/components/ui/slider"
|
||||
```tsx
|
||||
<Slider defaultValue={[33]} max={100} step={1} />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add switch
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="switch" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
@@ -29,8 +51,6 @@ import { Switch } from "@/components/ui/switch"
|
||||
<Switch />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Form
|
||||
|
||||
@@ -8,15 +8,37 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add table
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="table" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -52,8 +74,6 @@ import {
|
||||
</Table>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Data Table
|
||||
|
||||
You can use the `<Table />` component to build more complex data tables. Combine it with [@tanstack/react-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add tabs
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="tabs" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
@@ -35,5 +57,3 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
<TabsContent value="password">Change your password here.</TabsContent>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -8,15 +8,37 @@ component: true
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add textarea
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="textarea" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
@@ -26,8 +48,6 @@ import { Textarea } from "@/components/ui/textarea"
|
||||
<Textarea />
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
@@ -11,36 +11,23 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
<Steps>
|
||||
|
||||
### Command
|
||||
<Step>Run the following command:</Step>
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add toast
|
||||
npx shadcn-ui@latest add avatar
|
||||
```
|
||||
|
||||
### Toaster
|
||||
|
||||
Add the `<Toaster />` component to your app.
|
||||
|
||||
The `<Toaster />` component is where your toasts are displayed. You can place it anywhere in your app, but it's recommended to place it at the root of your app.
|
||||
|
||||
#### Pages
|
||||
|
||||
```tsx title="_app.tsx" {1,7}
|
||||
import { Toaster } from "@/components/ui/toaster"
|
||||
|
||||
export default function App({ Component, pageProps }) {
|
||||
return (
|
||||
<Steps>
|
||||
<Component {...pageProps} />
|
||||
<Toaster />
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### App Directory
|
||||
<Step>Add the Toaster component</Step>
|
||||
|
||||
```tsx title="app/layout.tsx" {1,9}
|
||||
import { Toaster } from "@/components/ui/toaster"
|
||||
@@ -58,7 +45,45 @@ export default function RootLayout({ children }) {
|
||||
}
|
||||
```
|
||||
|
||||
### Usage
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="avatar" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
<Step>Add the Toaster component</Step>
|
||||
|
||||
```tsx title="app/layout.tsx" {1,9}
|
||||
import { Toaster } from "@/components/ui/toaster"
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head />
|
||||
<body>
|
||||
<main>{children}</main>
|
||||
<Toaster />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
The `useToast` hook returns a `toast` function that you can use to display a toast.
|
||||
|
||||
@@ -91,8 +116,6 @@ To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in
|
||||
|
||||
</Callout>
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add toggle
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="toggle" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Toggle } from "@/components/ui/toggle"
|
||||
@@ -29,8 +51,6 @@ import { Toggle } from "@/components/ui/toggle"
|
||||
<Toggle>Toggle</Toggle>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Examples
|
||||
|
||||
### Default
|
||||
|
||||
@@ -11,15 +11,37 @@ radix:
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
### Command
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add tooltip
|
||||
```
|
||||
|
||||
### Usage
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="tooltip" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
@@ -40,5 +62,3 @@ import {
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -108,6 +108,7 @@ export default makeSource({
|
||||
|
||||
node.__rawString__ = codeEl.children?.[0].value
|
||||
node.__src__ = node.properties?.__src__
|
||||
node.__style__ = node.properties?.__style__
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -158,6 +159,10 @@ export default makeSource({
|
||||
if (node.__event__) {
|
||||
preElement.properties["__event__"] = node.__event__
|
||||
}
|
||||
|
||||
if (node.__style__) {
|
||||
preElement.properties["__style__"] = node.__style__
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -12,6 +12,68 @@ export function rehypeComponent() {
|
||||
visit(tree, (node: UnistNode) => {
|
||||
const { value: src } = getNodeAttributeByName(node, "src") || {}
|
||||
|
||||
if (node.name === "ComponentSource") {
|
||||
const name = getNodeAttributeByName(node, "name")?.value as string
|
||||
|
||||
if (!name) {
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
for (const style of styles) {
|
||||
const component = Index[style.name][name]
|
||||
const src = component.files[0]
|
||||
|
||||
// Read the source file.
|
||||
const filePath = path.join(process.cwd(), src)
|
||||
let source = fs.readFileSync(filePath, "utf8")
|
||||
|
||||
// Replace imports.
|
||||
// TODO: Use @swc/core and a visitor to replace this.
|
||||
// For now a simple regex should do.
|
||||
source = source.replaceAll(
|
||||
`@/registry/${style.name}/`,
|
||||
"@/components/"
|
||||
)
|
||||
source = source.replaceAll("export default", "export")
|
||||
|
||||
// Add code as children so that rehype can take over at build time.
|
||||
node.children?.push(
|
||||
u("element", {
|
||||
tagName: "pre",
|
||||
properties: {
|
||||
__src__: src,
|
||||
__style__: style.name,
|
||||
},
|
||||
attributes: [
|
||||
{
|
||||
name: "styleName",
|
||||
type: "mdxJsxAttribute",
|
||||
value: style.name,
|
||||
},
|
||||
],
|
||||
children: [
|
||||
u("element", {
|
||||
tagName: "code",
|
||||
properties: {
|
||||
className: ["language-tsx"],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "text",
|
||||
value: source,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
})
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
if (node.name === "ComponentPreview") {
|
||||
const name = getNodeAttributeByName(node, "name")?.value as string
|
||||
|
||||
|
||||
@@ -65,7 +65,9 @@ function getItems(node, current): Items {
|
||||
|
||||
const getToc = () => (node, file) => {
|
||||
const table = toc(node)
|
||||
file.data = getItems(table.map, {})
|
||||
const items = getItems(table.map, {})
|
||||
|
||||
file.data = items
|
||||
}
|
||||
|
||||
export type TableOfContents = Items
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"files": [
|
||||
{
|
||||
"name": "toggle.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"bg-transparent border border-input hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-10 px-3\",\n sm: \"h-9 px-2.5\",\n lg: \"h-11 px-5\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-10 px-3\",\n sm: \"h-9 px-2.5\",\n lg: \"h-11 px-5\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"files": [
|
||||
{
|
||||
"name": "button.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-7 rounded-md px-3 text-xs\",\n lg: \"h-9 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"files": [
|
||||
{
|
||||
"name": "toggle.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-9 px-3\",\n sm: \"h-7 px-1.5\",\n lg: \"h-9 px-3\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-9 px-3\",\n sm: \"h-8 px-2\",\n lg: \"h-10 px-3\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
|
||||
@@ -22,7 +22,8 @@ if (!result.success) {
|
||||
// ----------------------------------------------------------------------------
|
||||
// Build __registry__/index.tsx.
|
||||
// ----------------------------------------------------------------------------
|
||||
let index = `// This file is autogenerated by scripts/build-registry.ts
|
||||
let index = `// @ts-nocheck
|
||||
// This file is autogenerated by scripts/build-registry.ts
|
||||
// Do not edit this file directly.
|
||||
import * as React from "react"
|
||||
|
||||
@@ -34,9 +35,9 @@ for (const style of styles) {
|
||||
|
||||
// Build style index.
|
||||
for (const item of result.data) {
|
||||
if (item.type === "components:ui") {
|
||||
continue
|
||||
}
|
||||
// if (item.type === "components:ui") {
|
||||
// continue
|
||||
// }
|
||||
|
||||
const resolveFiles = item.files.map(
|
||||
(file) => `registry/${style.name}/${file}`
|
||||
|
||||
Reference in New Issue
Block a user