Bulk Actions Bar

Floating Tailwind selection bar that appears once rows are selected, showing the count, your action buttons and a clear button. Sticks to the bottom edge.

src/registry/ui/bulk-actions-bar.tsx/r/bulk-actions-bar.json

Installation#

bash

npx shadcn@latest add @minidev/bulk-actions-bar

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/bulk-actions-bar.json

Usage#

tsx

import { BulkActionsBar } from "@/components/ui/bulk-actions-bar"

export function Example() {
  return (
    <BulkActionsBar count={3} onClear={() => {}}>
      <Button size="sm" variant="outline">Archive</Button>
      <Button size="sm" variant="outline" className="text-danger border-danger/40">Delete</Button>
    </BulkActionsBar>
  )
}

API reference#

BulkActionsBar props
Prop	Type	Default
`count*`	`number`	`-`
`children`	`React.ReactNode`	`-`
`onClear`	`() => void`	`-`
`className`	`string`	`-`

* required

Dependencies#

npm

React only

Built from

Examples#

Data extraHeatmap, timeline, more

Audit Filter BarFilter toolbar for audit logs combining a search field, actor filter chips for all, admins or system, and a date range picker in one wrapping row.Audit Log EntrySingle audit log line: actor avatar, actor name, muted action text and the affected target, with a relative timestamp underneath. Stacks into a trail.Audit TrailBordered audit trail in React that renders a list of actor, action, target and time records as stacked log entries. Useful for security and admin history pages.Column Visibility MenuColumns dropdown for data tables with a checkbox item per column. It returns the updated list of visible column ids so you can show or hide table columns.Data TableReact data table with sortable columns, row selection, a floating bulk actions bar, hover row actions, sticky header, three densities and skeleton loading.Density ToggleToggle group that switches between compact and comfortable density, reporting the choice to your handler. Pairs with data tables and dense list views.

All data table components

Learn more

Build a React data table with TanStack Table and TailwindGuide