ActionBar with motion: it rises in on a spring, settling with a hint of overshoot, and drops away quicker.
$ pnpm dlx shadcn@latest add @dashral/motion-action-barInstallation
$ pnpm dlx shadcn@latest add @dashral/motion-action-barAdds components/dashral/motion/action-bar.tsx, the Action Bar it builds on (in components/dashral/), motion and the motion files every motion component shares. Or by its full URL: https://dashral.com/r/motion-action-bar.json
Usage
The same as Action Bar, imported from components/dashral/motion/ (with the npm package: @dashral/motion/components/action-bar): swap the import and it moves.
import { ActionBar } from "@/components/dashral/motion/action-bar"
<ActionBar open={selected.length > 0} count={selected.length} onClear={() => setSelected([])} actions={<Button size="sm">Archive</Button>} />Compared with Default
Slides up and fades in CSS, on the spring curve; drops away quicker.
Motion
Rises on the appear spring, settling with a hint of overshoot, and drops away quicker.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Action Bar, and every attribute of the element it renders. The Motion edition adds no props of its own.
ActionBar
Also takes every prop of <div>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
open | booleanWhether it shows: usually while something is selected. Required. | — |
count | numberHow many are selected: "3 selected", in the locale's plural. | — |
label | ReactNodeIn place of "3 selected". | — |
actions | ReactNodeThe buttons for the selection. Required. | — |
onClear | () => voidShows an × that clears the selection; Escape inside the bar calls it too. | — |
position | "fixed" | "inline"Floating at the bottom of the window, centred; or in the page's flow. | "fixed" |
aria-label | stringNames the toolbar. | "Actions for the selection" |
classNames | { label, actions }Classes for each part. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Motion
- It rises 16px on the appear spring (--duration-standard, a hint of overshoot) and drops away quicker (--ease-exit).
- With reduced motion it only fades.