Components
Starting preview...
Fast, composable, unstyled command menu for React.
npx shadcn@latest add https://21st.dev/r/shadcn/commandimport {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandShortcut,
} from "@/components/ui/command";
import {
Bookmark,
Download,
Edit,
Folder,
Heart,
FolderMinus,
FolderPlus,
Info,
LayoutGrid,
Link,
List,
LogOut,
Moon,
Pencil,
PlusCircle,
Search,
Share,
Star,
Tag,
Trash2,
Upload,
User,
} from "lucide-react";
function Dense() {
return (
<Command className="w-[300px] rounded-lg border bg-background">
<CommandInput placeholder="Search or type a command..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Bookmarks">
<CommandItem>
<Edit className="mr-2 size-4" />
<span>Edit Bookmark</span>
</CommandItem>
<CommandItem>
<Trash2 className="mr-2 size-4" />
<span>Delete Bookmark</span>
</CommandItem>
<CommandItem>
<Folder className="mr-2 size-4" />
<span>Move to Folder</span>
</CommandItem>
<CommandItem>
<Tag className="mr-2 size-4" />
<span>Tag Bookmark</span>
</CommandItem>
<CommandItem>
<Star className="mr-2 size-4" />
<span>Favorite Bookmark</span>
</CommandItem>
<CommandItem>
<Share className="mr-2 size-4" />
<span>Share Bookmark</span>
</CommandItem>
<CommandItem>
<Link className="mr-2 size-4" />
<span>Open Bookmark</span>
</CommandItem>
<CommandItem>
<Info className="mr-2 size-4" />
<span>View Bookmark Details</span>
</CommandItem>
</CommandGroup>
<CommandGroup heading="Folders">
<CommandItem>
<FolderPlus className="mr-2 size-4" />
<span>Create Folder</span>
</CommandItem>
<CommandItem>
<Pencil className="mr-2 size-4" />
<span>Rename Folder</span>
</CommandItem>
<CommandItem>
<FolderMinus className="mr-2 size-4" />
<span>Delete Folder</span>
</CommandItem>
<CommandItem>
<Heart className="mr-2 size-4" />
<span>View Folder</span>
</CommandItem>
</CommandGroup>
<CommandGroup heading="Tags">
<CommandItem>
<Bookmark className="mr-2 size-4" />
<span>Manage Tags</span>
</CommandItem>
<CommandItem>
<Search className="mr-2 size-4" />
<span>Search by Tag</span>
</CommandItem>
</CommandGroup>
<CommandGroup heading="Actions">
<CommandItem>
<LayoutGrid className="mr-2 size-4" />
<span>Open Dashboard</span>
<CommandShortcut>⌘D</CommandShortcut>
</CommandItem>
<CommandItem>
<Search className="mr-2 size-4" />
<span>Search Bookmarks</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<PlusCircle className="mr-2 size-4" />
<span>Create New Bookmark</span>
<CommandShortcut>⌘N</CommandShortcut>
</CommandItem>
<CommandItem>
<Upload className="mr-2 size-4" />
<span>Import Bookmarks</span>
<CommandShortcut>⌘I</CommandShortcut>
</CommandItem>
<CommandItem>
<Download className="mr-2 size-4" />
<span>Export Bookmarks</span>
<CommandShortcut>⌘E</CommandShortcut>
</CommandItem>
<CommandItem>
<List className="mr-2 size-4" />
<span>View All Bookmarks</span>
<CommandShortcut>⌘V</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandGroup heading="Settings">
<CommandItem>
<User className="mr-2 size-4" />
<span>Account Settings</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<LogOut className="mr-2 size-4" />
<span>Logout</span>
<CommandShortcut>⌘Q</CommandShortcut>
</CommandItem>
<CommandItem>
<Moon className="mr-2 size-4" />
<span>Theme Settings</span>
<CommandShortcut>⌘T</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
);
}
export { Dense }