Shim
GitHub

Quick start

Set up Shim in your project using the CLI.

Overview

Shim is a collection of accessible UI components built on React Aria Components. Components install into your codebase—so you own and customize them.

This guide walks you through setting up Shim using the CLI. For manual setup without the CLI, see the manual setup guide.

Set up

Install Tailwind CSS (v4)

Shim requires Tailwind CSS for styling.

Follow the official Tailwind v4 installation guide for your framework (Next.js, Vite, etc.) before continuing.

Initialize Shim

Run the CLI to set up Shim. It checks for Tailwind, installs required dependencies, and scaffolds config, utilities, and theme CSS. For more commands and options, see the CLI guide.

pnpm dlx @kkga/shim init
Add theme CSS

Import the theme CSS file in your main CSS file or root layout. Adjust the path if you used a different --css-path during init.

app/globals.css
@import "@/styles/theme.css";
Configure path alias

Shim uses the @/ alias—configure it in tsconfig.json (or jsconfig.json) so imports resolve correctly.

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

Next steps