Action Bar

An interactive list of expanding action items with glassmorphism effects, inspired by modern control centers.

Preview

Action button
Camera Control
System Settings

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/action-bar.json

Usage

tsx
11 lines
1
2
3
4
5
6
7
8
9
10
11
import { ActionBar, ActionBarItem } from "@/components/ui/action-bar"

export default function MyComponent() {
  return (
    <ActionBar>
        <ActionBarItem id="1" label="My Item">
            Content goes here...
        </ActionBarItem>
    </ActionBar>
  )
}