Start

Getting started

Install opt-ui, connect styles and render your first working component.

reopt designUpdated Sep 18, 2026

Render your first working button in an existing React 19 project. Packages are free to install from public npm; no Reopt account is required. These instructions use Tailwind CSS v4.

1. Install packages

bash

bun add @reopt-ai/opt-ui
bun add -d tailwindcss @tailwindcss/postcss postcss

2. Connect your stylesheet

This @source path assumes app/globals.css at the project root. For src/app/globals.css, use ../../node_modules/@reopt-ai/opt-ui/dist. Import this stylesheet once from your app entry point.

css

@import "tailwindcss";
@import "@reopt-ai/opt-ui/tailwind.css";

@source "../node_modules/@reopt-ai/opt-ui/dist";

3. Configure PostCSS

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

4. Add the theme provider

Wrap your app in OptThemeProvider. For Next.js, use app/layout.tsx. In another React app, wrap your root component in the same provider.

tsx

import { OptThemeProvider } from "@reopt-ai/opt-ui";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <OptThemeProvider defaultPreset="default">
          {children}
        </OptThemeProvider>
      </body>
    </html>
  );
}

5. Render and test a button

Put this component in app/page.tsx (or render it from your React app), start your development server and click Count. The number should increase, the button should be styled, and Tab should show its focus ring. If styling is missing, check the stylesheet import and @source path above.

tsx

"use client";

import { useState } from "react";
import { Button } from "@reopt-ai/opt-ui";

export default function Page() {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}

Continue building

Optional: let your coding agent configure the project

Recommended: dedicated skill

Handles installation or upgrades, Tailwind v4 and OptThemeProvider wiring, opt doctor verification, and Surface setup.

From the consumer project root, install the skill into your agent runtime. Skip this command if it is already installed.

bash

npx skills add reopt-ai/reopt-skills/opt-ui-install

Then ask your agent to apply it. The skill detects whether this is a new install or an upgrade.

text

Use the opt-ui-install skill to set up @reopt-ai/opt-ui in this project, then verify the result.

The skill idempotently updates a reopt marker block in AGENTS.md (or CLAUDE.md), reads the docs shipped by the installed package version, and runs module-appropriate checks such as typecheck or doctor.

The package commands below are the manual fallback when a skill is unavailable or you need to control every setup step. Review the skill source and current support.

2. Connect your stylesheet

This @source path assumes app/globals.css at the project root. For src/app/globals.css, use ../../node_modules/@reopt-ai/opt-ui/dist. Import this stylesheet once from your app entry point.

css

@import "tailwindcss";
@import "@reopt-ai/opt-ui/tailwind.css";

@source "../node_modules/@reopt-ai/opt-ui/dist";

4. Add the theme provider

Wrap your app in OptThemeProvider. For Next.js, use app/layout.tsx. In another React app, wrap your root component in the same provider.

tsx

import { OptThemeProvider } from "@reopt-ai/opt-ui";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <OptThemeProvider defaultPreset="default">
          {children}
        </OptThemeProvider>
      </body>
    </html>
  );
}

5. Render and test a button

tsx

"use client";

import { useState } from "react";
import { Button } from "@reopt-ai/opt-ui";

export default function Page() {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}