Pop Button

A playful 3D-style button with push-down animation effect.

Installation

pnpm dlx shadcn@latest add @spell/pop-button

Font Setup (Optional)

To use the playful DynaPuff font with this component:

Add the font to your layout.tsx:

import { DynaPuff } from 'next/font/google'

const dynaPuff = DynaPuff({
  subsets: ['latin'],
  variable: '--font-dyna-puff',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={dynaPuff.variable}>
        {children}
      </body>
    </html>
  )
}

Add the CSS variable to your globals.css:

:root {
  --font-pop: var(--font-dyna-puff);
}

Examples

Color

Open in

Size

Open in

Usage

import { PopButton } from "@/components/pop-button";

<PopButton color="violet" size="default">
  Button
</PopButton>

Props

Prop	Type	Default
`children`	`React.ReactNode`	-
`color`	`'default' \| 'blue' \| 'purple' \| 'pink' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'cyan' \| 'indigo' \| 'violet' \| 'rose' \| 'amber' \| 'lime' \| 'sky' \| 'slate' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'fuchsia' \| 'emerald'`	`'default'`
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`
`disabled`	`boolean`	`false`
`onClick`	`() => void`	-
`className`	`string`	-
`asChild`	`boolean`	`false`