App UI · Getting started

Installation

App UI is a free set of accessible interface components built on Radix primitives, Tailwind CSS v4 and Motion. Each one is a single file that lands in your project: no account, no runtime package, and the code is yours to change.

Requirements

  • React 18 or 19 with TypeScript
  • Tailwind CSS v4
  • An @/ path alias pointing at your source root (Next.js, Vite and Remix templates ship one)

Add with the CLI

Run the CLI from your project root. It writes each component to components/scalar-ui/ (under src/ when your project has one), adds the cn() helper to lib/utils.ts if it’s missing, and installs the dependencies with your package manager.

npx scalar-ui add accordion admin-console agent-trace alert alert-dialog app-shell aspect-ratio auth avatar avatar-upload badge banner breadcrumb button button-group calendar canvas card changelog chat-app checkbox code-editor code-gen collapsible combobox command context-menu cookie-consent copy-field date-picker dialog diff-viewer dropdown-menu email-preferences empty-state error-page feedback field file-upload form help-center hover-card image-studio input input-otp issue-list kanban kbd label legal-page log-viewer menubar navbar navigation-menu notification-inbox onboarding pagination password-input popover pricing-page progress radio-group referral resizable roadmap scheduler scroll-area search-page select separator settings share-page sheet sidebar skeleton slider sortable spinner status-dot status-page stepper switch table tabs textarea toast toggle toggle-group toolbar tooltip tree-view usage-meter workflow

Add components one at a time the same way. --demo also writes the example shown in the preview.

npx scalar-ui add accordion
npx scalar-ui add accordion --demo

Manual installation

Install the dependencies:

npm install radix-ui motion lucide-react cmdk clsx tailwind-merge

Add the cn() helper to lib/utils.ts:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Then copy a component’s source from the Code tab on its page into components/scalar-ui/<name>.tsx.

Dark mode

Components style themselves with Tailwind’s dark: variant, which follows the operating system by default. If your site switches themes with a dark class instead, add this to your main stylesheet:

@custom-variant dark (&:where(.dark, .dark *));

Usage

Import components from @/components/scalar-ui and compose them like any other React component:

import { Button } from "@/components/scalar-ui/button";
import { Tooltip } from "@/components/scalar-ui/tooltip";

export function Toolbar() {
  return (
    <Tooltip content="Create a project" shortcut="⌘N">
      <Button>New project</Button>
    </Tooltip>
  );
}