---
name: "@craftui"
slug: "craftui"
description: "Animated, interaction-first components for React: 70+ loaders, interactive SVG icons, plus blocks, sections and UI primitives. Built with Tailwind CSS v4 and Motion, with every animation hand-tuned rather than generated."
category: "Animated components"
tags: ["animation", "audio", "auth", "blocks", "buttons", "cards", "design-system", "e-commerce", "forms", "glassmorphism", "hooks", "icons", "loaders", "media", "mobile", "navigation", "onboarding", "overlays", "retro", "theming"]
framework: "react"
license: null
author: "Indra-photon"
website: "https://www.craftui.space"
github: "https://github.com/Indra-photon/Interactive-SVG-Icons"
registry: "https://www.craftui.space/r/registry.json"
pro: false
pro_url: null
github_stars: 8
component_count: 158
generated_at: "2026-09-21T01:50:16.753Z"
---

# @craftui

Animated, interaction-first components for React: 70+ loaders, interactive SVG icons, plus blocks, sections and UI primitives. Built with Tailwind CSS v4 and Motion, with every animation hand-tuned rather than generated.

## Links

- Website: https://www.craftui.space
- GitHub: https://github.com/Indra-photon/Interactive-SVG-Icons
- Registry JSON: https://www.craftui.space/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/craftui
- This file: https://sh4dcn.vercel.app/md/craftui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.craftui.space/r/registry.json
pnpm dlx shadcn@latest add https://www.craftui.space/r/registry.json
bunx shadcn@latest add https://www.craftui.space/r/registry.json
# clone the source repo
git clone https://github.com/Indra-photon/Interactive-SVG-Icons.git
# fetch the raw registry index
curl -s https://www.craftui.space/r/registry.json
```

## Components (158)

| name | type | description | install |
| --- | --- | --- | --- |
| craftui-base | registry:lib | Core dependencies for CraftUI — framer-motion and motion. | `npx shadcn@latest add https://www.craftui.space/r/craftui-base.json` |
| trash-default | registry:ui | Shake animation during delete operation | `npx shadcn@latest add https://www.craftui.space/r/trash-default.json` |
| trash-shake | registry:ui | Lid lifts and bounces during delete operation | `npx shadcn@latest add https://www.craftui.space/r/trash-shake.json` |
| trash-bounce | registry:ui | Lines fill up and trash compresses during delete operation | `npx shadcn@latest add https://www.craftui.space/r/trash-bounce.json` |
| trash-dissolve | registry:ui | Paths dissolve upward sequentially like smoke during delete operation | `npx shadcn@latest add https://www.craftui.space/r/trash-dissolve.json` |
| tab-open-default | registry:ui | On hover, the dark tab slides up, the base slides down, and the triangle arrow pops up between them creating an opening effect | `npx shadcn@latest add https://www.craftui.space/r/tab-open-default.json` |
| shopping-cart-default | registry:ui | Item falls into cart from above and cart shakes when adding to cart | `npx shadcn@latest add https://www.craftui.space/r/shopping-cart-default.json` |
| refresh-default | registry:ui | Click the button to see the refresh icon in action. | `npx shadcn@latest add https://www.craftui.space/r/refresh-default.json` |
| refresh-stroke | registry:ui | Circular stroke drawing effect | `npx shadcn@latest add https://www.craftui.space/r/refresh-stroke.json` |
| refresh-dash | registry:ui | Dashed segments travel along the path | `npx shadcn@latest add https://www.craftui.space/r/refresh-dash.json` |
| msg-glass-typing | registry:ui | Front bubble bounces gently up and down to indicate someone is typing. Perfect for real-time chat applications. | `npx shadcn@latest add https://www.craftui.space/r/msg-glass-typing.json` |
| msg-glass-wiggle | registry:ui | Entire icon rotates gently (±5°) on hover. Great for unread message indicators or clickable chat buttons. | `npx shadcn@latest add https://www.craftui.space/r/msg-glass-wiggle.json` |
| msg-glass-slideIn | registry:ui | Bubbles slide in from opposite sides with spring bounce. Perfect for chat interface loading or conversation opening. | `npx shadcn@latest add https://www.craftui.space/r/msg-glass-slideIn.json` |
| mail-default | registry:ui | Envelope flap opens on hover to reveal mail inside | `npx shadcn@latest add https://www.craftui.space/r/mail-default.json` |
| mail-notification | registry:ui | Icon bounces and shows glowing ping indicator when new mail arrives | `npx shadcn@latest add https://www.craftui.space/r/mail-notification.json` |
| lock-glass-default | registry:ui | For password visibility toggles - shackle slides up-right and body slides down-left when password is visible (unlocked state) | `npx shadcn@latest add https://www.craftui.space/r/lock-glass-default.json` |
| lock-glass-unlock | registry:ui | For premium content unlock or access granted states - shackle lifts upward and rotates 90° in 3D with right side as hinge, body scales slightly | `npx shadcn@latest add https://www.craftui.space/r/lock-glass-unlock.json` |
| layout-default | registry:ui | On hover, the two filled panels swap to the opposite two panels | `npx shadcn@latest add https://www.craftui.space/r/layout-default.json` |
| layout-swap | registry:ui | On hover, the filled boxes physically morph and travel to take the position and shape of the empty boxes | `npx shadcn@latest add https://www.craftui.space/r/layout-swap.json` |
| home-default | registry:ui | Click the icon to toggle the selected state. The icon will animate to indicate selection. | `npx shadcn@latest add https://www.craftui.space/r/home-default.json` |
| home-draw | registry:ui | Stroke animation draws the house from foundation to roof during loading | `npx shadcn@latest add https://www.craftui.space/r/home-draw.json` |
| external-link-default | registry:ui | On hover, the box fills with color and the arrow bounces diagonally up-right along its direction, then returns | `npx shadcn@latest add https://www.craftui.space/r/external-link-default.json` |
| download-default | registry:ui | Arrow translates down into the tray and snaps back on click | `npx shadcn@latest add https://www.craftui.space/r/download-default.json` |
| calendar-page-flip | registry:ui | Calendar body rotates in 3D along the top edge like flipping a physical calendar page. Header with binding rings stays fixed. Perfect for month navigation. | `npx shadcn@latest add https://www.craftui.space/r/calendar-page-flip.json` |
| calendar-picker-open | registry:ui | Calendar body splits and opens like a book on hover. Left half slides left, right half slides right. Perfect for date picker buttons that open calendars. | `npx shadcn@latest add https://www.craftui.space/r/calendar-picker-open.json` |
| calendar-slide-month | registry:ui | Date dots slide out to the left and new dots slide in from the right when month changes. Calendar body and header stay fixed. | `npx shadcn@latest add https://www.craftui.space/r/calendar-slide-month.json` |
| bulb-default | registry:ui | Bulb fills and rays appear on hover to indicate ideas/tips | `npx shadcn@latest add https://www.craftui.space/r/bulb-default.json` |
| alarm-clock-default | registry:ui | The alarm rocks left and right like a ringing bell, with ears counter-rotating to sell the physics | `npx shadcn@latest add https://www.craftui.space/r/alarm-clock-default.json` |
| alarm-clock-tick | registry:ui | The clock hand sweeps a full clockwise rotation on click, like dialing an alarm to confirm it's set | `npx shadcn@latest add https://www.craftui.space/r/alarm-clock-tick.json` |
| triangle-cascade-default | registry:ui | Five horizontal bars slide into position one after another, filling a triangle shape from bottom to top in a waterfall effect | `npx shadcn@latest add https://www.craftui.space/r/triangle-cascade-default.json` |
| square-flip-default | registry:ui | A rectangle collapses to a thin line then expands back, simulating a 3D Y-axis flip animation | `npx shadcn@latest add https://www.craftui.space/r/square-flip-default.json` |
| square-corners-rotate-default | registry:ui | Four 90-degree arc segments at the corners of a square expand and contract while rotating 360° with bouncy easing | `npx shadcn@latest add https://www.craftui.space/r/square-corners-rotate-default.json` |
| square-corners-dance-default | registry:ui | Four squares at the corners of a bounding box shift positions clockwise, creating a spinning dance animation | `npx shadcn@latest add https://www.craftui.space/r/square-corners-dance-default.json` |
| spinner-orbit-dots-default | registry:ui | Dots arranged in a radial pattern rotate together as a group, with opacity gradient creating a comet-tail effect | `npx shadcn@latest add https://www.craftui.space/r/spinner-orbit-dots-default.json` |
| siri-wave-default | registry:ui | Center bar tallest, outer bars shortest — all oscillate with staggered delays creating a smooth symmetric wave that pulses outward from center | `npx shadcn@latest add https://www.craftui.space/r/siri-wave-default.json` |
| scan-line-default | registry:ui | A glowing gradient segment — bright at the leading edge, fading behind — sweeps across a faint track and resets | `npx shadcn@latest add https://www.craftui.space/r/scan-line-default.json` |
| pulse-ring-default | registry:ui | Staggered rings emanate from the center, scaling up and fading out like ripples on water | `npx shadcn@latest add https://www.craftui.space/r/pulse-ring-default.json` |
| ios-spinner-trail-default | registry:ui | Exponential opacity decay — only 4-5 spokes are visibly bright, the rest vanish sharply, creating an intense laser comet | `npx shadcn@latest add https://www.craftui.space/r/ios-spinner-trail-default.json` |
| ios-spinner-thick-default | registry:ui | 8 wide pill-shaped spokes at 45° apart — bold and graphic, great for large-screen or kiosk UIs | `npx shadcn@latest add https://www.craftui.space/r/ios-spinner-thick-default.json` |
| ios-spinner-pulse-default | registry:ui | Each spoke flashes bright in sequence — no group rotation, the glow steps discretely around the clock | `npx shadcn@latest add https://www.craftui.space/r/ios-spinner-pulse-default.json` |
| ios-spinner-grow-default | registry:ui | Each spoke shoots outward radially as it activates — a blooming radial extension effect | `npx shadcn@latest add https://www.craftui.space/r/ios-spinner-grow-default.json` |
| ios-spinner-dual-default | registry:ui | Outer ring of 12 spokes clockwise, inner ring of 8 spokes counter-clockwise — gyroscope effect | `npx shadcn@latest add https://www.craftui.space/r/ios-spinner-dual-default.json` |
| ios-spinner-dots-default | registry:ui | 12 circles on an orbit ring with comet-tail opacity — same mechanic as classic, rounder feel | `npx shadcn@latest add https://www.craftui.space/r/ios-spinner-dots-default.json` |
| ios-spinner-default | registry:ui | 12 rounded spokes with linear opacity comet tail — the exact macOS connecting spinner | `npx shadcn@latest add https://www.craftui.space/r/ios-spinner-default.json` |
| infinity-loop-default | registry:ui | A dot traces the mathematical lemniscate (infinity symbol) path smoothly and continuously | `npx shadcn@latest add https://www.craftui.space/r/infinity-loop-default.json` |
| hexagon-rotate-default | registry:ui | A hexagon outline or filled shape rotates 360° continuously with smooth linear motion | `npx shadcn@latest add https://www.craftui.space/r/hexagon-rotate-default.json` |
| heart-fill-default | registry:ui | Heart shape waits nearly empty then rapidly fills with color in a dramatic pulse, looping like a heartbeat | `npx shadcn@latest add https://www.craftui.space/r/heart-fill-default.json` |
| grid-wave-row-default | registry:ui | Each row sweeps left to right in sequence, creating a horizontal wave that cascades downward | `npx shadcn@latest add https://www.craftui.space/r/grid-wave-row-default.json` |
| grid-spiral-default | registry:ui | Dots activate in a clockwise spiral — outer ring first (top-left → top → right → bottom → left), center last | `npx shadcn@latest add https://www.craftui.space/r/grid-spiral-default.json` |
| grid-snake-default | registry:ui | Dots activate in a boustrophedon (back-and-forth) path that slithers through all 9 positions | `npx shadcn@latest add https://www.craftui.space/r/grid-snake-default.json` |
| grid-ripple-default | registry:ui | Center dot fires first, then the 4 adjacent edges, then the 4 corners — concentric expansion outward | `npx shadcn@latest add https://www.craftui.space/r/grid-ripple-default.json` |
| grid-random-default | registry:ui | Dots activate in a fixed but non-sequential order that reads as random — like a matrix initialising | `npx shadcn@latest add https://www.craftui.space/r/grid-random-default.json` |
| grid-pulse-default | registry:ui | Nine dots arranged in a 3×3 grid light up and fade in a rolling diagonal wave, top-left to bottom-right | `npx shadcn@latest add https://www.craftui.space/r/grid-pulse-default.json` |
| grid-cross-default | registry:ui | The 5 cross-shaped dots (center row + center column) pulse first, then the 4 corner dots follow — two-phase alternation | `npx shadcn@latest add https://www.craftui.space/r/grid-cross-default.json` |
| grid-corners-in-default | registry:ui | The 4 corner dots pulse first, then the 4 edge-center dots, then the center — an inward collapse opposite to ripple | `npx shadcn@latest add https://www.craftui.space/r/grid-corners-in-default.json` |
| grid-column-scan-default | registry:ui | A full column of dots lights up simultaneously, sweeping left to right like a vertical scan bar | `npx shadcn@latest add https://www.craftui.space/r/grid-column-scan-default.json` |
| grid-clock-default | registry:ui | Dots sweep clockwise from top-center (12 o'clock) through all 8 outer positions, then the center fires last | `npx shadcn@latest add https://www.craftui.space/r/grid-clock-default.json` |
| grid-checker-default | registry:ui | 5 dots on even positions and 4 dots on odd positions pulse half a cycle apart, creating a flickering checkerboard | `npx shadcn@latest add https://www.craftui.space/r/grid-checker-default.json` |
| fill-water-drop-default | registry:ui | An outlined droplet fills bottom to top with an undulating water wave | `npx shadcn@latest add https://www.craftui.space/r/fill-water-drop-default.json` |
| fill-thermometer-default | registry:ui | An outlined thermometer with a mercury column that rises from the bulb to the top in a loop | `npx shadcn@latest add https://www.craftui.space/r/fill-thermometer-default.json` |
| fill-paint-bucket-default | registry:ui | A stream of paint pours into an outlined bucket while the level inside rises, then fades and repeats | `npx shadcn@latest add https://www.craftui.space/r/fill-paint-bucket-default.json` |
| fill-hourglass-default | registry:ui | Sand streams from the top bulb into the bottom one, then the hourglass rotates 180 degrees and drains again | `npx shadcn@latest add https://www.craftui.space/r/fill-hourglass-default.json` |
| fill-flask-default | registry:ui | An outlined lab flask holds liquid while staggered bubbles rise and pop at the surface | `npx shadcn@latest add https://www.craftui.space/r/fill-flask-default.json` |
| fill-coffee-cup-default | registry:ui | An outlined coffee cup where two layered waves of liquid slosh continuously at a constant level | `npx shadcn@latest add https://www.craftui.space/r/fill-coffee-cup-default.json` |
| fill-beer-glass-default | registry:ui | An outlined beer mug fills with amber liquid while a bubbly foam cap rises on top | `npx shadcn@latest add https://www.craftui.space/r/fill-beer-glass-default.json` |
| fill-battery-default | registry:ui | An outlined battery charges up as the level sweeps from empty to full in a loop | `npx shadcn@latest add https://www.craftui.space/r/fill-battery-default.json` |
| download-bounce-default | registry:ui | Arrow continuously bounces down into the tray while download is in progress | `npx shadcn@latest add https://www.craftui.space/r/download-bounce-default.json` |
| dots-rotate-default | registry:ui | Three circular dots that continuously rotate 120 degrees around a center point | `npx shadcn@latest add https://www.craftui.space/r/dots-rotate-default.json` |
| dots-compress-default | registry:ui | Three dots alternating between horizontal spread and vertical stack with container morphing | `npx shadcn@latest add https://www.craftui.space/r/dots-compress-default.json` |
| dots-bounce-default | registry:ui | Dots in a horizontal row bounce upward sequentially with staggered delays creating a wave-like typing indicator | `npx shadcn@latest add https://www.craftui.space/r/dots-bounce-default.json` |
| dot-matrix-vortex-default | registry:ui | Each concentric ring has one bright active dot that travels its perimeter. Inner rings spin at 2×, 4×, 8× the speed of the outer ring, creating a constantly-ch… | `npx shadcn@latest add https://www.craftui.space/r/dot-matrix-vortex-default.json` |
| dot-matrix-rain-default | registry:ui | Each column runs an independent drop cycle. A bright head falls from top to bottom with a trailing glow, then pauses before the next drop begins. | `npx shadcn@latest add https://www.craftui.space/r/dot-matrix-rain-default.json` |
| dot-matrix-life-default | registry:ui | Each generation, every dot lives or dies based on its 8 neighbours following Conway's rules. Seeded with multiple blinker oscillators that interact across the … | `npx shadcn@latest add https://www.craftui.space/r/dot-matrix-life-default.json` |
| dot-matrix-chase-default | registry:ui | A bright leader and dimmer chaser travel the same spiral path 55% of its length apart. Their interlocking tails create a kinetic, predator-prey visual. | `npx shadcn@latest add https://www.craftui.space/r/dot-matrix-chase-default.json` |
| dot-matrix-bits-default | registry:ui | Each row is an independent binary counter at a different speed. The bottom row flips every tick; the top row changes rarely. Every dot can be in a unique state. | `npx shadcn@latest add https://www.craftui.space/r/dot-matrix-bits-default.json` |
| dot-circle-expand-default | registry:ui | Static center dot with four corner dots that pulse outward and return, creating a dynamic radial expansion effect | `npx shadcn@latest add https://www.craftui.space/r/dot-circle-expand-default.json` |
| dock-bounce-default | registry:ui | App icon shoots up, squashes on landing with scaleX/scaleY, decays through two secondary bounces, then pauses before repeating | `npx shadcn@latest add https://www.craftui.space/r/dock-bounce-default.json` |
| cross-expand-default | registry:ui | Static center cross with four corner squares that expand outward, rotate 90°, then retract in a pulsing geometric pattern | `npx shadcn@latest add https://www.craftui.space/r/cross-expand-default.json` |
| conic-spinner-default | registry:ui | Circular pie-style loader that fills clockwise from 0° to 360° in 8 equal steps over 2 seconds | `npx shadcn@latest add https://www.craftui.space/r/conic-spinner-default.json` |
| circular-wave-fill-default | registry:ui | A circle fills with a flowing wave animation, the color rises from bottom to top with undulating motion | `npx shadcn@latest add https://www.craftui.space/r/circular-wave-fill-default.json` |
| circle-spinner-wipe-default | registry:ui | Two concentric rings where the foreground ring wipes clockwise from 0% to 100% over the background track | `npx shadcn@latest add https://www.craftui.space/r/circle-spinner-wipe-default.json` |
| breath-default | registry:ui | A filled circle inhales and exhales with a trailing outer glow ring — inspired by the MacBook sleep indicator LED | `npx shadcn@latest add https://www.craftui.space/r/breath-default.json` |
| bars-wave-default | registry:ui | Five vertical bars with staggered height animation creating a wave effect | `npx shadcn@latest add https://www.craftui.space/r/bars-wave-default.json` |
| bars-scale-wave-default | registry:ui | Vertical bars grow and shrink in a wave pattern with staggered delays, resembling an audio equalizer | `npx shadcn@latest add https://www.craftui.space/r/bars-scale-wave-default.json` |
| bars-scale-bottom-default | registry:ui | Three vertical bars scaling up and down with bottom fixed | `npx shadcn@latest add https://www.craftui.space/r/bars-scale-bottom-default.json` |
| bars-scale-01-scale | registry:ui | Three vertical bars scaling up and down with sequential animation | `npx shadcn@latest add https://www.craftui.space/r/bars-scale-01-scale.json` |
| bars-pulse-swap-default | registry:ui | Six bars arranged in three pairs that continuously pulse while swapping between stacked and overlapped positions | `npx shadcn@latest add https://www.craftui.space/r/bars-pulse-swap-default.json` |
| bars-fill-sequential-default | registry:ui | Three bars that rise from bottom to top in sequence, creating a wave effect | `npx shadcn@latest add https://www.craftui.space/r/bars-fill-sequential-default.json` |
| bars-fade-01-fade | registry:ui | Three vertical bars with smooth fade animation | `npx shadcn@latest add https://www.craftui.space/r/bars-fade-01-fade.json` |
| bars-cascade-default | registry:ui | Four horizontal bars with stripe pattern that cascade down from top, stack up, then cascade out from bottom | `npx shadcn@latest add https://www.craftui.space/r/bars-cascade-default.json` |
| bars-bounce-default | registry:ui | Three bars that synchronously change height while bouncing between top and bottom positions | `npx shadcn@latest add https://www.craftui.space/r/bars-bounce-default.json` |
| ball-bounce-slide-default | registry:ui | A ball with extreme bounce easing slides horizontally across a ground line, creating a dynamic rolling/bouncing motion | `npx shadcn@latest add https://www.craftui.space/r/ball-bounce-slide-default.json` |
| ball-bounce-dashed-default | registry:ui | Ball stays centered and bounces in place while a dashed ground line scrolls underneath, creating the illusion of motion | `npx shadcn@latest add https://www.craftui.space/r/ball-bounce-dashed-default.json` |
| ball-bounce-box-default | registry:ui | A square box outline rotates 90° in stepped intervals while a ball bounces rapidly inside it | `npx shadcn@latest add https://www.craftui.space/r/ball-bounce-box-default.json` |
| ball-bounce-alternate-default | registry:ui | A ball slides left to right then reverses direction, bouncing on the ground line creating a pendulum-like motion | `npx shadcn@latest add https://www.craftui.space/r/ball-bounce-alternate-default.json` |
| audio-wave-vertical-default | registry:ui | Five vertical bars animating in a symmetric wave pattern like audio visualization | `npx shadcn@latest add https://www.craftui.space/r/audio-wave-vertical-default.json` |
| audio-bars-sequential-default | registry:ui | Six vertical bars with sequential wave animation traveling from left to right | `npx shadcn@latest add https://www.craftui.space/r/audio-bars-sequential-default.json` |
| audio-bars-opacity-default | registry:ui | Six vertical bars fading in and out as they grow and shrink, creating a ghosting wave effect | `npx shadcn@latest add https://www.craftui.space/r/audio-bars-opacity-default.json` |
| audio-bars-horizontal-default | registry:ui | Six vertical bars with perfectly synchronized alternating heights creating a rhythmic wave | `npx shadcn@latest add https://www.craftui.space/r/audio-bars-horizontal-default.json` |
| audio-bars-glow-default | registry:ui | Six vertical bars with gradient fill, glow effect, and synchronized alternating animation | `npx shadcn@latest add https://www.craftui.space/r/audio-bars-glow-default.json` |
| app-download-default | registry:ui | A rounded arc sweeps around a faint track using strokeDashoffset animation, with a brief pause between each full rotation | `npx shadcn@latest add https://www.craftui.space/r/app-download-default.json` |
| activity-rings-default | registry:ui | Three nested arcs (75% visible) rotate at different speeds — outer slowest, inner fastest — with decreasing opacity inward | `npx shadcn@latest add https://www.craftui.space/r/activity-rings-default.json` |
| travel-card-default | registry:block | The image, background color, CTA button, and a badge icon all animate between a cover-photo stage and a detail stage with price and tags, connected by an icon … | `npx shadcn@latest add https://www.craftui.space/r/travel-card-default.json` |
| theme-button-default | registry:block | Collapsed status pill morphs into an expanded font or theme list via a shared layoutId spring, with a blur cross-fade on the inner content. Themes/fonts, selec… | `npx shadcn@latest add https://www.craftui.space/r/theme-button-default.json` |
| teletype-clock-default | registry:block | Four HH:MM digit cards. On change, the old digit's top half hinges down on the center seam (ease-in free fall), then the new digit's bottom half swings into pl… | `npx shadcn@latest add https://www.craftui.space/r/teletype-clock-default.json` |
| subscribe-button-default | registry:block | A subscribe pill that morphs idle → field → confirmation → idle on one persistent `layout` node, with letter-by-letter label growth during the request and a se… | `npx shadcn@latest add https://www.craftui.space/r/subscribe-button-default.json` |
| subitem-navbar-subitem-navbar | registry:block | Tabs expand a panel above the bar via a spring-driven height animation. Panels are either a chip filter list (subs) or any React node (panel). LoginPanel is a … | `npx shadcn@latest add https://www.craftui.space/r/subitem-navbar-subitem-navbar.json` |
| steps-count-default | registry:block | A vaul bottom sheet wrapping a step-count chart. Each bar is a Base UI vertical slider whose fill is coloured by interpolating in OKLCH rather than sRGB, so th… | `npx shadcn@latest add https://www.craftui.space/r/steps-count-default.json` |
| question-builder-modal-default | registry:block | A two-level modal built on shadcn's Dialog inspired by Luma modal transition. | `npx shadcn@latest add https://www.craftui.space/r/question-builder-modal-default.json` |
| profile-card-navbar | registry:block | Small avatar in a phone frame expands via layoutId into a floating profile card with staggered menu groups. | `npx shadcn@latest add https://www.craftui.space/r/profile-card-navbar.json` |
| product-card-default | registry:block | Three photos morph from an overlapping stacked deck into an evenly spaced fan, while the CTA morphs from a small gallery icon into a full-width action button a… | `npx shadcn@latest add https://www.craftui.space/r/product-card-default.json` |
| pixel-dissolve-card-default | registry:block | Clicking the card swaps the image underneath instantly, then dissolves the outgoing photo away as a size × size grid of tiles. Each tile is a background-positi… | `npx shadcn@latest add https://www.craftui.space/r/pixel-dissolve-card-default.json` |
| onboarding-form-default | registry:block | Multi-step onboarding form with a vertical ticker step indicator on the left and an animated question panel on the right, covering five field types: radio, dro… | `npx shadcn@latest add https://www.craftui.space/r/onboarding-form-default.json` |
| netflix-sign-in-default | registry:block | A profile-picker gate where the chosen avatar flies on an `arc()` path between the roster and the centre, a PIN pad grows out of it, and success hands the bott… | `npx shadcn@latest add https://www.craftui.space/r/netflix-sign-in-default.json` |
| morphing-image-effect-default | registry:block | Three-stage morph: thumbnail pill → landscape card → portrait card. Text scales inversely as the image grows. | `npx shadcn@latest add https://www.craftui.space/r/morphing-image-effect-default.json` |
| hero-roster-default | registry:block | A roster-to-dossier gallery built on shared-element transitions: one layoutId per card carries it between the thumbnail rail and the full pane, while the detai… | `npx shadcn@latest add https://www.craftui.space/r/hero-roster-default.json` |
| frosted-navbar-frosted-navbar | registry:block | No hardcoded height or width: the bar sizes to its content and its parent's width, so it drops into any layout as a <nav> or <header>. The blur layer extends p… | `npx shadcn@latest add https://www.craftui.space/r/frosted-navbar-frosted-navbar.json` |
| feedback-button-default | registry:block | A thumbs up/down pair that morphs into a confirmation bar via a single persistent node running `layout`, with an Undo capsule that plays the morph back in reve… | `npx shadcn@latest add https://www.craftui.space/r/feedback-button-default.json` |
| curve-heading-default | registry:block | The headline is not a straight line of text: every glyph is positioned by a Gaussian curve equation, distributed along it by arc length and rotated to its tang… | `npx shadcn@latest add https://www.craftui.space/r/curve-heading-default.json` |
| contact-reveal-card-default | registry:block | Hovering an icon previews which slice of the identity string it maps to; clicking commits the selection so it also works on touch. The highlighted span and its… | `npx shadcn@latest add https://www.craftui.space/r/contact-reveal-card-default.json` |
| checkout-button-default | registry:block | A compact trigger button that morphs into a checkout card with tabbed payment methods (QR, card, Apple Pay, Amazon Pay) and a connect-wallet screen, all sharin… | `npx shadcn@latest add https://www.craftui.space/r/checkout-button-default.json` |
| category-ticker-vertical-marquee | registry:block | Auto-scrolling vertical word ticker with kinetic typography. A fixed arrow pointer highlights the active item as the list cycles on a timed interval. | `npx shadcn@latest add https://www.craftui.space/r/category-ticker-vertical-marquee.json` |
| avatar-default | registry:block | A team cluster laid out on a hatched placeholder grid — avatars sit in fixed cells around a centre brand mark under a circular fade, and hovering one lifts it … | `npx shadcn@latest add https://www.craftui.space/r/avatar-default.json` |
| approve-switch-default | registry:block | A two-pill decision control that morphs in place: the pressed slot expands and tints while the other collapses to an undo circle, the word completes itself wit… | `npx shadcn@latest add https://www.craftui.space/r/approve-switch-default.json` |
| ai-chat-default | registry:block | A theme-token-driven AI prompt composer. Mode and model pickers morph between a collapsed pill and an expanded panel through a shared layoutId spring with a bl… | `npx shadcn@latest add https://www.craftui.space/r/ai-chat-default.json` |
| wellness-hero-01-default | registry:block | A full-height wellness hero: serif headline, a dark primary CTA beside a light secondary, a mask-faded bloom image on the right, and a product table pinned to … | `npx shadcn@latest add https://www.craftui.space/r/wellness-hero-01-default.json` |
| team-cluster-01-default | registry:block | A team section built around the avatar cluster. Perfet to use to showcase your team details in a website. | `npx shadcn@latest add https://www.craftui.space/r/team-cluster-01-default.json` |
| orchid-ai-01-default | registry:block | A hero section made for OrchidAI. | `npx shadcn@latest add https://www.craftui.space/r/orchid-ai-01-default.json` |
| navbar-01-default | registry:block | One strip, three states: hidden when idle, a thin bar on the active route, a full fill on hover. Width never changes, so the fill reads as the underline rising… | `npx shadcn@latest add https://www.craftui.space/r/navbar-01-default.json` |
| feature-gallery-02-default | registry:block | Five travel destinations revealed through a sticky scroll. The right panel stacks images in a weighted parallax strip; the left panel slides in destination inf… | `npx shadcn@latest add https://www.craftui.space/r/feature-gallery-02-default.json` |
| feature-gallery-01-default | registry:block | Cards rise into place on scroll, then the clicked card widens around a stationary image while the rest narrow. Heights never change; the label and scrim fade i… | `npx shadcn@latest add https://www.craftui.space/r/feature-gallery-01-default.json` |
| feature-ai-01-default | registry:block | A split feature section for AI, GPU and developer-infrastructure marketing pages: an isometric compute-stack diagram anchors the header, a list of capability w… | `npx shadcn@latest add https://www.craftui.space/r/feature-ai-01-default.json` |
| akta-hero-01-default | registry:block | A hero for data and API products drawn as a technical document: square planes, hairline rules, corner crop marks, and an uppercase monospace UI voice against o… | `npx shadcn@latest add https://www.craftui.space/r/akta-hero-01-default.json` |
| akta-benchmarks-01-default | registry:block | Four benchmark readouts on the 1440 grid, separated by hairline rules and corner notches rather than cards. F1 is an isometric bar city, accuracy a hundred-uni… | `npx shadcn@latest add https://www.craftui.space/r/akta-benchmarks-01-default.json` |
| tool-connector-default | registry:block | Seven marketing and data tools wired into a single stack. Dashed rails run from each logo into a central card, light pulses travel the rails on a 7.5s loop, an… | `npx shadcn@latest add https://www.craftui.space/r/tool-connector-default.json` |
| modular-block-default | registry:block | An isometric cube with one corner block cut out and set down beside it — sharp corners, flat shading, nothing else on the page. | `npx shadcn@latest add https://www.craftui.space/r/modular-block-default.json` |
| gpu-infrastructure-default | registry:block | An isometric compute stack — three GPU units racked on a plinth inside a dashed footprint. For AI, GPU and developer-infrastructure pages that need a picture o… | `npx shadcn@latest add https://www.craftui.space/r/gpu-infrastructure-default.json` |
| workflow-pipeline-default | registry:block | A three-lane automation diagram: web, maps and AI sources on the left, a settings card in the middle, and the agents and booked confirmation they produce on th… | `npx shadcn@latest add https://www.craftui.space/r/workflow-pipeline-default.json` |
| upgrade-modal-default | registry:block | An upsell dialog in its open state on the shadcn Nova preset (Stone, Blue, radius 0). Gradient hero with a square close mark, a title-and-badge row held apart … | `npx shadcn@latest add https://www.craftui.space/r/upgrade-modal-default.json` |
| stacked-tower-default | registry:block | Four cylindrical units stacked into a deliberately unsteady tower. Every ellipse obeys one camera ratio, so height reads as vertical offset rather than as tilt… | `npx shadcn@latest add https://www.craftui.space/r/stacked-tower-default.json` |
| rewards-card-default | registry:block | An onboarding card on the shadcn Nova preset with a layer-blurred blue haze across the top, three inset-bordered tiles carrying hand-drawn ink illustrations — … | `npx shadcn@latest add https://www.craftui.space/r/rewards-card-default.json` |
| notes-card-default | registry:block | A task list screen inside a phone shell — status bar, home indicator, and a card that fills the display between them. Header with a primary action, a segmented… | `npx shadcn@latest add https://www.craftui.space/r/notes-card-default.json` |
| insight-card-default | registry:block | A marketing card whose lower half is a halftone field with a comet swept through it — the cone is a void carved out of the dots, not a shape drawn over them. O… | `npx shadcn@latest add https://www.craftui.space/r/insight-card-default.json` |
| flight-card-default | registry:block | A full-bleed travel poster with the flight held behind a progressive blur that fades away at the card's midline — airport codes, cities and times either side o… | `npx shadcn@latest add https://www.craftui.space/r/flight-card-default.json` |
| otp-input-ripple | registry:ui | Each box wears an SVG outline that behaves like a liquid surface — typing nudges it, moving to the next box hands the ripple off toward its right edge. Pass a … | `npx shadcn@latest add https://www.craftui.space/r/otp-input-ripple.json` |
| button-whimsical | registry:ui | On hover or focus, five color-shifted sparkle particles launch along the button's border via CSS offset-path, each with its own speed, scale and landing spot. | `npx shadcn@latest add https://www.craftui.space/r/button-whimsical.json` |
| button-confetti | registry:ui | On click, a burst of color-varied confetti pieces launches from the button center — each with its own angle, distance and rotation — arcing up and falling back… | `npx shadcn@latest add https://www.craftui.space/r/button-confetti.json` |
| button-scramble | registry:ui | On hover or focus, the label's characters cycle rapidly through random glyphs before locking in to the real text one character at a time, left to right — a dec… | `npx shadcn@latest add https://www.craftui.space/r/button-scramble.json` |
| alert-dialog-scale | registry:ui | Alert Dialog - Scale | `npx shadcn@latest add https://www.craftui.space/r/alert-dialog-scale.json` |
| alert-dialog-blur | registry:ui | Alert Dialog - Blur | `npx shadcn@latest add https://www.craftui.space/r/alert-dialog-blur.json` |
| alert-dialog-slam | registry:ui | Alert Dialog - Slam | `npx shadcn@latest add https://www.craftui.space/r/alert-dialog-slam.json` |
| alert-dialog-ios | registry:ui | Alert Dialog - iOS | `npx shadcn@latest add https://www.craftui.space/r/alert-dialog-ios.json` |
| alert-dialog-terminal | registry:ui | Alert Dialog - Terminal | `npx shadcn@latest add https://www.craftui.space/r/alert-dialog-terminal.json` |
| alert-dialog-curtain | registry:ui | Alert Dialog - Curtain | `npx shadcn@latest add https://www.craftui.space/r/alert-dialog-curtain.json` |
| alert-dialog-reactive | registry:ui | Alert Dialog - Reactive | `npx shadcn@latest add https://www.craftui.space/r/alert-dialog-reactive.json` |
| accordion-clip | registry:ui | Two-layer card reveal — the question clips away via clip-path in the chosen direction, exposing the answer beneath. Click the answer to return. | `npx shadcn@latest add https://www.craftui.space/r/accordion-clip.json` |
| accordion-drawer | registry:ui | Each trigger lifts with a 3D spring when open, and the content slides up from behind it. Spring stiffness and damping are fully configurable via the DialKit pa… | `npx shadcn@latest add https://www.craftui.space/r/accordion-drawer.json` |
| accordion-ease | registry:ui | Content panel opens and closes with a cubic-bezier easing curve. Use the DialKit easing editor to draw any curve — ease-out, ease-in-out, or a custom bezier. | `npx shadcn@latest add https://www.craftui.space/r/accordion-ease.json` |

## For AI agents

```text
You are adding components from @craftui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/craftui.md) for the component list.
2. Fetch the machine-readable index: https://www.craftui.space/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: craftui).
```