Using components

All components are named exports from @falcon/ui-kit:

import { Card, CardHeader, CardTitle } from "@falcon/ui-kit";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Order #1042</CardTitle>
      </CardHeader>
    </Card>
  );
}

See Styling for the tw: class prefix, overriding component styles, and color tokens.

Compound components

Many components are composed of named sub-components that share a prefix with the parent: Card + CardHeader, Sidebar + SidebarMenu + SidebarMenuItem, and so on. Assemble them in JSX rather than passing configuration objects:

<Card>
  <CardHeader>
    <CardTitle>Order #1042</CardTitle>
  </CardHeader>
</Card>

Use sub-components with their matching component family. Some families provide context and will throw outside their provider; others rely on shared styling and semantics. Do not mix sub-components across families.

Composing rendered elements

Some trigger and link sub-components use render to apply Falcon behavior to a caller-provided element without adding an extra wrapper. Pass the element shell to render, then put the visible label as children:

<DialogTrigger render={<Button variant="outline" />}>
  Edit account
</DialogTrigger>

render is the composition prop across Falcon.

Variants and sizes

Use variant and size props for the built-in appearances:

<Button variant="outline" size="sm">
  Cancel
</Button>

Icons

Import icon components directly from @falcon/ui-kit. Every icon has an Icon suffix. Never inline raw SVGs.

import { CircleCheckIcon } from "@falcon/ui-kit";

export function Example() {
  return <CircleCheckIcon size={16} />;
}

See Icons for icon naming, sizing, and custom Falcon icons.

Legacy components

Legacy components exist for backwards compatibility; always use the modern equivalents for new pages.

Legacy components are in a separate entrypoint and must be imported from @falcon/ui-kit/dist/legacy, not from @falcon/ui-kit:

import { Button, Typography, FlexWrapper } from "@falcon/ui-kit/dist/legacy";

Do not mix imports between the two entrypoints; legacy and modern components are independent and do not share context or tokens. Any component used inside a legacy example must come from the legacy entrypoint unless it is plain React or HTML.