nili/ui
enfaartr
All components

Filter

Overview
14 exports6 variant axes33 props3 files
import { FilterBar, FilterChip, FilterList } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Horizontal Filters

A row of filter chips. Active chips show the chosen value and an optional clear button. Use placeholder for the dashed “Add filter” affordance.

import { FilterBar, FilterChip, Icon } from "@nili/ui"
import { RiPriceTag3Line, RiCalendarLine, RiUserLine } from "@remixicon/react"

export function Example() {
  return (
    <FilterBar surface="panel" label="Table filters">
      <FilterChip
        active
        value="Active"
        startIcon={<Icon icon={RiPriceTag3Line} />}
        onClear={() => {}}
        clearLabel="Clear"
      >
        Status
      </FilterChip>
      <FilterChip startIcon={<Icon icon={RiCalendarLine} />}>Date</FilterChip>
      <FilterChip startIcon={<Icon icon={RiUserLine} />}>Owner</FilterChip>
      <FilterChip placeholder>Add filter</FilterChip>
    </FilterBar>
  )
}

Vertical Filters

Figma's Vertical Filter Items — a sidebar column with counts and an active state.

import { FilterList, FilterListItem } from "@nili/ui"

export function Example() {
  return (
    <div className="w-56 rounded-xl border border-soft-200 p-2">
      <FilterList label="Status">
        <FilterListItem active count={128}>All</FilterListItem>
        <FilterListItem count={42}>Active</FilterListItem>
        <FilterListItem count={12}>Draft</FilterListItem>
        <FilterListItem count={74}>Archived</FilterListItem>
      </FilterList>
    </div>
  )
}

Horizontal Filter

Toolbar patterns from Figma: Calendar type (date range + search) and Table type (segmented status + sort).

Type · Calendar
Type · Table
import {
  Button,
  ButtonGroup,
  ButtonGroupItem,
  TextInput,
  Icon,
} from "@nili/ui"
import {
  RiCalendarLine,
  RiArrowDownSLine,
  RiSortDesc,
  RiSearch2Line,
} from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* Type · Calendar */}
      <div className="flex flex-wrap items-center gap-3">
        <Button size="sm" appearance="stroke" color="neutral">
          Today
        </Button>
        <ButtonGroup size="sm" label="Date">
          <ButtonGroupItem endIcon={<Icon icon={RiArrowDownSLine} />}>
            Last 7 days
          </ButtonGroupItem>
          <ButtonGroupItem startIcon={<Icon icon={RiCalendarLine} />}>
            Aug 04 - Aug 11 2023
          </ButtonGroupItem>
        </ButtonGroup>
        <TextInput
          size="sm"
          aria-label="Search"
          placeholder="Search..."
          startIcon={<Icon icon={RiSearch2Line} />}
          shortcut="⌘1"
          className="w-[220px]"
        />
      </div>

      {/* Type · Table */}
      <div className="flex flex-wrap items-center gap-3">
        <ButtonGroup size="sm" label="Type">
          <ButtonGroupItem selected>All</ButtonGroupItem>
          <ButtonGroupItem>Income</ButtonGroupItem>
          <ButtonGroupItem>Expenses</ButtonGroupItem>
        </ButtonGroup>
        <Button
          size="sm"
          appearance="stroke"
          color="neutral"
          startIcon={<Icon icon={RiSortDesc} />}
          endIcon={<Icon icon={RiArrowDownSLine} />}
        >
          Sort by
        </Button>
      </div>
    </>
  )
}

Vertical Filter Items

Default, hover (CSS) and active states for a single sidebar item.

DefaultHoverActive
import { FilterListItem, Icon } from "@nili/ui"
import { RiCalendarLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <FilterListItem startIcon={<Icon icon={RiCalendarLine} />}>
        Date
      </FilterListItem>
      <FilterListItem startIcon={<Icon icon={RiCalendarLine} />} active>
        Date
      </FilterListItem>
    </>
  )
}