Get started

Setup the components in your project.

Shim is a pre-styled collection of copy-paste UI components built on top of React Aria Components.

Install the prerequisites

Shim components depend on several libraries. Use the commands below to install them.

React Aria Components

Core unstyled primitives used by Shim components.
Read the docs at react-spectrum.adobe.com/react-aria/components.

Terminal
pnpm add react-aria-components
Tailwind CSS v4

Utility-first styling foundation.
Installation depends on your framework—follow the official Tailwind guide for the correct steps.

tailwind-variants and tailwind-merge

Declarative variant helpers and merge utilities.

Terminal
pnpm add tailwind-variants tailwind-merge
Radix Colors

Semantic color palette used by Shim tokens.
Browse palettes at radix-ui.com/colors.

Terminal
pnpm add @radix-ui/colors
Phosphor Icons

Icon set referenced by several components.
Explore the catalog at phosphoricons.com.

Terminal
pnpm add @phosphor-icons/react

Set up Shim

The Shim CLI helps you set up your project and add components.

Configure path alias

Shim components import files via the @/ alias.
Configure the path in tsconfig.json (or jsconfig.json) so those imports resolve.

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
Initialize Shim

Run the init command to initialize Shim.
It creates a shim.config.json file in your project root that defines where components, utility files, and CSS are installed.

Terminal
pnpm dlx @kkga/shim init
Add components

Use the add command to copy components into your project.
The CLI resolves dependencies, rewrites imports, and installs into the paths defined in shim.config.json.

Terminal
pnpm dlx @kkga/shim add button
Todo

Manual setup instructions.