Getting started

Styles

These three style blocks must live in separate files — they must not be combined. Order within each file matters and must be exactly as written:

1. CSS reset and other legacy base styles:

   @import "@falcon/ui-kit/less/style.less";

2. Modern compiled styles:

   @import "@falcon/ui-kit/dist/index.css";

   These styles are already processed by Tailwind and should not be processed again.
3. Tailwind theme and utilities so that your app shares Falcon’s theme:

   @import "@falcon/ui-kit/theme.css" prefix(tw);
   @import "tailwindcss/utilities.css" prefix(tw);

Tailwind processes any file containing its directives, so merging the Less into the CSS file would make Tailwind try to parse the Less syntax and fail — Tailwind is not designed to run alongside a preprocessor. Keeping them in separate files ensures Tailwind never sees the Less.

Once the styles are wired up, see Styling for writing styles with Falcon’s tw: prefix and tokens.

Wrapper

Wrap your entire app in FalconProvider once, at the root. Toast notifications need <Toaster /> mounted once here too, not next to individual toast() callsites:

import { createRoot } from "react-dom/client";
import { FalconProvider, Toaster } from "@falcon/ui-kit";

const root = document.getElementById("root");
if (root == null) throw new Error("root == null");

createRoot(root).render(
  <FalconProvider>
    {/* THE REST OF YOUR APP GOES HERE */}

    <Toaster />
  </FalconProvider>,
);

FalconProvider is required for Falcon’s modern components. See FalconProvider for details.