Skip to content
GitHub

Getting Started (React)

Prerequisites

Section titled “Prerequisites”
  • Node.js and pnpm installed
  • A React project (Vite, Next.js, or similar)

1) Initialize with shadcn

Section titled “1) Initialize with shadcn”

Follow the official shadcn/ui installation guide to set up your project:

https://ui.shadcn.com/docs/installation

This will configure Tailwind CSS, TypeScript path aliases, and the cn utility.

2) Install Ark UI (React)

Section titled “2) Install Ark UI (React)”
Terminal window
pnpm add @ark-ui/react

Ark UI provides accessible primitives; arkitect-ui builds styled components on top.

3) Add arkitect-ui components

Section titled “3) Add arkitect-ui components”

Use shadcn to install components from the arkitect-ui registry:

Terminal window
npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/button.json

Replace button with any component name (input, dialog, label, dropdown-menu, etc.)

The command copies the component source into your project so you have full control.

4) Manual alternative

Section titled “4) Manual alternative”

If you prefer, copy components directly from the documentation into src/components/ui/:

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


export function Example() {
  return <Button variant="default">Click me</Button>;
}

5) Verify setup

Section titled “5) Verify setup”
  • Import your global stylesheet (Tailwind) in your app entry
  • Render a sample component to confirm styles work

Next steps

Section titled “Next steps”
  • Browse React components: /arkitect-ui/react/
  • Add more components via shadcn or copy-paste
  • Customize Tailwind tokens to match your brand