Menu

Get Started

Components

Blocks

Installation

Add arctis/ui components and blocks to your app.

Use the CLI to copy the pieces you need into any React app running Tailwind CSS v4.

Add

npx @arctis-sh/@arctis-sh/ui@latest add button
npx @arctis-sh/@arctis-sh/ui@latest add slider pricing-01

The CLI writes files to components/ui, components/blocks, and lib, installs their npm dependencies, and keeps the @/ imports intact.

import { Button } from "@/components/ui/button"
import { Pricing01 } from "@/components/blocks/pricing/pricing-01"

The peer dependencies are react and react-dom (^19).

Theme

Define the standard tokens in your global CSS (--background, --foreground, --muted, --border, --primary, --radius, and the rest). Components read from those variables rather than shipping a complete app theme.

Full package (optional)

If you prefer npm imports over copied files, install the full package:

npm i @arctis-sh/ui@latest
import { Button } from "@arctis-sh/ui/button"

Point Tailwind to the package so it can generate the utility classes:

@import "tailwindcss";@source "../node_modules/@arctis-sh/ui/dist";

Typeset

For HTML and Markdown prose, import the package stylesheet:

@import "@arctis-sh/ui/styles/typeset.css";
<div className="typeset typeset-docs">{html}</div>

Source

Next

Browse Components and Blocks for demos. See Theming for tokens and dark mode.