Row of filter chips with optional count numbers. Active chip inverts to foreground.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Toolbar16 } from "@/components/beste/piece/toolbar16";
<Toolbar16
filters={[
{
"label": "All",
"count": 42
},
{
"label": "Active",
"count": 18
},
{
"label": "Completed",
"count": 22
},
{
"label": "Archived",
"count": 2
}
]}
active="Active"
/>Row of square size chips. The active size inverts to foreground.
Segmented view switcher with grid, rows, and list options shown as icon plus label chips.
Skip, play/pause, and skip controls inside a pill. Toggle the playing flag to flip the center button.
Row of color circles with a check on the active swatch and a trailing eyedropper for custom values.
Segmented zoom control with minus, a monospace percentage readout, and plus.
Sort label followed by field chips and an ascending or descending arrow on the right.