Browse components
Layered Button
A 3D keycap of stacked offset layers that spread on hover and compress on press.
Installation
npx shadcn@latest add @glint-ui/layered-buttonFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/layered-button.json
Usage
import { LayeredButton } from "@/components/ui/layered-button";
<LayeredButton layers={3} depth={4}>Press me</LayeredButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button label. |
| layers | number | 3 | Number of layers stacked under the face. |
| depth | number | 4 | Px between layers at rest. |
| className | string | — | Extra classes for the root element. |