Auto-generate your docs

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.

Install the Button component

Use the CLI to install the Button component:

npx craftui-cli add button

yarn dlx craftui-cli add button

pnpm dlx craftui-cli add button

bunx craftui-cli add button

This creates a Button component in your project with all necessary dependencies.

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>
  )
}

Run your development server

Start your development server:

npm run dev

yarn dev

pnpm dev

bun 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:

Install AnimatedTooltip

npx craftui-cli add animated-tooltip

yarn dlx craftui-cli add animated-tooltip

pnpm dlx craftui-cli add animated-tooltip

bunx craftui-cli add animated-tooltip

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>
  )
}

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.

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Quickstart

Quickstart

Your first component

Button variants and sizes

Try an animated component

How AnimatedTooltip works

Building a complete example

Using hooks

Next steps

Base components

Craft components

Hooks

Theming

​Quickstart

​Your first component

​Button variants and sizes

​Try an animated component

​How AnimatedTooltip works

​Building a complete example

​Using hooks

​Next steps

Base components

Craft components

Hooks

Theming

Quickstart

Your first component

Button variants and sizes

Try an animated component

How AnimatedTooltip works

Building a complete example

Using hooks

Next steps