mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 06:28:37 +00:00
feat: add docs for base-ui components (#9304)
* 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
This commit is contained in:
shadcn
GitHub
181
apps/v4/examples/base/command-scrollable.tsx
Normal file
181
apps/v4/examples/base/command-scrollable.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
CommandShortcut,
|
||||
} from "@/examples/base/ui/command"
|
||||
import {
|
||||
BellIcon,
|
||||
CalculatorIcon,
|
||||
CalendarIcon,
|
||||
ClipboardPasteIcon,
|
||||
CodeIcon,
|
||||
CopyIcon,
|
||||
CreditCardIcon,
|
||||
FileTextIcon,
|
||||
FolderIcon,
|
||||
FolderPlusIcon,
|
||||
HelpCircleIcon,
|
||||
HomeIcon,
|
||||
ImageIcon,
|
||||
InboxIcon,
|
||||
LayoutGridIcon,
|
||||
ListIcon,
|
||||
PlusIcon,
|
||||
ScissorsIcon,
|
||||
SettingsIcon,
|
||||
TrashIcon,
|
||||
UserIcon,
|
||||
ZoomInIcon,
|
||||
ZoomOutIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
export function CommandManyItems() {
|
||||
const [open, setOpen] = React.useState(false)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
|
||||
Open Menu
|
||||
</Button>
|
||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||
<Command>
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Navigation">
|
||||
<CommandItem>
|
||||
<HomeIcon />
|
||||
<span>Home</span>
|
||||
<CommandShortcut>⌘H</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<InboxIcon />
|
||||
<span>Inbox</span>
|
||||
<CommandShortcut>⌘I</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<FileTextIcon />
|
||||
<span>Documents</span>
|
||||
<CommandShortcut>⌘D</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<FolderIcon />
|
||||
<span>Folders</span>
|
||||
<CommandShortcut>⌘F</CommandShortcut>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Actions">
|
||||
<CommandItem>
|
||||
<PlusIcon />
|
||||
<span>New File</span>
|
||||
<CommandShortcut>⌘N</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<FolderPlusIcon />
|
||||
<span>New Folder</span>
|
||||
<CommandShortcut>⇧⌘N</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<CopyIcon />
|
||||
<span>Copy</span>
|
||||
<CommandShortcut>⌘C</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<ScissorsIcon />
|
||||
<span>Cut</span>
|
||||
<CommandShortcut>⌘X</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<ClipboardPasteIcon />
|
||||
<span>Paste</span>
|
||||
<CommandShortcut>⌘V</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<TrashIcon />
|
||||
<span>Delete</span>
|
||||
<CommandShortcut>⌫</CommandShortcut>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="View">
|
||||
<CommandItem>
|
||||
<LayoutGridIcon />
|
||||
<span>Grid View</span>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<ListIcon />
|
||||
<span>List View</span>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<ZoomInIcon />
|
||||
<span>Zoom In</span>
|
||||
<CommandShortcut>⌘+</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<ZoomOutIcon />
|
||||
<span>Zoom Out</span>
|
||||
<CommandShortcut>⌘-</CommandShortcut>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Account">
|
||||
<CommandItem>
|
||||
<UserIcon />
|
||||
<span>Profile</span>
|
||||
<CommandShortcut>⌘P</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<CreditCardIcon />
|
||||
<span>Billing</span>
|
||||
<CommandShortcut>⌘B</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<SettingsIcon />
|
||||
<span>Settings</span>
|
||||
<CommandShortcut>⌘S</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<BellIcon />
|
||||
<span>Notifications</span>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<HelpCircleIcon />
|
||||
<span>Help & Support</span>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Tools">
|
||||
<CommandItem>
|
||||
<CalculatorIcon />
|
||||
<span>Calculator</span>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<CalendarIcon />
|
||||
<span>Calendar</span>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<ImageIcon />
|
||||
<span>Image Editor</span>
|
||||
</CommandItem>
|
||||
<CommandItem>
|
||||
<CodeIcon />
|
||||
<span>Code Editor</span>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</CommandDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user