Button
A versatile button component with three distinct styling variants: Neo-SaaS, Glassmorphic, and Neo-Brutalism.
Usage
Each button variant is installed as a separate component.
Neo-SaaS Style
A clean, modern button with smooth gradients and subtle shadows.
Installation
Legacy installation using the full registry URL:
pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/button-neo-saas.json"Glassmorphic Style
Features a frosted glass effect with backdrop blur and inner glow.
Installation
Legacy installation using the full registry URL:
pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/button-glassmorphic.json"Neo-Brutalism Style
Characterized by bold borders, hard shadows, and high contrast.
Installation
Legacy installation using the full registry URL:
pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/button-neo-brutalism.json"API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | primary | The visual style of the button. |
size | string | md | The size of the button (sm, md, lg). |
isLoading | boolean | false | Shows a loading spinner and disables interaction. |
disabled | boolean | false | Disables the button. |
children | ReactNode | - | The content of the button. |
className | string | - | Additional CSS classes. |
glowColor | string | - | (Glassmorphic) Custom hex color for the glow effect. |
shadowOffset | number | 4 | (Neo-Brutalism) Offset of the hard shadow in pixels. |