Installation

Add components to your project in one command. Source files land in your codebase with no package lock-in.

Step 1: Set up shadcn

Initialize shadcn in your project. Skip this step if shadcn is already configured.

npx shadcn@latest init

Step 2: Add a component

Select a component from the sidebar and run its install command. The CLI copies the source into components/ui/ and installs peer dependencies automatically.

npx shadcn add al-husayn/afro-ui/<slug>

Package managers

The shadcn CLI supports npm, pnpm, yarn, and bun.

npm
npx shadcn add al-husayn/afro-ui/scroll-progress
pnpm
pnpm dlx shadcn add al-husayn/afro-ui/scroll-progress
yarn
yarn dlx shadcn add al-husayn/afro-ui/scroll-progress
bun
bunx --bun shadcn add al-husayn/afro-ui/scroll-progress

All components

Every component in the registry. Use the copy button to grab the install command.

Bounce sidebarA vertical navigation list with a bouncy, spring-animated active indicator.
npx shadcn add al-husayn/afro-ui/bounce-sidebar
Proximity SidebarAn interactive sidebar with proximity hover effects that appears while scrolling and responds to scroll intensity.
npx shadcn add al-husayn/afro-ui/proximity-sidebar
Scroll ProgressA scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
npx shadcn add al-husayn/afro-ui/scroll-progress
Code BlockA clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.
npx shadcn add al-husayn/afro-ui/code-block
OTP InputA one-time-code input whose characters roll into place behind a caret that slides from slot to slot.
npx shadcn add al-husayn/afro-ui/otp-input
Text ScrambleA text element that scrambles its content before revealing the final text.
npx shadcn add al-husayn/afro-ui/text-scramble
Magnetic DockA dock that responds to cursor movement with a magnetic effect.
npx shadcn add al-husayn/afro-ui/magnetic-dock
Flickering GridA grid that flickers with a subtle animation.
npx shadcn add al-husayn/afro-ui/flickering-grid
YouTube EmbedA responsive YouTube embed with autoplay, looping, customizable controls, and an optional masked presentation.
npx shadcn add al-husayn/afro-ui/youtube-embed