Bulk Actions Bar
Select rows with checkboxes (Shift-click for ranges) and a floating action bar rises with the count and bulk actions.
bulk-actions-bar.tsxbulk-actions-bar.css
Checking access…
Overview
A select-all checkbox in the header goes indeterminate for partial selections. Shift-click selects a range like a mail client.
As soon as anything is selected, an action bar slides up from the bottom of the card with the count, Archive, Delete and a clear button. Escape clears.
When to use
- Inboxes, file lists, admin tables.
When not to use
- Lists where people act on one item at a time.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/bulk-actions-bar.json$
npx shadcn@latest add https://sundaeui.dev/r/bulk-actions-bar.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/bulk-actions-bar.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/bulk-actions-bar.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy bulk-actions-bar.tsx and bulk-actions-bar.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { BulkActionsBar } from '@/components/sundae/bulk-actions-bar'
<BulkActionsBar />Props
| Prop | Type | Default |
|---|---|---|
rows*Rows. | { id: string; title: string; meta?: string }[] | — |
actions*Bulk actions. | { id: string; label: string }[] | — |
onActionCalled with the selection. | (action: string, ids: string[]) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Native checkboxes; the header box exposes the mixed state. The action bar is a toolbar labelled with the count.
- Escape clears selection; results are announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-bab; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Shift + click
- Select a range
- Esc
- Clear selection
FAQ
- Is Bulk Actions Bar free?
- Bulk Actions Bar is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Bulk Actions Bar?
- Run npx shadcn@latest add https://sundaeui.dev/r/bulk-actions-bar.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Bulk Actions Bar support keyboard and screen readers?
- Native checkboxes; the header box exposes the mixed state. The action bar is a toolbar labelled with the count. Escape clears selection; results are announced.
- Does Bulk Actions Bar respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →- Pro
Swipe Actions
Components · Refined - Pro
Sortable List
Components · Refined Grid / List View Switcher
Components · RefinedPull to Refresh
Components · RefinedLoad More List
Components · RefinedTask List
Components · Refined