All components
Gradient Button
ButtonsButton with an animated conic gradient border and hover shimmer.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/gradient-button.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/gradient-button.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Classes applied to the button. |
Accessibility
- A real <button>, so keyboard activation and focus rings come free.
- Focus ring is preserved despite the layered backgrounds.
- The gradient is decoration, never the only signal of state.
Dependencies
clsxtailwind-merge