Skip to content
hantui

Introduction

hantui is a library of 243 animated, accessible React components. You don't install it as a package. You copy each component into your codebase and own it from there.

Every component is built with React 19, Tailwind CSS v4 and Motion, and is styled with the same tokens as shadcn/ui. A component you install looks at home in an existing shadcn project, and picks up your colors and radius without extra work.

Principles

  • Motion has a job.Animation explains where something came from, confirms an action, or shows a change in state. If it does none of those, it doesn't ship.
  • Compositor-first animation. Components animate transform, opacity, filter and clip-path. Size changes use layout animations or the grid-rows technique; only a few rows and panels that must push neighboring content animate their height or width.
  • Accessible by default. Full keyboard support, visible focus, correct roles and labels, and a reduced-motion path that replaces movement with simple fades.
  • One component, one folder. No global state and no external images. Remote assets are replaced with generated gradients and SVG.

How it works

Each component page has a live preview, its demo code, an install command for the shadcn CLI, the full source for manual installs, and a props table generated from the component's own TypeScript types.

The CLI copies the component into components/ui/<name>/, along with the shared lib/motion.ts tokens it imports, and installs its npm dependencies. Start with Installation, then read Motion to learn the shared vocabulary.

Categories