# Neumorphic Button

> Soft-UI neumorphic button with raised and inset shadows in three shapes.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/neumorphic-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/neumorphic-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/neumorphic-button-demo.tsx"
import { Heart } from "lucide-react"

import { NeumorphicButton } from "@/components/neumorphic-button"

export default function NeumorphicButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 rounded-2xl bg-[#e0e5ec] p-14">
      <NeumorphicButton>Press me</NeumorphicButton>
      <NeumorphicButton shape="pill">Subscribe</NeumorphicButton>
      <NeumorphicButton shape="circle" aria-label="Favorite">
        <Heart className="size-5" />
      </NeumorphicButton>
    </div>
  )
}
```

## Source

```tsx title="components/neumorphic-button.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface NeumorphicButtonProps extends React.ComponentProps<"button"> {
  shape?: "rounded" | "pill" | "circle"
}

const shapes = {
  rounded: "h-12 rounded-2xl px-8",
  pill: "h-12 rounded-full px-9",
  circle: "size-14 rounded-full",
} as const

/** Soft-UI button. Best on a `#e0e5ec` surface so the light and dark shadows read correctly. */
export function NeumorphicButton({ shape = "rounded", className, ...props }: NeumorphicButtonProps) {
  return (
    <button
      type="button"
      className={cn(
        "inline-flex items-center justify-center gap-2 bg-[#e0e5ec] text-sm font-semibold text-[#4a5568] select-none",
        "shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] transition-[box-shadow,color] duration-200",
        "hover:text-[#2d3748] hover:shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff]",
        "active:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] aria-pressed:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff]",
        "focus-visible:ring-2 focus-visible:ring-[#6366f1]/60 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        shapes[shape],
        className
      )}
      {...props}
    />
  )
}
```