# Action Toolbar

> The ActionToolbar component is a modern, interactive toolbar built to combine functionality and design elegance. Inspired by the shared-border button style, it presents a unified, polished look with rounded edges, subtle gradients, and smooth hover transitions. Each button can act independently or include dropdown menus for extended actions, making it ideal for editor panels, dashboards, or productivity interfaces. The toolbar supports active states, badges for counts, and an optional compact mode for tighter layouts. With its clean design, responsive behavior, and intuitive interactivity, ActionToolbar offers both practicality and a refined visual experience—perfect for any modern web application interface.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/action-toolbar

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/action-toolbar?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt