Skip to main content

​
Quickstart

This guide will help you create your first component with Craft UI in just a few minutes.

​
Your first component

Let’s start by adding a Button component to your project.
1

Install the Button component

Use the CLI to install the Button component:
npx craftui-cli add button
This creates a Button component in your project with all necessary dependencies.
2

Import and use the Button

Import the Button component in your page or component:
app/page.tsx
import { Button } from '@/components/ui/button'

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen gap-4">
      <Button>Click me</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}
3

Run your development server

Start your development server:
npm run dev
Open your browser to see your buttons in action!

​
Button variants and sizes

The Button component comes with multiple variants and sizes: 
import { Button } from '@/components/ui/button'

export default function ButtonDemo() {
  return (
    <div className="space-y-4">
      {/* Variants */}
      <div className="flex gap-2">
        <Button variant="default">Default</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
      </div>

      {/* Sizes */}
      <div className="flex items-center gap-2">
        <Button size="xs">Extra Small</Button>
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">Extra Large</Button>
      </div>

      {/* Loading state */}
      <div className="flex gap-2">
        <Button loading>Loading...</Button>
        <Button variant="outline" loading>Processing</Button>
      </div>

      {/* Disabled state */}
      <div className="flex gap-2">
        <Button disabled>Disabled</Button>
      </div>
    </div>
  )
}

​
Try an animated component

Now let’s add some magic with an animated component. We’ll use the AnimatedTooltip component:
1

Install AnimatedTooltip

npx craftui-cli add animated-tooltip
2

Create an interactive demo

app/page.tsx
import { AnimatedTooltip } from '@/components/ui/animated-tooltip'
import { Heart, Star, MessageCircle, Share2 } from 'lucide-react'

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen gap-8">
      <AnimatedTooltip label="Like">
        <Heart className="size-5" />
      </AnimatedTooltip>

      <AnimatedTooltip label="Favorite">
        <Star className="size-5" />
      </AnimatedTooltip>

      <AnimatedTooltip label="Comment">
        <MessageCircle className="size-5" />
      </AnimatedTooltip>

      <AnimatedTooltip label="Share">
        <Share2 className="size-5" />
      </AnimatedTooltip>
    </div>
  )
}
3

See the magic

Hover over each icon to see the smooth animated tooltip with rotation and translation effects!

​
How AnimatedTooltip works

The AnimatedTooltip component uses Framer Motion to create smooth animations:
  • Hover detection - Shows tooltip on mouse enter with configurable delay
  • Mouse tracking - Follows cursor position for dynamic rotation
  • Spring animations - Smooth physics-based motion
  • Customizable - Control delay, styling, and content
Here’s the component API: 
interface AnimatedTooltipProps {
  children: React.ReactNode    // The trigger element
  label: string                // Tooltip text
  onClick?: () => void         // Optional click handler
  className?: string           // Custom styling
  delay?: number              // Hover delay in ms (default: 100)
}

​
Building a complete example

Let’s combine multiple components to build a card with interactive elements:
app/page.tsx
import { Button } from '@/components/ui/button'
import { AnimatedTooltip } from '@/components/ui/animated-tooltip'
import { Heart, Share2, Bookmark } from 'lucide-react'

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen p-4">
      <div className="w-full max-w-md rounded-lg border bg-card p-6 space-y-4">
        <h2 className="text-2xl font-bold">Getting Started with Craft UI</h2>
        <p className="text-muted-foreground">
          Build beautiful interfaces with accessible components and smooth animations.
        </p>

        <div className="flex items-center justify-between pt-4">
          <div className="flex gap-2">
            <AnimatedTooltip label="Like this post">
              <Heart className="size-4" />
            </AnimatedTooltip>
            <AnimatedTooltip label="Share">
              <Share2 className="size-4" />
            </AnimatedTooltip>
            <AnimatedTooltip label="Save for later">
              <Bookmark className="size-4" />
            </AnimatedTooltip>
          </div>

          <Button size="sm">Read More</Button>
        </div>
      </div>
    </div>
  )
}

​
Using hooks

Craft UI also provides useful React hooks. Here’s an example using useMediaQuery: 
import { useMediaQuery } from '@/hooks/use-media-query'
import { Button } from '@/components/ui/button'

export default function ResponsiveDemo() {
  const isMobile = useMediaQuery('(max-width: 768px)')

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">
        You are on {isMobile ? 'mobile' : 'desktop'}
      </h1>
      <Button size={isMobile ? 'sm' : 'lg'}>
        {isMobile ? 'Tap' : 'Click'} me
      </Button>
    </div>
  )
}

​
Next steps

Now that you’ve built your first components, explore more:

Base components

Explore 35+ foundational components

Craft components

Discover advanced animated components

Hooks

Learn about utility hooks

Theming

Customize colors and styles
All components are fully customizable. You own the code after copying it into your project, so feel free to modify it to match your needs.

Build docs developers (and LLMs) love

Get started for freeTalk to us