Installation

Manicat UI is a fork of Arc: the components are still Arc's, we just rebranded the library and its install surface and publish the same source from this site's own registry.

RequirementsCopy Anchor Link

• React 19 with TypeScript
• Next.js (App Router) or Vite
• motion for animation. Some items also use lucide-react or a Radix UI primitive; the CLI installs whatever an item needs.
• The @/* import alias, which Next.js and shadcn set up by default

No Tailwind is required. Manicat UI styles are CSS modules that read CSS variables.

With the shadcn CLICopy Anchor Link

Register the @manicat namespace once in components.json:

{
  "registries": {
    "@manicat": "https://manicat.dev/r/{name}.json"
  }
}

Then add items by name. Local dependencies, such as the components inside a block, come along automatically:

npx shadcn@latest add @manicat/button @manicat/dialog

Every item also installs from its full URL, without touching components.json:

npx shadcn@latest add https://manicat.dev/r/button.json

Your first install adds manicat-foundation, the design and motion tokens. Import it once at the root of your app:

// Next.js. On Vite, use src/main.tsx.
import "@/components/manicat/foundation.css";

Setting up a new projectCopy Anchor Link

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

npm create vite@latest my-app -- --template react-ts
cd my-app
npx shadcn@latest init

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

import path from "node:path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
});

Copy and pasteCopy Anchor Link

1. Install the shared packages: npm install motion lucide-react.
2. Copy registry/foundation.css, registry/motion-tokens.ts and lib/motion-tokens.ts from this repository into the same paths under your @/ root, and import the CSS once at the root.
3. Copy the item's folder from registry/components/<id>/ or registry/blocks/<id>/, keeping the path. Copied files keep this repository's layout and import each other through @/; the CLI install rewrites that for you. The item's public/r/<id>.json file lists every file and npm package it needs.

Every item page here has a Manual tab with the exact files.

UsageCopy Anchor Link

The CLI puts every file in a manicat/ folder under the components alias in your components.json, for example components/manicat/button/button.tsx, or src/components/manicat/... in a src/ project or monorepo package. Manicat UI files import each other with relative paths, so any alias setup works, and you can move the manicat/ folder as a whole. Use them like any local component:

import { Button } from "@/components/manicat/button/button";

export default function Page() {
  return <Button>Save changes</Button>;
}

The code is yours: edit it, rename it, move it.

React Native and VueCopy Anchor Link

Ports install as separate items, named after the framework:

npx shadcn@latest add @manicat/button-react-native
npx shadcn@latest add @manicat/button-vue

See Frameworks, React Native and Vue for setup.

React Native and VueCopy Anchor Link

Ports install as separate items, named after the framework:

npx shadcn@latest add @manicat/button-react-native
npx shadcn@latest add @manicat/button-vue

See Frameworks, React Native and Vue for setup.

TroubleshootingCopy Anchor Link

Cannot find module @/registry/.... Manicat UI files import each other through the @/* alias. Map it to your project root in tsconfig.json, and in vite.config.ts for Vite.

Components render without styles or colors. Import the tokens once at the root: import "@/components/manicat/foundation.css";. If the file is missing, run npx shadcn@latest add @manicat/manicat-foundation.

The CLI says @manicat is an unknown registry. Add the registries entry to components.json, or install from the full URL: npx shadcn@latest add https://manicat.dev/r/<id>.json.

Dark mode does not switch. Manicat UI follows the data-theme attribute on <html>, not the dark class. Set data-theme="dark" before the page paints to avoid a flash of the light theme.

Animations do not play. Manicat UI honors the reduced motion setting of your operating system and swaps movement for simple fades. Turn it off to see the full motion, and make sure motion is installed.