Introduction

A curated registry of animated React components, built with Tailwind CSS and Motion. Install source you own, refine it to match your product.

What is Afro UI?

Afro UI follows the shadcn registry protocol. Each component installs as source in your repository, not as a package dependency. You retain full control over styling, structure, and behavior.

What's included

• •Physics-based spring animations powered by Motion
• •Dark and light mode support via your theme tokens
• •Controlled and uncontrolled APIs where appropriate
• •Respects prefers-reduced-motion across all components
• •Tailwind CSS only: no runtime CSS-in-JS
• •TypeScript with exported prop types

How it works

The shadcn CLI reads the registry, resolves dependencies, and writes component files into components/ui/. Required packages (such as motion or prism-react-renderer) are installed automatically. Nothing imports from Afro UI at runtime.

Quickstart

Afro UI requires a React or Next.js project with shadcn configured. If you have not initialized shadcn yet, run:

Then add any component with a single command:

Replace scroll-progress with any slug from the Installing page.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

License & Usage

• •Free to use and modify in both personal and commercial projects.
• •Attribution to Afro UI is appreciated when using a component.
• •Please don't resell the components as your own kit.