Arc ships React components as source you copy into your repo
Arc Library: free, open source React components with calm motion. Copy the code or install with the shadcn CLI.
At a glance
- What is it?
- Arc is a library of 114 React components and 22 blocks with motion built in, distributed through the shadcn registry or as plain files you copy, styled with CSS modules over a small set of design tokens and paired with a reduced motion path. It suits teams that want owned source rather than a dependency.
- Who is it for?
- Adopt Arc when your team wants component source in its own repository, with animation, keyboard support and a reduced motion path already handled per component, since every item installs as plain files over a shared set of design and motion tokens. Do not adopt it expecting a published npm package or a Tailwind requirement, because the package is marked private and the components use CSS modules, working with or without Tailwind.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 4 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on October 25, 2026, and from our analysis. They are not legal advice.
Editorial analysis
Plain source you own rather than a dependency
The delivery model is the defining decision, and it is stated in the first paragraph. Every item is plain source you own, made of CSS modules on a small set of design tokens, using Motion for animation, with keyboard support and a reduced motion path for every animation. You can install anything with the shadcn CLI or copy the files by hand. The consequence for a team is worth being explicit about: because the code lands in your repository, you can change a component's internals, adapt it to your own conventions and delete what you do not need, and no upstream release can break your build. The cost is that you now maintain that code, and the upstream project cannot push a fix into your tree.
114 components and 22 blocks, and a paid tier kept separate
The badges give the size of the free set, 114 components and 22 blocks, plus the design and motion tokens they share, and every one of them has a live preview on uiarc.dev. The showcase table marks some entries as Pro, which the README explains are part of Arc Pro and are not in this repository, while everything else installs from here for free. The named free examples read like a catalogue of motion patterns rather than generic widgets. The donut chart morphs arcs between datasets while the total rolls into the center, the billing toggle rolls monthly and yearly prices into each other with the savings included, the line chart redraws against the previous period when the range changes, and the number field has bounded steppers that say so when you reach the limit.
Motion, keyboard support and a reduced motion path
Motion is not an add-on in this library, it is a layer of the components themselves, and the phrase in the project description is calm motion. The animation library is Motion, the React animation package from motion.dev, and it is listed in the development dependencies at version 13. The accessibility story is stated as a property of every item: keyboard support and a reduced motion path for every animation. That last point is the one that separates this from a demo-heavy component set, because a motion library that ignores the user's motion preference is a problem in any product with a public audience. The repository also points to a dedicated AI and MCP section in its documentation, so agents are given the same rules the components follow.
CSS modules and tokens, and no Tailwind requirement
The styling approach deserves attention because it cuts against the current default. The components are built with CSS modules on a small set of design tokens, and the README says the library works in Next.js and Vite, with or without Tailwind. That is a real difference of approach rather than a detail, because most of the shadcn ecosystem assumes Tailwind utility classes in your JSX, which then ties your component code to your styling toolchain. With CSS modules, the markup ships with its own class names, the tokens carry the design decisions, and a project without Tailwind can still adopt the set. A project with Tailwind can still adopt it, which is what the with or without wording means.
Installing through the registry or by copying files
There are two documented routes. The shadcn route uses the CLI against the project's registry, whose badge names it `@uiarc`, with the installation instructions on the documentation site at uiarc.dev. The manual route is to copy the component files into your own project and adjust the imports. Two details from the package metadata are worth knowing before you start. The package is marked `"private": true`, which means the library is not consumed as a published npm dependency but distributed as source through the registry, and the engine requirement is Node 20 or later, with `"node": ">=20"` in the manifest. The package name is `arc-library`, the version in the manifest is a development placeholder of `0.0.0`, and the licence field is MIT.
A registry that is checked in CI
The repository treats the registry as data. There is a `registry.json` file at the root alongside a `registry/` directory, and the package scripts include a check that runs `node scripts/check-registry.mjs`. The full check is the combination of a typecheck, a lint pass and that registry check, and the manifest spells out the sequence:
npm run typecheck && npm run lint && npm run check:registryThe typecheck is `tsc --noEmit` and the lint step is `eslint .`, with the ESLint configuration in `eslint.config.mjs`. The components themselves live under `lib/`, the types under `types/`, and there is a `public/` directory for assets, with `scripts/` holding the tooling. It is a layout that assumes the registry entries and the shipped files are kept in step, which is what the registry check is for.
MIT licensing, a single tagged release, and a moving main branch
The licence is MIT, which in short terms lets you use, modify, redistribute and sell the components, with the copyright notice and the licence text kept with the copies. That is the right licence for a copy-in model, since you are copying source rather than linking a library. The release history is short, with a single tag, Arc v1.0.0, published on 2026-09-29, while the last push to the repository was on 2026-10-19, so work is continuing on the main branch after the 1.0 tag. The repository is not archived. It also carries the usual governance files, a `CONTRIBUTING.md`, a `CODE_OF_CONDUCT.md` and a `SECURITY.md`, plus a `CHANGELOG.md` for tracking what changed between versions of the components you have copied.
Editorial conclusion
Adopt Arc when your team wants component source in its own repository, with animation, keyboard support and a reduced motion path already handled per component, since every item installs as plain files over a shared set of design and motion tokens. Do not adopt it expecting a published npm package or a Tailwind requirement, because the package is marked private and the components use CSS modules, working with or without Tailwind. Verify first that the free set covers the components you need, since the showcase marks several items, including cover flow, orbit logos, wallet stack and activity rings, as Arc Pro and outside this repository.
Frequently asked questions
How do I install the Arc React components?
Through the shadcn CLI using the `@uiarc` registry, following the installation instructions on uiarc.dev, or by copying the component files into your project by hand. The library works in Next.js and Vite, with or without Tailwind.
Is Arc published as an npm package I can add as a dependency?
No. The package manifest marks it as private, and the components are distributed as source through the shadcn registry or by copying the files, so the code lives in your repository.
What is included in the free Arc repository?
114 components and 22 blocks plus the design and motion tokens they share. Items marked Pro, such as cover flow, orbit logos, wallet stack and activity rings, belong to Arc Pro and are not in the repository.
Does Arc handle reduced motion and keyboard navigation?
Yes. The README states that every component includes keyboard support and a reduced motion path for every animation, with Motion used for the animation itself.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/kuratlielia-arc-library)Was this useful?