All posts
UI SystemsReactDesignAntora

Why we built Antora on top of shadcn/ui

shadcn/ui gives you structure. Antora gives you motion. Here's why we built a UI system that prioritises interaction quality over raw component count.

Nitesh··3 min read

Most component libraries solve the wrong problem.

They give you 50 components with correct structure and zero personality. The buttons work. The modals open. The forms validate. But the software feels assembled — like furniture from a flatpack, technically complete and completely soulless.

That's the gap Antora is trying to close.

What shadcn/ui gets right

shadcn/ui made a smart architectural decision: instead of packaging components in an npm module you import and can't change, it drops component source code directly into your project. You own it. You modify it.

That's genuinely good. It means the components aren't a black box. When something doesn't work the way you need, you change it.

But shadcn/ui is deliberately conservative about motion and interaction. That's a reasonable choice for a general-purpose library. It's not the right choice when you're building something that should feel alive.

What Antora adds

Antora extends the shadcn/ui foundation with:

  • Native animation primitives — enter, exit, layout, and gesture animations that feel native rather than bolted on
  • Interaction-aware components — components that respond to hover, focus, drag, and touch in ways that feel intentional
  • Motion theming — duration, easing, and animation style as part of the design token system, not inline overrides
  • Micro-behaviour — the small things: loading states that feel right, transitions between states that aren't jarring, focus rings that look good

The design principle

Good motion does three things:

  1. It communicates state changes
  2. It provides spatial context (where did this thing come from?)
  3. It makes the interface feel continuous rather than discrete

Most component libraries fail at all three. They either have no animation or they add transitions as an afterthought — transition: all 0.3s ease pasted everywhere.

Antora tries to treat motion as a first-class design concern. Each animation has a reason. Each transition communicates something.

The build

The technical stack is straightforward: React, TypeScript, Tailwind CSS, and Framer Motion as the animation layer. The components are designed to drop into any Next.js or React project that already uses shadcn/ui.

The harder work is the design work — deciding what each component should feel like, when it should move, how fast, and why.

That work is ongoing.

Current status

Antora is in active development. The first set of components is being built and refined. When it's ready for wider use, it'll be open sourced.

If you're interested in following the progress, the repository is on GitHub.