al-husayn/afro-ui

A free, open-source custom UI library for African web designers and developers. Copy, paste, and customize beautifully animated components for your react, nextjs and Tailwind project. --> # ✨ Afro UI ### Beautiful animated UI components for Next.js, React & Tailwind CSS. A growing **shadcn/ui registry** featuring premium-quality components designed for modern web applications. ### 🌐 Links Website • Components • Docs • Twitter/X Afro UI is a shadcn registry built with Next.js, Tailwind CSS, and TypeScript. Each component is designed to feel premium, animate smoothly, and install into any app with a single command. You own the resulting code, so it is easy to restyle and adapt. ## Why this project exists - Share beautiful UI components in a format that works with shadcn. - Keep the code simple, copyable, and easy to customize. - Build a public registry where each component can be installed directly. ## Quick install Install a component from the registry with the shadcn CLI: ```bash pnpm dlx shadcn add al-husayn/afro-ui/bounce-sidebar ``` You can replace `bounce-sidebar` with any available component name from the registry. ## Run the project locally If you are new to Git or Next.js, follow these steps in order: ```bash git clone github.com cd afro-ui pnpm install pnpm run dev ``` Then open localhost in your browser. ## Project structure - `components/ui/` contains the registry-ready component source files. - `registry.json` defines which components are installable through shadcn. - `lib/components.ts` holds the showcase metadata, props, and usage examples for the site. - `app/` contains the Next.js app, pages, and docs shell. - `public/r/` is generated from the registry build and should stay in sync. ## Build and validate Before opening a pull request, run: ```bash pnpm run build ``` This command runs the registry build and the Next.js production build, then regenerates the public registry files. ## Contributing Issues, ideas, and pull requests are welcome. If you want to add a component or improve the docs, start with CONTRIBUTING.md. Built by @al_drake …