94 Pro components and page blocks

Get Pro
uibrik

Filter Bar

Pro

Preview

Customize

Max visible0
Accent

Installation

Pro

Filter Bar is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/filter-bar

Usage

import { FilterBar } from "@/components/uibrik/filter-bar/filter-bar";​<FilterBar  fields={[{ key: …, label: …, type: … }]}  maxVisible={0}  clearable  shortcut="f"  accent="#3e63dd"  addLabel="Filter"  noun={["issue", "issues"]}  // value={[…]}  // onChange={(filters) => {}}  // defaultValue={[…]}  // count={0}  // total={0}  // FILTER_OPERATORS={…}  // DATE_PRESETS={…}/>

Props

FilterBar
maxVisible
Type number
0
Pills shown before the rest fold into “N more”. 0 shows all.
clearable
Type boolean
true
Show Clear while any filter is set.
shortcut
Type string
"f"
Key that opens the menu from anywhere outside a text field. Empty turns it off.
accent
Type string
"#3e63dd"
The one colour: ticks, the dot on fields in use and the count meter.
addLabel
Type string
"Filter"
Label on the button that adds a filter.
fieldsrequired
Type { key; label; icon?; type; options?; operators?; plural?; unit?; placeholder? }[]
–
What can be filtered. type is select, multi, date, text or number. Options take value, label, icon or color, and a hint such as a match count.
value / onChange
Type Filter[] / (filters) => void
–
Controlled filters. A Filter is { id, field, operator, value: string[] }.
defaultValue
Type Filter[]
–
Filters on mount when uncontrolled.
count
Type number
–
Rows matching the current filters, shown on the right. Its digits roll when it changes.
total
Type number
–
All rows. Adds “of N” and a small meter beside the count.
noun
Type string | [singular, plural]
["result", "results"]
What the count counts.
FILTER_OPERATORS / DATE_PRESETS
Type export
–
The default operators per type and the date presets, for matching filters against your rows.
className
Type string
–
Classes for the bar.