v0.5.1

Filter

Filter bar, chips, and active-filters row for data views.

Installation

npx paubha@latest add filter

Usage

import { ActiveFilters, FilterBar, FilterChip } from "@/components/ui/filter";

<FilterBar>
  <FilterChip label="Status" selected />
  <FilterChip label="Priority" />
</FilterBar>
<ActiveFilters onClear={() => {}}>
  <FilterChip label="Assignee: Sarah" selected onRemove={() => {}} />
</ActiveFilters>

Examples

Active filters

Filter panel

Filters
Status

File Upload

Drag-and-drop upload zone with file list and progress.

Icon List

Stacked icon + title + description rows for contact and detail lists.

On this page

InstallationUsageExamplesActive filtersFilter panel