# Craft UI

## Docs

- [Accordion](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/accordion.md): A collapsible content component built on @base-ui/react for accessible, expandable sections.
- [Alert Dialog](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/alert-dialog.md): A modal alert dialog for important messages requiring user attention, built on @base-ui/react.
- [Autocomplete](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/autocomplete.md): An autocomplete input component with dropdown suggestions, built on @base-ui/react.
- [Avatar](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/avatar.md): An avatar component for displaying user profile images with fallback support, built on @base-ui/react.
- [Button](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/button.md): A clickable button component with multiple variants and sizes, built on @base-ui/react for accessibility.
- [Checkbox](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/checkbox.md): An accessible checkbox component with indicator, built on @base-ui/react.
- [Checkbox Group](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/checkbox-group.md): A group container for managing multiple related checkboxes, built on @base-ui/react.
- [Collapsible](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/collapsible.md): A collapsible content component with smooth animations, built on @base-ui/react.
- [Combobox](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/combobox.md): A combobox component combining input with selectable options, built on @base-ui/react.
- [Context Menu](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/context-menu.md): A context menu component triggered by right-click, built on @base-ui/react.
- [Dialog](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/dialog.md): A modal dialog component with backdrop and animations, built on @base-ui/react.
- [Field](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/field.md): A form field component with label, control, description, and error messaging, built on @base-ui/react.
- [Fieldset](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/fieldset.md): A fieldset component for grouping related form fields, built on @base-ui/react.
- [Form](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/form.md): A form container component with validation support, built on @base-ui/react.
- [Input](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/input.md): A text input component with variants and sizes, built on @base-ui/react.
- [Menu](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/menu.md): A dropdown menu component with items, groups, and submenus, built on @base-ui/react.
- [Menubar](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/menubar.md): A menubar component for application-level menus, built on @base-ui/react.
- [Meter](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/meter.md): A meter component for displaying measurements within a known range, built on @base-ui/react.
- [Navigation Menu](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/navigation-menu.md): A navigation menu component with dropdowns for site navigation, built on @base-ui/react.
- [Number Field](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/number-field.md): A number input with increment/decrement buttons and scrub functionality, built on @base-ui/react.
- [Popover](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/popover.md): A floating popover component with positioning and animations, built on @base-ui/react.
- [Preview Card](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/preview-card.md): A preview card component that shows content on hover, built on @base-ui/react.
- [Progress](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/progress.md): A progress indicator component for showing task completion, built on @base-ui/react.
- [Radio](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/radio.md): Radio button component for mutually exclusive selections, built on @base-ui/react.
- [Scroll Area](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/scroll-area.md): A customizable scrollable container with styled scrollbars, built on @base-ui/react.
- [Select](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/select.md): A dropdown select component with search and grouping support, built on @base-ui/react.
- [Separator](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/separator.md): A visual separator component for dividing content, built on @base-ui/react.
- [Slider](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/slider.md): A slider component for selecting values from a range, built on @base-ui/react.
- [Switch](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/switch.md): A toggle switch component built on @base-ui/react for on/off states.
- [Tabs](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/tabs.md): A tabbed interface component with multiple variants and orientations, built on @base-ui/react.
- [Toast](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/toast.md): Toast notification component with stacking and positioning support, built on @base-ui/react.
- [Toggle](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/toggle.md): A toggle button component with variants and sizes, built on @base-ui/react.
- [Toggle Group](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/toggle-group.md): A group of toggle buttons for single or multiple selection, built on @base-ui/react.
- [Toolbar](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/toolbar.md): A toolbar component for grouping action buttons, built on @base-ui/react.
- [Tooltip](https://mintlify.wiki/yogendrarana/craftdotui/components/baseui/tooltip.md): A tooltip component that displays contextual information on hover or focus, built on @base-ui/react.
- [Animated Tooltip](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/animated-tooltip.md): An interactive tooltip component with spring-based animations that responds to mouse movement with dynamic rotation and translation effects.
- [Cursor](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/cursor.md): A custom cursor component that replaces the default cursor with custom content when hovering over specific areas.
- [Dock](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/dock.md): A macOS-style dock component with spring animations and interactive tooltips, perfect for navigation bars and action menus.
- [Magnetic](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/magnetic.md): A wrapper component that creates a magnetic pull effect using GSAP, making elements smoothly follow the cursor with elastic easing.
- [Marquee](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/marquee.md): A smooth, infinite scrolling marquee component with customizable speed, direction, and pause-on-hover functionality.
- [Stepper](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/stepper.md): A flexible, multi-step form component with progress indicators, smooth animations, and comprehensive navigation controls.
- [Text Scramble](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/text-scramble.md): An animated text component that scrambles characters before revealing the final text, creating a hacker-style typing effect.
- [Text Typing](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/text-typing.md): A typewriter-style text animation component with an animated cursor that progressively reveals text character by character.
- [Timeline](https://mintlify.wiki/yogendrarana/craftdotui/components/craftui/timeline.md): A flexible vertical and horizontal timeline component for displaying chronological events, processes, or milestones with customizable markers and content.
- [Accessibility](https://mintlify.wiki/yogendrarana/craftdotui/guides/accessibility.md): Learn about the accessibility features built into Craft UI and best practices for creating inclusive user interfaces.
- [Component Customization](https://mintlify.wiki/yogendrarana/craftdotui/guides/customization.md): Learn how to extend and customize Craft UI components with custom variants, props, and composition patterns.
- [Theming and Styling](https://mintlify.wiki/yogendrarana/craftdotui/guides/theming.md): Learn how to customize the look and feel of Craft UI components using Tailwind CSS, CSS variables, and theme configuration.
- [useCallbackRef](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-callback.md): A hook that creates a stable callback reference that always calls the latest version of the provided function
- [useClickOutside](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-click-outside.md): A hook that detects clicks outside of a specified element and triggers a callback handler
- [useConfetti](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-confetti.md): A hook that creates beautiful confetti animations with customizable particles, origins, and duration
- [useDebounce](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-debounce.md): A hook that debounces a value, delaying updates until after a specified delay period
- [useHydrated](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-hydrated.md): A hook that safely detects when a component has hydrated on the client side, preventing hydration mismatches
- [useIsMobile](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-is-mobile.md): A hook that detects whether the current device is mobile based on viewport width
- [useMediaQuery](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-media-query.md): A hook that evaluates CSS media queries and returns whether they match the current viewport
- [useMounted](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-mounted.md): A hook that tracks whether a component is currently mounted to the DOM
- [useOptimistic](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-optimistic.md): A hook for managing optimistic UI updates with add, update, and delete operations on data collections
- [useQueryString](https://mintlify.wiki/yogendrarana/craftdotui/hooks/use-query-string.md): A hook that provides utilities for creating and manipulating URL query strings
- [Installation](https://mintlify.wiki/yogendrarana/craftdotui/installation.md): Learn how to install and configure Craft UI in your React or Next.js project
- [Introduction](https://mintlify.wiki/yogendrarana/craftdotui/introduction.md): A modern React component library built with TypeScript, Tailwind CSS, and Framer Motion
- [Classic Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/classic.md): A simple spinning circle loader with a transparent top border
- [Jumping Dots Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/jumping-dots.md): An animated loader featuring four dots that jump up and down in sequence
- [Leapfrog Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/leapfrog.md): Three dots that animate in a leapfrogging pattern, rotating and moving horizontally
- [Line Spinner Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/line-spinner.md): A circular spinner composed of 12 animated lines fading in and out
- [Line Wobble Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/line-wobble.md): A horizontal loading bar that wobbles back and forth on a track
- [Newton's Cradle Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/newtons-cradle.md): Five dots arranged in a row that swing like a Newton's cradle physics toy
- [Orbit Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/orbit.md): Two dots orbiting horizontally with smooth scale and opacity transitions
- [Pulsating Dots Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/pulsating-dots.md): Five dots that pulse in and out in a sequential wave pattern
- [Spinner Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/spinner.md): A minimal circular spinner with a bottom border that rotates
- [Spiral Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/spiral.md): Eight dots arranged in a circle that pulse in a spiral sequence
- [Zoomies Loader](https://mintlify.wiki/yogendrarana/craftdotui/loaders/zoomies.md): A horizontal bar that zooms across a track from left to right
- [Quickstart](https://mintlify.wiki/yogendrarana/craftdotui/quickstart.md): Build your first Craft UI component in under 5 minutes