Design system primitives: buttons, badges and other building blocks our sections are composed from. Install one and reuse it across your whole project.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.
Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.
Text search input with a leading icon for keyword filtering. Debounce in the consumer if you fetch on change.
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
Single-select dropdown for long option lists that would crowd a sidebar. Supports a clear item, result counts, and a disabled state for dependent filters.
Two-thumb range slider with live numeric readouts and a commit callback, built for price ranges.
Multi-select color circles for color filtering. Each option paints its own CSS color and stays accessible via screen-reader labels.
Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.
Recharts line chart on the shadcn ChartContainer: multi-series lines with configurable curve, optional dots, active-dot hover, grid, y-axis, legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
Topbar bell trigger with an unread count and a popover feed: icon rows with title, description, timestamp, unread dots, a mark-all-read action, and a scrollable list. Manages read state internally.
Recharts pie/donut chart on the shadcn ChartContainer: per-slice colors from config, adjustable donut hole, optional legend, and a name-keyed tooltip. Config-driven colors via --chart tokens.
Recharts radar chart on the shadcn ChartContainer: multi-series polar areas with a polar grid, angle axis, adjustable fill opacity, optional legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
Recharts radial gauge on the shadcn ChartContainer: a single value plotted as a proportional ring with a muted track and a centered percentage plus caption. Ideal for progress, targets, and completion rates.
Atrium Loft
Floor 3 · 12 seats
Studio B
Floor 2 · 8 seats
Garden Room
Ground · 20 seats
Rooftop Deck
Level 5 · 40 seats
A Gantt-style day timeline: resource rows against an hour axis with time-positioned event bars (left/width computed from start/end), grid lines, a live 'now' marker, colored tones, and clickable bars with a hover tooltip showing the event and its time range. Ideal for room bookings, shifts, and resource scheduling.
Dashboard sidebar with a brand header, grouped nav items, Lucide icons, trailing count badges, and an active state. Collapse is driven from the shell topbar via the `collapsed` prop (icon rail when true).
Selin Aydar
4.6(18 reviews)
Porto, PT
820 miles away
$142
avg. daily rate
Recently active — Available
A candidate/freelancer card: avatar with verified badge, star rating or new label, a location/rate split, and toggleable wishlist and invite actions that track their own state. Ideal for talent marketplaces and staffing grids.
Topbar account menu: avatar trigger with name and email, dropdown with icon items, keyboard shortcuts, and a destructive sign-out row. Compact avatar-only mode for dense headers.