shadcn.io is an independent project built on shadcn/ui
An eye button opens one layout, List, Grid, or Column, starting on Grid, then checkboxes for hidden files, compact mode, and preview.
Use it in a file browser when layout is one choice and display flags can combine. If the layout should stay on screen, use a Toggle Group. In React, Base UI stores the value and does not change the files.
Installation
Anatomy
Usage
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button aria-label="View options" size="icon-md" variant="outline" />
}
>
<EyeIcon aria-hidden="true" />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuRadioGroup onValueChange={setLayout} value={layout}>
<DropdownMenuLabel>Layout</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioItem value="list">
<ListIcon aria-hidden="true" />
List View
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="grid">
<Grid3x3Icon aria-hidden="true" />
Grid View
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="columns">
<Columns3Icon aria-hidden="true" />
Column View
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Display Options</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={showHiddenFiles}
onCheckedChange={setShowHiddenFiles}
{/* The rest of the file is under Installation. */}FAQ
How does the layout choice work?
One value, grid to start, out of list, grid and columns. Picking a layout moves the check.
DropdownMenuRadioGroup takes value, and onValueChange receives the new value.
Which display rows start checked?
Only Show Preview. Show Hidden Files and Compact Mode start off, and each toggles on its own.
Why are radios and checkboxes in one menu?
The layout is one choice out of three, so it's a radio group; the display options can be on together, so they're checkbox rows. A separator and their own labels keep the two kinds apart.
What does the trigger look like?
An outline Button with size="icon-md", an eye icon and aria-label set to View options. The menu is w-56.
API Reference
Dropdown Menu
Sets onValueChange={setLayout}, value={layout}, value="list", value="grid", value="columns" and checked={showHiddenFiles}. The rest is on the Dropdown Menu page.
Button
Sets aria-label="View options", size="icon-md" and variant="outline". The rest is on the Button page.
