Handle complex logic (accessibility, focus, keyboard navigation) without styles.
| # | Library | Best For | Core Tech |
|---|---|---|---|
| 1 | Radix UI | The gold standard for accessible, complex primitives. | React |
| 2 | React Aria | Extremely robust accessibility hooks (by Adobe). | React |
| 3 | TanStack | Complex data logic (Tables, Charts, Query). | JS / TS (Agnostic) |
| 4 | Headless UI | Simple, accessible components like Dropdowns/Tabs. | React / Vue |
| 5 | Base UI | Material UI's unstyled core. | React |
Tailwind plugins & CSS files. Use them by adding classes to HTML tags (e.g., class="btn btn-primary").
| # | Library | Best For | Installation Type |
|---|---|---|---|
| 1 | DaisyUI | Adding semantic classes (btn, card) to Tailwind. | Tailwind Plugin |
| 2 | Preline UI | Huge collection of pre-built HTML snippets. | Tailwind Plugin + JS |
| 3 | FlyonUI | Semantic classes + headless JS behavior. | Tailwind Plugin |
| 4 | Ripple UI | Clean, modern utility classes. | Tailwind Plugin |
| 5 | Flowbite (CSS) | Rapid prototyping using class names. | Tailwind Plugin |
Copy the source code into your project (manually or via CLI). You own the code and can modify it.
| # | Library | Best For | Logic Base |
|---|---|---|---|
| 1 | shadcn/ui | The industry standard for modern React apps. | Radix UI |
| 2 | Park UI | Like Shadcn, but uses PandaCSS instead of Tailwind. | Ark UI |
| 3 | Basecoat | Simple, no-framework Tailwind components. | HTML / CSS |
| 4 | HyperUI | Marketing sections (Heroes, Footers, FAQs). | HTML / CSS |
| 5 | Tailgrids | Business/Corporate sites (often paid tiers). | HTML / CSS |
| 6 | Meraki UI | Clean, RTL-friendly Tailwind components. | HTML / CSS |
Install via npm. Import fully styled components (e.g., <Button />) and customize them via props or specific theme files.
| # | Library | Best For | Styling Engine |
|---|---|---|---|
| 1 | HeroUI (NextUI) | Beautiful, high-performance modern apps. | Tailwind Variants |
| 2 | Mantine | Data-heavy dashboards and complex forms. | CSS Modules |
| 3 | Chakra UI | Rapid development with prop-based styling. | Emotion / Panda |
| 4 | Flowbite React | React wrapper around Flowbite CSS. | Tailwind |
| 5 | Material UI (MUI) | Enterprise-grade standard applications. | Emotion |
Libraries for animations. Define the math, the timing, and the properties. These are framework-agnostic or low-level.
| # | Library | Type | Best For |
|---|---|---|---|
| 1 | GSAP | Engine | Professional, complex timelines and scroll-driven storytelling. |
| 2 | Framer Motion | Engine (React) | Creating custom, physics-based interactions in React. |
| 3 | Anime.js | Engine | Lightweight, powerful SVG and property-based animations. |
| 4 | Popmotion | Engine | Functional, low-level math for custom animation systems. |
| 5 | Velocity.js | Engine | High-speed DOM animation (classic performance-focused tool). |
| 6 | ScrollReveal.js | Utility | Triggering animations specifically as elements scroll into view. |
| 7 | Typed.js | Utility | Typewriter effects and automated text sequences. |
| 8 | Wow.js | Utility | Basic "reveal" triggers (usually combined with CSS libraries). |
| 9 | AniJS | Utility | Defining simple animations directly in HTML attributes. |
Copy-Paste or Importable components that come with animations pre-configured.
| # | Library | Logic Base | Style / Aesthetic |
|---|---|---|---|
| 1 | Aceternity UI | Framer Motion | High-impact "SaaS landing page" sections and backgrounds. |
| 2 | Magic UI | Framer Motion | Glossy, modern marketing components (Bento grids, shiny buttons). |
| 3 | ReactBits | Framer Motion | Creative, artistic interactions (Text decryption, 3D cards). |
| 4 | Motion Primitives | Framer Motion | Highly polished, reusable UI atoms (animated tabs, dialogs). |