FilterBar

Search and multi-filter toolbar with pressed states, counts, compact mobile overflow, and a single clear action.

InterfaceSource ready6 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/filter-bar.json
Interactive preview
Interface
23 projects

Install with the CLI

# adds FilterBar to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/filter-bar.json

Or install the package

// npm install @uigrids/react-ui
import { FilterBar } from '@uigrids/react-ui'

export default function App() {
  return <FilterBar />
}

Props

PropTypeDefaultDescription
filtersunknownDEFAULT_FILTERSConfigures the filters option.
defaultActivearray[]Configures the default active option.
placeholderstring'Search projects...'Configures the placeholder option.
resultLabelstring'23 projects'Configures the result label option.
onChangeunknown-Configures the on change option.
classNamestring''Additional CSS classes for the outer element.