Button 16

PreviousNext

Ghost button with animated arrow on hover

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/button/button-16.tsx
import { ArrowLeftIcon } from 'lucide-react'

import { Button } from '@/registry/new-york/ui/button'

const ButtonGhostDemo = () => {
  return (
    <Button variant='ghost' className='group'>
      <ArrowLeftIcon className='transition-transform duration-200 group-hover:-translate-x-0.5' />
      Go to settings
    </Button>
  )
}

export default ButtonGhostDemo

Installation

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

Usage

import { Button16 } from "@/components/button-16"
<Button16 />