A shadcn registry of animated React components you install straight into your own codebase.
_{193 components and website sections · Next.js and React (Vite) · themed with CSS variables · MIT licensed}

Browse components → · Get started → · Build a theme

Why Avara UI?

Most component libraries hand you a package to depend on. Avara UI hands you the source. Each component is published as a shadcn registry item, so the shadcn CLI writes the file into your project, installs whatever npm packages it needs, and steps out of the way. After that it is your code: rename it, restyle it, delete the parts you don't use.

There is no wrapper package to keep up to date and nothing to eject from later.

What you get

• 193 components, from base UI primitives to full page sections. Run npx shadcn@latest list @avara-ui for the live list.
• Full website sections as well as primitives. Heroes, pricing, footers, dashboards, auth forms, carousels, maps, media players and more, in 18 categories.
• One source for two frameworks. No shipped component imports from next/*, so the same file compiles in a Next.js App Router project and in a Vite React app. Components that render links or images accept a linkComponent / imageComponent prop, so Next.js users can pass next/link and next/image.
• Themes as CSS variables. Colours, radius and fonts come from CSS variables, not hard-coded classes. The Themes page has 14 presets and a customiser, and it exports a block you paste into your global stylesheet.
• Motion that fits the job. Fixed animations are plain CSS. Pointer, scroll and drag effects use GSAP, and several of those also ship a Motion build under the same name with a -motion suffix.
• Open in v0. Docs examples can be opened in v0 with your chosen theme applied.
• Docs as Markdown too. Every docs page is also published as plain Markdown under /docs-md/, which is handy for pasting into an AI assistant.

Quick start

Avara UI assumes a project that already has Tailwind CSS and a shadcn setup. The installation guide walks through both from scratch.

1. Initialise shadcn (once per project). The components are built on Radix, so choose the Radix base:

npx shadcn@latest init --base radix --preset nova

2. Register the Avara UI registry (once per project):

npx shadcn@latest registry add @avara-ui=https://avaraui.com/r/{name}.json

That is the same as adding this to components.json yourself:

{
	"registries": {
		"@avara-ui": "https://avaraui.com/r/{name}.json"
	}
}

3. Add components by name:

npx shadcn@latest add @avara-ui/hero
npx shadcn@latest add @avara-ui/hero @avara-ui/navbar   # several at once

You can skip step 2 and install by full URL instead, e.g. npx shadcn@latest add https://avaraui.com/r/hero.json. Every component page on the site shows both forms.

To search the registry from your terminal:

npx shadcn@latest search @avara-ui --query pricing

Supported frameworks

Framework	Supported versions	Guide
Next.js (App Router)	Next.js 14, 15 and 16 · React 18 and 19 · Tailwind CSS v3.4+ or v4	Installation · Quick start
React + Vite	Vite 5 to 8 · React 18 and 19 · Tailwind CSS v4	Installation · Quick start

Both need the @/* path alias. TypeScript is recommended, but plain JavaScript projects work too. The components also work in Create React App and React Router projects.

Categories

Category	Items		Category	Items
Marketing	63		Commerce	11
Data display	40		Communication	10
Layout	34		Actions	7
Media	31		Feedback	7
Forms	28		Overlays	7
Navigation	19		Typography	6
Utilities	19		Code	5
Scroll	13		Authentication	4
Maps	2		Dates	4

Some items belong to more than one category, so the counts add up to more than the item total.

Running the docs site locally

This repository holds the components and the documentation site that publishes them.

git clone https://github.com/AlgorizeTech/Avara-UI.git
cd Avara-UI
npm install
npm run dev      # http://localhost:3000

The site is a static export (output: "export") built with Next.js 15, React 19, Tailwind CSS 4, TypeScript and MDX. npm run build does more than compile the site. It regenerates the Markdown docs, rebuilds the registry, runs the framework and consumer type checks, and only then runs next build.

The optional .env settings (site URL, analytics, verification tokens and so on) are documented in .env.example. The site builds without any of them.

Where things live

Path	What it is
src/components/custom/blocks/	The components and sections the registry ships.
src/components/custom/ui/, src/components/ui/	Base UI primitives, also shipped.
src/app/docs/[framework]/	One MDX docs page per component, shared by the Next.js and React docs.
src/preview/demos/	Live demos rendered on the docs pages.
src/scripts/	Registry generator, drift checks and Markdown export.
registry.json, public/r/	The generated registry. Don't edit by hand.
api/v0.ts	The site's only serverless function, which serves themed items to v0.
mcp/	An MCP server for AI coding agents (standalone package, not yet published).

Contributing

Bug fixes, improvements to existing components and docs corrections are all welcome. Please read the contribution guide before opening a pull request. It covers the checks every change has to pass.

Credits

A handful of base primitives (accordion, avatar, badge, button, sheet and slider) are derived from shadcn/ui under its MIT License. THIRD-PARTY-NOTICES.md lists exactly which files. Everything else is original AlgorizeTech work.

Runtime libraries the components use, such as Radix UI, Lucide, GSAP and Motion, are installed from npm in your project and keep their own licenses.

License

Avara UI is free for personal and commercial use under the MIT License. Copyright © 2025–2026 AlgorizeTech.