72Get started

HextaUI and shadcn/ui

HextaUI is not a replacement for shadcn/ui. It is a registry you add to a shadcn/ui project, with the same CLI, the same component names and the same theme tokens. This page explains what it adds and when you don’t need it.

The short answer

Use shadcn/ui when you want a clean starting point and plan to write the loading, error and empty states yourself. Add HextaUI when you want those states, the motion and the accessibility details already done, or when you need a component shadcn/ui doesn’t ship. You can mix both in one project, one component at a time.

What stays the same

  • You install with the shadcn CLI, and the source is copied into your project. Nothing is locked inside a package.
  • Components keep the shadcn/ui names, parts and props, so Dialog, DialogTrigger and DialogContent work the way you expect.
  • Styling uses the same theme tokens, such as --background, --primary and --radius, with Tailwind CSS v4.
  • Files land in @/components/ui, next to any shadcn/ui components you already have.

Adding a component looks like this:

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json

What HextaUI adds

  • Finished states. Buttons show pending, success and error feedback from the promise you return. Switches save and roll back. Inputs shake when they are invalid. Spinners wait before they appear so fast work doesn’t flicker.
  • Motion you can interrupt. Animations share one set of easing curves and durations, can be reversed halfway and turn into a fade when reduced motion is on.
  • Touch, right-to-left and high contrast. Tap targets grow on touch screens, text inputs stay at 16px so iOS doesn’t zoom, layouts mirror for right-to-left languages and focus rings stay visible in Windows high contrast mode.
  • Components that aren’t in the shadcn/ui list at the time of writing (October 2026), such as Tree, Video player, Questionnaire, Number flow, Shimmer and Scroll fade.
  • 9 hooks and 5 utilities you can install on their own, like useButtonFeedback and useDelayedLoading.
  • 22 blocks for AI products, such as a chat thread, tool calls and voice mode. These are part of HextaUI Pro, which is paid, and Prompt Input is free.
  • Docs written for agents too. Every page has a Markdown version, and there is an MCP server your assistant can query.

When shadcn/ui alone is the better choice

  • You want Radix primitives. HextaUI components are built on Base UI only.
  • You want the smallest possible component and would rather add states and motion yourself. HextaUI components carry more code because they handle more cases.
  • You depend on the shadcn/ui blocks, charts and themes, or on the community Vue and Svelte ports. HextaUI is React only.
  • You need the largest community and the most third-party examples. shadcn/ui has far more of both.

Using both together

Because the names and tokens match, you can replace one component at a time. Run the add command with --overwrite to swap a shadcn/ui component for the HextaUI version, then review the diff in git before you keep it. Components you don’t replace keep working. HextaUI has 65 components, and Installation covers the theme tokens they expect.