Orvain UI

Filters

A filter bar is the row of controls above a table, catalogue or result list that narrows what is shown without changing what is stored: a date range, a segmented switch between states, a set of removable chips each holding one condition.

Get Pro to installPro12 blocksReact, Vue and Figma
MCPConnect the MCP server
8 transactionsNet +$3,457
StaplesOffice · CardPaidNov 7−$339
Acme CorpSales · Card · receiptPendingNov 6+$6,103
InitechSales · TransferRefundedNov 6+$741
StaplesOffice · Direct debit · receiptPendingNov 5−$119
Hotel AdlonTravel · Direct debit · invoicePaidNov 4−$876
and 3 more

Every block in the set#

Calendar

Dashboards, reports, anything scoped to a date range

Calendar, the period drawn as days; the range is a band you drag

Activity over time, where people think in shapes of days rather than in dates

Calendar, say the range; the card shows what it understood

People who know the range they want and would rather say it than click through a calendar

Table

Data tables, transaction lists, record browsers

Table, the switch carries the money; sorting moves into the headers

Ledgers where the totals matter as much as the rows

Table, filters and sort become a saved tab

Tables people return to with the same filters: save a setup as a tab

Chips

Advanced filtering, faceted search, saved-filter bars: several fields, operators and values at once

Chips, see what a value does before you pick it

Large lists where people want to know what a filter does before they commit to it

Chips, the filters read as one sentence

Reports and saved views where the filters should read like a question

Selectable chips

Filters picked by tapping, one answer or several

Selectable chips, counts

Faceted filters where people should see what a choice would show before they make it

Selectable chips, selection bar

Filter sets where the actions should only appear once something is picked

When to use#

  • A table long enough that scanning it is slower than narrowing it
  • Records scoped by time, where a preset range answers most of the questions asked of them
  • A catalogue with facets people combine: status and type and owner at once
  • A result list where conditions need to come off one at a time

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans