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
20 lines
8.4 KiB
JSON
20 lines
8.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "empty-example",
|
|
"title": "Empty",
|
|
"registryDependencies": [
|
|
"button",
|
|
"empty",
|
|
"input-group",
|
|
"kbd",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/empty-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/registry/base-nova/ui/empty\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n return (\n <ExampleWrapper>\n <EmptyBasic />\n <EmptyWithMutedBackground />\n <EmptyWithBorder />\n <EmptyWithIcon />\n <EmptyWithMutedBackgroundAlt />\n <EmptyInCard />\n </ExampleWrapper>\n )\n}\n\nfunction EmptyBasic() {\n return (\n <Example title=\"Basic\">\n <Empty>\n <EmptyHeader>\n <EmptyTitle>No projects yet</EmptyTitle>\n <EmptyDescription>\n You haven't created any projects yet. Get started by creating\n your first project.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <div className=\"flex gap-2\">\n <Button render={<a href=\"#\" />} nativeButton={false}>\n Create project\n </Button>\n <Button variant=\"outline\">Import project</Button>\n </div>\n <Button\n variant=\"link\"\n render={<a href=\"#\" />}\n className=\"text-muted-foreground\"\n nativeButton={false}\n >\n Learn more{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRight01Icon\"\n phosphor=\"ArrowUpRightIcon\"\n remixicon=\"RiArrowRightUpLine\"\n />\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithMutedBackground() {\n return (\n <Example title=\"With Muted Background\">\n <Empty className=\"bg-muted\">\n <EmptyHeader>\n <EmptyTitle>No results found</EmptyTitle>\n <EmptyDescription>\n No results found for your search. Try adjusting your search terms.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <Button>Try again</Button>\n <Button\n variant=\"link\"\n render={<a href=\"#\" />}\n className=\"text-muted-foreground\"\n nativeButton={false}\n >\n Learn more{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRight01Icon\"\n phosphor=\"ArrowUpRightIcon\"\n remixicon=\"RiArrowRightUpLine\"\n />\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithBorder() {\n return (\n <Example title=\"With Border\">\n <Empty className=\"border\">\n <EmptyHeader>\n <EmptyTitle>404 - Not Found</EmptyTitle>\n <EmptyDescription>\n The page you're looking for doesn't exist. Try searching\n for what you need below.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <InputGroup className=\"w-3/4\">\n <InputGroupInput placeholder=\"Try searching for pages...\" />\n <InputGroupAddon>\n <IconPlaceholder\n lucide=\"CircleDashedIcon\"\n tabler=\"IconCircleDashed\"\n hugeicons=\"DashedLineCircleIcon\"\n phosphor=\"CircleDashedIcon\"\n remixicon=\"RiLoaderLine\"\n />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Kbd>/</Kbd>\n </InputGroupAddon>\n </InputGroup>\n <EmptyDescription>\n Need help? <a href=\"#\">Contact support</a>\n </EmptyDescription>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithIcon() {\n return (\n <Example title=\"With Icon\">\n <Empty className=\"border\">\n <EmptyHeader>\n <EmptyMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"Folder01Icon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n </EmptyMedia>\n <EmptyTitle>Nothing to see here</EmptyTitle>\n <EmptyDescription>\n No posts have been created yet. Get started by{\" \"}\n <a href=\"#\">creating your first post</a>.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n data-icon=\"inline-start\"\n />\n New Post\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n return (\n <Example title=\"With Muted Background Alt\">\n <Empty className=\"bg-muted/50\">\n <EmptyHeader>\n <EmptyTitle>404 - Not Found</EmptyTitle>\n <EmptyDescription>\n The page you're looking for doesn't exist. Try searching\n for what you need below.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <InputGroup className=\"w-3/4\">\n <InputGroupInput placeholder=\"Try searching for pages...\" />\n <InputGroupAddon>\n <IconPlaceholder\n lucide=\"CircleDashedIcon\"\n tabler=\"IconCircleDashed\"\n hugeicons=\"DashedLineCircleIcon\"\n phosphor=\"CircleDashedIcon\"\n remixicon=\"RiLoaderLine\"\n />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Kbd>/</Kbd>\n </InputGroupAddon>\n </InputGroup>\n <EmptyDescription>\n Need help? <a href=\"#\">Contact support</a>\n </EmptyDescription>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyInCard() {\n return (\n <Example title=\"In Card\">\n <Empty>\n <EmptyHeader>\n <EmptyMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"Folder01Icon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n </EmptyMedia>\n <EmptyTitle>No projects yet</EmptyTitle>\n <EmptyDescription>\n You haven't created any projects yet. Get started by creating\n your first project.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <div className=\"flex gap-2\">\n <Button render={<a href=\"#\" />} nativeButton={false}>\n Create project\n </Button>\n <Button variant=\"outline\">Import project</Button>\n </div>\n <Button\n variant=\"link\"\n render={<a href=\"#\" />}\n className=\"text-muted-foreground\"\n nativeButton={false}\n >\n Learn more{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRight01Icon\"\n phosphor=\"ArrowUpRightIcon\"\n remixicon=\"RiArrowRightUpLine\"\n />\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |