mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
18 lines
11 KiB
JSON
18 lines
11 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "badge-example",
|
|
"title": "Badge",
|
|
"registryDependencies": [
|
|
"badge",
|
|
"spinner",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/badge-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Spinner } from \"@/registry/base-nova/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n return (\n <ExampleWrapper className=\"lg:grid-cols-1\">\n <BadgeVariants />\n <BadgeWithIconLeft />\n <BadgeWithIconRight />\n <BadgeWithSpinner />\n <BadgeAsLink />\n <BadgeLongText />\n <BadgeCustomColors />\n </ExampleWrapper>\n )\n}\n\nfunction BadgeVariants() {\n return (\n <Example title=\"Variants\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>Default</Badge>\n <Badge variant=\"secondary\">Secondary</Badge>\n <Badge variant=\"destructive\">Destructive</Badge>\n <Badge variant=\"outline\">Outline</Badge>\n <Badge variant=\"ghost\">Ghost</Badge>\n <Badge variant=\"link\">Link</Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeWithIconLeft() {\n return (\n <Example title=\"Icon Left\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n data-icon=\"inline-start\"\n />\n Default\n </Badge>\n <Badge variant=\"secondary\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n data-icon=\"inline-start\"\n />\n Secondary\n </Badge>\n <Badge variant=\"destructive\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n data-icon=\"inline-start\"\n />\n Destructive\n </Badge>\n <Badge variant=\"outline\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n data-icon=\"inline-start\"\n />\n Outline\n </Badge>\n <Badge variant=\"ghost\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n data-icon=\"inline-start\"\n />\n Ghost\n </Badge>\n <Badge variant=\"link\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n remixicon=\"RiCheckboxCircleLine\"\n data-icon=\"inline-start\"\n />\n Link\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeWithIconRight() {\n return (\n <Example title=\"Icon Right\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>\n Default\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"secondary\">\n Secondary\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"destructive\">\n Destructive\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"outline\">\n Outline\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"ghost\">\n Ghost\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"link\">\n Link\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n data-icon=\"inline-end\"\n />\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeWithSpinner() {\n return (\n <Example title=\"With Spinner\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>\n <Spinner data-icon=\"inline-start\" />\n Default\n </Badge>\n <Badge variant=\"secondary\">\n <Spinner data-icon=\"inline-start\" />\n Secondary\n </Badge>\n <Badge variant=\"destructive\">\n <Spinner data-icon=\"inline-start\" />\n Destructive\n </Badge>\n <Badge variant=\"outline\">\n <Spinner data-icon=\"inline-start\" />\n Outline\n </Badge>\n <Badge variant=\"ghost\">\n <Spinner data-icon=\"inline-start\" />\n Ghost\n </Badge>\n <Badge variant=\"link\">\n <Spinner data-icon=\"inline-start\" />\n Link\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeAsLink() {\n return (\n <Example title=\"asChild\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRightIcon\"\n phosphor=\"ArrowUpRightIcon\"\n remixicon=\"RiArrowRightUpLine\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n <Badge\n variant=\"secondary\"\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRightIcon\"\n phosphor=\"ArrowUpRightIcon\"\n remixicon=\"RiArrowRightUpLine\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n <Badge\n variant=\"destructive\"\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRightIcon\"\n phosphor=\"ArrowUpRightIcon\"\n remixicon=\"RiArrowRightUpLine\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n <Badge\n variant=\"ghost\"\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowUpRightIcon\"\n remixicon=\"RiArrowRightUpLine\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n </div>\n </Example>\n )\n}\n\nfunction BadgeLongText() {\n return (\n <Example title=\"Long Text\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge variant=\"secondary\">\n A badge with a lot of text to see how it wraps\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeCustomColors() {\n return (\n <Example title=\"Custom Colors\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n Blue\n </Badge>\n <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n Green\n </Badge>\n <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n Sky\n </Badge>\n <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n Purple\n </Badge>\n <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n Blue\n </Badge>\n <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n Green\n </Badge>\n <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n Sky\n </Badge>\n <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n Purple\n </Badge>\n <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n Red\n </Badge>\n </div>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |