Flagon UIv0.0.0
GitHub ↗

Installation

The recommended way to use Flagon UI is to install the @flagon-io/ui package and import components directly - you get fixes and new components by bumping the version. If you’d rather own the source, you can copy components in with the shadcn CLI instead.

Prerequisites

A React 19 app with Tailwind CSS v4. Components are styled with Tailwind utilities against Flagon’s design tokens.

Install the package

Recommended
  1. 1

    Install

    npm install @flagon-io/ui
  2. 2

    Load the theme tokens

    Import the token stylesheet once, and tell Tailwind to scan the package so its classes are generated.

    /* globals.css */
@import "tailwindcss";
@import "@flagon-io/ui/styles.css";
@source "../node_modules/@flagon-io/ui/src";
  3. 3

    Wrap your app in a ThemeProvider

    // app/layout.tsx
import "./globals.css";
import { ThemeProvider } from "@/components/theme/theme-provider";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

    See Theming for how the provider works and which themes ship.

  4. 4

    Use a component

    import { Button, Alert } from "@flagon-io/ui";
// or a single component:
import { Button } from "@flagon-io/ui/button";

export function Example() {
  return <Button>Deploy</Button>;
}

Alternative: copy components in

Prefer to own and edit the source? Every component is published to a shadcn-compatible registry. Initialize shadcn once, then add components on demand - dependencies install automatically and cn resolves from your @/lib/utils.

npx shadcn@latest init
npx shadcn@latest add https://ui.flagon.io/r/button.json