A meticulous library of React components and interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP and Motion — delivered through the shadcn CLI.
React
Next.js
shadcn/ui
TypeScript
Tailwind CSS
CSS
HTMLFeaturing Wallet, Card Stack, Magnifying Dock, and 3D Motion Carousel.
Typed command output with copy and a success trail.
Animated bar, line and area charts on theme tokens.
Streaming replies, model picker and a composer that grows.
Suggestions
Early morning fog weaving through dense evergreen trees.
Sunbeams streaming through valley clouds onto forest waters.
Golden foliage covering quiet forest trails in peak autumn.
Split bundles, cut LCP to 0.8s
Upgrade deps, rotate API tokens
Dark mode tokens and aria roles
Zero-downtime Postgres indexing
Engineered to explore unique interaction patterns—from 3D displacement hover effects to beautiful physics animations and scalable layouts.
Unique interaction patterns like displacement hover effects, fluid animations, and cards that stand out from typical UI libraries.
Interactive Card
Hover to preview
Designed to work seamlessly with Next.js, React, and Tailwind CSS. Engineered for rapid integration into real-world production projects.
Every component is crafted with intention. Each block explores a unique interaction pattern and the reasoning behind its structural design.
Launch polished interfaces in minutes using pre-built UI blocks designed for speed. Skip repetitive scaffolding and focus on shipping.
Click any component card below to inspect interactive live previews, installation guides, and full source code.
Collapsible Content
Path Navigation
5+ Action Styles
Animated Numbers
Date Picker Grid
Sortable Table
Fleet Tracker Map
Spinners & Pulse
macOS Magnification
Drag & Drop Motion
Node Graph Canvas
Responsive Header
Real impressions and feedback from developers and designers exploring Avara UI.
Frontend Engineer
"Ran the 'npx shadcn@latest add @avara-ui/...' command in my Next.js 15 app. The code dropped directly into my components folder with zero dependency issues. Pure bliss."
Full Stack Developer
"Finally a component collection where motion design feels purposeful, not distracting. The hover states, button springs, and tabs have so much character."
Software Engineer
"The way these components leverage Tailwind CSS variables makes theme customization so simple. It matched our existing design tokens in minutes."
Everything you need to know about using Avara UI, component integration, licensing, and custom styling.
Found registry component @avara-ui/animated-faq
Generated src/components/custom/blocks/AnimatedFAQBlock.tsx
Zero build lock-in • Pure TypeScript & Tailwind CSS
Installing components takes seconds using the official shadcn CLI. The code drops straight into your repository as pure TypeScript and Tailwind CSS — with zero third-party wrapper dependencies or build configuration headaches.
Yes, absolutely. All components are architected around standard Tailwind CSS variables and OKLCH design tokens. Modifying your primary color, font family, or container radius automatically updates every component across both light and dark themes.
Docs UI is 100% free and open-source under the permissive MIT license. You can use it in personal side projects, client portals, venture-backed SaaS applications, or commercial products with zero royalty fees or attribution requirements.
Our motion components rely exclusively on GPU-accelerated CSS properties (translate3d, scale, opacity) and spring curves rendered as native CSS easing. We avoid animating height or layout reflow properties whenever possible, guaranteeing zero CLS and a 100% Lighthouse score.
An open collection of 189 animated UI components built on top of shadcn/ui, Tailwind CSS, and TypeScript. Copy clean, battle-tested code straight into your codebase with zero dependency lock-in and zero runtime bloat.
Native compatibility with components.json, Tailwind CSS, and the shadcn CLI registry ecosystem.
Silky 60 FPS transitions powered by Motion springs and native Tailwind CSS transforms.
Engineered and tested for Next.js 15 App Router, React 19, and Tailwind CSS v4 & v3.
