Button 47

PreviousNext

Button with stitched border design using layered shadow effects

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/button/button-47.tsx
const ButtonStitchesDemo = () => {
  return (
    <button className='group relative rounded-lg border-2 border-sky-500 bg-sky-500 px-4 py-2 text-sm font-medium text-white hover:shadow-lg'>
      <span className='absolute top-0 left-0 size-full rounded-md border border-dashed border-sky-50 shadow-inner shadow-white/30 group-active:shadow-white/10' />
      <span className='absolute top-0 left-0 size-full rotate-180 rounded-md border-sky-50 shadow-inner shadow-black/30 group-active:shadow-black/10' />
      Stitches Button
    </button>
  )
}

export default ButtonStitchesDemo

Installation

npx shadcn@latest add @shadcn-studio/button-47

Usage

import { Button47 } from "@/components/button-47"
<Button47 />