Installation and Imports

Choose @boreal-ui/core for standard React apps or @boreal-ui/next for Next.js apps. Use @boreal-ui/types for declarations and the matching docs entry for generated prop metadata.

Install packages

Install the runtime package for your app framework and add shared declarations for TypeScript projects.

Use subpaths

Import components from direct paths such as @boreal-ui/core/Button or @boreal-ui/next/Button. Static Next.js UI can use @boreal-ui/next/server.

Keep globals once

Load the matching globals.css file once before rendering Boreal components.

Install

install.shbash

npm install @boreal-ui/core
npm install @boreal-ui/next
npm install -D @boreal-ui/types

React and Next Setup

Import the matching globals file in the app shell and use the matching runtime build for components.

react-core.tsxtsx

import "@boreal-ui/core/globals.css";
import { Button, Card, ThemeProvider } from "@boreal-ui/core";

export function ProjectForm() {
  return (
    <ThemeProvider>
      <Card title="New project" theme="primary" shadow="medium">
        <Button type="submit">Create project</Button>
      </Card>
    </ThemeProvider>
  );
}

app/layout.tsxtsx

import "@boreal-ui/next/globals.css";
import { ThemeProvider } from "@boreal-ui/next/ThemeProvider";

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

next-project-form.tsxtsx

"use client";

import Button from "@boreal-ui/next/Button";
import Card from "@boreal-ui/next/Card";
import TextInput from "@boreal-ui/next/TextInput";

export function ProjectForm() {
  return (
    <Card title="New project" theme="primary" shadow="medium">
      <TextInput label="Project name" name="projectName" />
      <Button type="submit">Create project</Button>
    </Card>
  );
}

app/report/page.tsxtsx

import {
  Card,
  MetricBox,
  Stack,
} from "@boreal-ui/next/server";

export default function ReportPage() {
  return (
    <Stack gap="lg">
      <MetricBox title="Requests" value="12.4" units="k" />
      <Card title="Status">All systems operational.</Card>
    </Stack>
  );
}

Entry Points

Published package paths
@boreal-ui/core	Standard React runtime package and component barrel.
@boreal-ui/next	Next.js runtime package and component barrel.
@boreal-ui/next/server	Static React Server Component barrel for Next.js apps.
@boreal-ui/next/server/[component]	Standalone static server component or helper import path.
@boreal-ui/core/[component]	Standalone component runtime import path for React apps.
@boreal-ui/next/[component]	Standalone component runtime import path for Next.js apps.
@boreal-ui/core/globals.css	Core global stylesheet. Import once in the app shell.
@boreal-ui/next/globals.css	Next global stylesheet. Import once in the app shell.
@boreal-ui/types	Shared public TypeScript declarations.
@boreal-ui/types/core/[component]	Component-specific core prop declarations.
@boreal-ui/types/next/[component]	Component-specific Next prop declarations.
@boreal-ui/core/docs	Generated core prop metadata for docs tools and prop tables.
@boreal-ui/next/docs	Generated Next prop metadata for docs tools and prop tables.

Import Checklist

Use @boreal-ui/next/[component] for components.
Use @boreal-ui/core or @boreal-ui/core/[component] for standard React apps.
Use @boreal-ui/next or @boreal-ui/next/[component] for Next.js apps.
Use @boreal-ui/next/server or @boreal-ui/next/server/[component] for static React Server Components.
Use the matching runtime package for helpers such as setBorealStyleConfig and useToast.
Use @boreal-ui/types for shared declarations and component props.
Use @boreal-ui/core/docs or @boreal-ui/next/docs for generated prop metadata.
Avoid broad app resets that remove padding and margin from every element after Boreal styles load.