Introduction
What Arc is, how the library is organized, and how to read a component page.
What Arc is
Arc is a library of React components and complete blocks with live previews and source you own. You install an item with the shadcn CLI, or copy its files by hand, and it lands in your repository as plain TSX and CSS modules that you can read and change.
Every preview runs the same source you install, so the keyboard behavior, loading states, and motion you try on a page are what you get.
How it is organized
- Components
- Single jobs, grouped by what they do: actions, inputs, disclosure, feedback, data, and text. Close relatives such as the four theme switches share one page.
- Special components
- Motion-forward pieces with layered interaction, like the dock, cover flow, and liquid tab bar.
- Blocks
- Complete flows built from components: sign in, billing, settings, analytics. Families such as Login and Sidebar show their variants on one page.
Everything shares one foundation of color, radius, type, and motion tokens, so items look and move alike wherever you drop them.
Reading a page
Each component and block page follows the same order, so you can jump straight to what you need:
- Preview and Code: try it, then read the exact source.
- Installation: one CLI command, or manual steps with every file.
- Usage and API reference: a copyable example and every prop with its type and default.
- Keyboard, accessibility, and motion: what it does for people using a keyboard, a screen reader, or reduced motion.
- Notes for AI: when to pick it and a Markdown version for your assistant. Use Copy page to paste the whole page into a chat.
Press / or ⌘ K anywhere in the library to search.
Free and Pro
Most components and many blocks are free to use in any project. Items marked Pro are part of Arc Pro: their previews and docs are open to everyone, and members install the source from the same page after signing in. You can filter the sidebar by Free or Pro.