Installation

attn/ui ships as code. You pull the component into your project, own it, and adapt it without wrapper lock-in.

Prerequisites

• A Next.js or React project with Tailwind CSS
• A configured components.json for shadcn
• TypeScript enabled if you want the same developer experience as this site

Install with pnpm

pnpm dlx shadcn@latest add https://attnui.com/r/nested-drawer.json

Install another component

Replace the registry URL with any published item:

pnpm dlx shadcn@latest add https://attnui.com/r/animated-avatar-stack.json
pnpm dlx shadcn@latest add https://attnui.com/r/timezone-clock.json

What gets added

• The component source itself
• Any referenced local registry dependencies
• External package dependencies declared in the registry manifest

Why this model

attn/ui follows the same ownership model popularized by shadcn/ui.

• You keep the code
• You can change the API locally
• Styling stays in your system
• Upgrades are deliberate, not automatic