---
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", "blocks", "design-system", "hooks", "icons", "loaders", "pro-available", "tables"]
framework: "react"
license: "MIT"
author: "craftUI012"
website: "https://www.craftui.space"
github: "https://github.com/craftUI012/craftUI-Pro"
registry: "https://www.craftui.space/r/registry.json"
pro: true
pro_url: "https://www.craftui.space/pricing"
github_stars: 0
component_count: 7
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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/craftUI012/craftUI-Pro
- Registry JSON: https://www.craftui.space/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/craftui
- This file: https://sh4dcn.netlify.app/md/craftui.md
- Pro / pricing: https://www.craftui.space/pricing

## 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/craftUI012/craftUI-Pro.git
# fetch the raw registry index
curl -s https://www.craftui.space/r/registry.json
```

## Components (7)

| name | type | description | install |
| --- | --- | --- | --- |
| your-component | registry:ui | A placeholder component. Replace this with your custom shadcn component. | `npx shadcn@latest add https://www.craftui.space/r/your-component.json` |
| hero-section | registry:block | Marketing hero with a cluster of data panels, rolling CTAs and a logo wall that cycles on scroll. | `npx shadcn@latest add https://www.craftui.space/r/hero-section.json` |
| benchmarks-section | registry:block | Four metrics against competitors, each drawn as its own chart: isometric bars, unit field, radar and stacked slabs. | `npx shadcn@latest add https://www.craftui.space/r/benchmarks-section.json` |
| team-section | registry:block | Clustered avatars synced to a list of roles and bios. | `npx shadcn@latest add https://www.craftui.space/r/team-section.json` |
| tables-section | registry:block | Search, filters, row selection, pagination, and create, rotate and delete dialogs. | `npx shadcn@latest add https://www.craftui.space/r/tables-section.json` |
| tables-section-02 | registry:block | Help-desk queue with saved views, live SLA timers, inline status, priority and assignee, sorting, CSV export and a ticket detail sheet. | `npx shadcn@latest add https://www.craftui.space/r/tables-section-02.json` |
| hero-section-02 | registry:block | A hero with your work on a turning film wheel: drag, swipe or use the keys to spin it, with a live caption and a scrolling client row. | `npx shadcn@latest add https://www.craftui.space/r/hero-section-02.json` |

## For AI agents

```text
You are adding components from @craftui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.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.netlify.app/json (library slug: craftui).
```