Filter Bar

A configurable filtering surface for dashboards with top or side layouts, search, select, pill, and checkbox-group sections.

Preview & Interactive Laboratory

Segment

Region

Status

Refine Logic

Segment

Region

Status

Result Surface

Pair the side layout with tables, kanban views, or long result feeds when the filter surface needs to remain pinned during exploration.

Usage & Implementation

<FilterBar
  layout="top"
  sections={[
    { title: "Search", type: "search", placeholder: "Search accounts..." },
    { title: "Segment", type: "pills", options: ["All", "Enterprise"] },
  ]}
/>

React / Tailwind

Granular Customization

Layout

Switches between top rail and side panel patterns.

className={`layout='side'`}

Sections

Drive the rendered controls via config objects.

className={`sections={[...]}`}

Action Shell

Customize the surrounding card or panel surface with wrapper classes.

className={`className`}

API Reference (Props)

Prop	Type	Default	Description
layout	'top' \| 'side' \| 'right'	'top'	Controls overall filter layout.
sections	FilterSection[]	-	Defines filter controls to render.
className	string	-	Extends the outer wrapper.