Skip to main content

​
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

Type-safe

Built with TypeScript for full type safety and excellent developer experience

Accessible

Components built on Base UI React primitives with ARIA attributes and keyboard navigation

Customizable

Fully customizable with Tailwind CSS and CSS variables for theming

Animated

Smooth animations powered by Framer Motion (motion package)

​
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

Installation

Get started by installing Craft UI in your project

Quickstart

Build your first component in under 5 minutes

Base components

Explore the foundational UI components

Craft components

Discover advanced animated components

Loaders

Beautiful loading animations and spinners

Hooks

Learn about utility hooks for React

GitHub

View the source code and contribute

​
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
  • Submit a pull request with improvements
  • Share your projects built with Craft UI
Craft UI is currently in active development. Some APIs may change before the 1.0 release.

Build docs developers (and LLMs) love

Get started for freeTalk to us