v0.5.1

Data Toolbar

Search, filters, and actions for tables and lists.

Installation

npx paubha@latest add data-toolbar

Usage

import { DataToolbar } from "@/components/ui/data-toolbar";
import { SearchField } from "@/components/ui/search-field";
import { Button } from "@/components/ui/button";
import { FilterChip } from "@/components/ui/filter";

<DataToolbar
  search={<SearchField placeholder="Search projects" />}
  filters={<FilterChip label="Active" selected />}
  actions={<Button size="sm">New project</Button>}
/>

Cookie Banner

Consent bar composed from tokens and Button.

Date Picker

Calendar in a popover — compose Button, Popover, and Calendar.

On this page

InstallationUsage