> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> A modern React component library built with TypeScript, Tailwind CSS, and Framer Motion

# Welcome to Craft UI

Craft UI is a comprehensive collection of beautifully designed, accessible UI components for React and Next.js applications. Built with modern web technologies, it provides everything you need to create stunning user interfaces quickly and efficiently.

## What is Craft UI?

Craft UI is organized into multiple packages:

* **Base UI** - A collection of 35+ foundational components built on top of Base UI React, providing accessible, unstyled primitives
* **Craft UI** - A curated set of 9 advanced components with stunning animations and interactions powered by Framer Motion
* **Loaders** - 11 beautiful loading spinners and animations for various loading states
* **Hooks** - 10 utility React hooks for common patterns

All components are built with TypeScript, styled with Tailwind CSS, and designed to work seamlessly together.

## Key features

<CardGroup cols={2}>
  <Card title="Type-safe" icon="shield-check">
    Built with TypeScript for full type safety and excellent developer experience
  </Card>

  <Card title="Accessible" icon="universal-access">
    Components built on Base UI React primitives with ARIA attributes and keyboard navigation
  </Card>

  <Card title="Customizable" icon="palette">
    Fully customizable with Tailwind CSS and CSS variables for theming
  </Card>

  <Card title="Animated" icon="sparkles">
    Smooth animations powered by Framer Motion (motion package)
  </Card>
</CardGroup>

## What's included

Craft UI comes with a comprehensive set of components and utilities:

### Base UI components (35+)

Foundational components for building any interface:

* **Form controls**: Button, Input, Checkbox, Radio, Select, Switch, Slider, Toggle
* **Navigation**: Menu, Menubar, Navigation Menu, Tabs, Toolbar
* **Overlays**: Dialog, Alert Dialog, Popover, Tooltip, Context Menu
* **Data display**: Avatar, Meter, Progress, Separator, Scroll Area
* **Layout**: Accordion, Collapsible, Field, Fieldset, Form
* **Advanced**: Autocomplete, Combobox, Number Field, Toast

### Craft UI components (9)

Advanced components with stunning animations:

* **AnimatedTooltip** - Interactive tooltips with smooth hover animations
* **Cursor** - Custom cursor effects that follow mouse movement
* **Dock** - macOS-style dock with magnification effects
* **Magnetic** - Elements that magnetically attract to cursor
* **Marquee** - Infinite scrolling text and content
* **Stepper** - Animated step-by-step progress indicators
* **TextScramble** - Scrambling text reveal animations
* **TextTyping** - Typewriter effect for text
* **Timeline** - Animated timeline components

### Loaders (11)

Beautiful loading spinners and animations:

* **Classic** - Simple spinning circle loader
* **JumpingDots** - Four dots bouncing vertically
* **LeapFrog** - Dots rotating in leapfrogging pattern
* **LineSpinner** - 12 lines arranged in circle with fade
* **LineWobble** - Horizontal bar wobbling on track
* **NewtonsCradle** - Physics-inspired swinging dots
* **Orbit** - Two dots orbiting horizontally
* **PulsatingDots** - Five dots pulsing in wave pattern
* **Spinner** - Minimal circular spinner
* **Spiral** - Dots pulsing in spiral sequence
* **Zoomies** - Horizontal bar zooming continuously

### Hooks (10)

Utility hooks to enhance your applications:

* `useCallback` - Optimized callback memoization
* `useClickOutside` - Detect clicks outside elements
* `useConfetti` - Confetti celebration effects
* `useDebounce` - Debounce values and callbacks
* `useHydrated` - Check if component is hydrated
* `useIsMobile` - Responsive mobile detection
* `useMediaQuery` - Match media queries
* `useMounted` - Check if component is mounted
* `useOptimistic` - Optimistic UI updates
* `useQueryString` - URL query string management

## Quick links

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Get started by installing Craft UI in your project
  </Card>

  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Build your first component in under 5 minutes
  </Card>

  <Card title="Base components" icon="cube" href="/components/baseui/button">
    Explore the foundational UI components
  </Card>

  <Card title="Craft components" icon="wand-magic-sparkles" href="/components/craftui/animated-tooltip">
    Discover advanced animated components
  </Card>

  <Card title="Loaders" icon="spinner" href="/loaders/spinner">
    Beautiful loading animations and spinners
  </Card>

  <Card title="Hooks" icon="code" href="/hooks/use-click-outside">
    Learn about utility hooks for React
  </Card>

  <Card title="GitHub" icon="github" href="https://github.com/yogendrarana/craftui">
    View the source code and contribute
  </Card>
</CardGroup>

## Technology stack

Craft UI is built on top of modern, battle-tested technologies:

* **React 19+** - The latest version of React with improved performance
* **TypeScript** - Type-safe development experience
* **Tailwind CSS 4** - Utility-first CSS framework
* **Framer Motion** - Production-ready animation library
* **Base UI React** - Accessible component primitives
* **class-variance-authority** - Type-safe variant styling

## Design philosophy

Craft UI follows these core principles:

1. **Accessibility first** - All components are built with accessibility in mind, using semantic HTML and ARIA attributes
2. **Developer experience** - Full TypeScript support, clear documentation, and intuitive APIs
3. **Customization** - Easy to customize with Tailwind CSS and CSS variables
4. **Performance** - Optimized for production with minimal bundle size
5. **Modern** - Built with the latest web technologies and best practices

## Community and support

Craft UI is open source and welcomes contributions from the community. If you encounter any issues or have suggestions, please feel free to:

* Open an issue on [GitHub](https://github.com/yogendrarana/craftui)
* Submit a pull request with improvements
* Share your projects built with Craft UI

<Note>
  Craft UI is currently in active development. Some APIs may change before the 1.0 release.
</Note>