Public API
Boreal UI publishes explicit core, Next, type, style, standalone component, theme, and generated documentation entry points. Use this page as the practical map, with package exports and TypeScript declarations as the source of truth.
Choose a build
Prefer @boreal-ui/core for standard React apps and @boreal-ui/next for Next.js apps.
Import once
Import the matching globals.css file one time in the app shell before rendering Boreal components.
Use generated docs
Generated prop metadata ships from @boreal-ui/core/docs and @boreal-ui/next/docs for custom documentation tools and prop tables.
Primary Entry Points
Application code should pick the core or Next runtime explicitly, with shared types imported from @boreal-ui/types.
| @boreal-ui/core | Standard React component barrel. |
|---|---|
| @boreal-ui/next | Next.js component barrel with client-boundary-safe wrappers. |
| @boreal-ui/next/server | Static React Server Component barrel for Next.js. |
| @boreal-ui/next/server/[component] | Standalone Next.js server component or helper path. |
| @boreal-ui/core/globals.css | Core global stylesheet. Import once. |
| @boreal-ui/next/globals.css | Next global stylesheet. Import once. |
| @boreal-ui/core/[component] | Standalone core component import path. |
| @boreal-ui/next/[component] | Standalone Next component import path. |
| @boreal-ui/types | Shared public type declarations. |
| @boreal-ui/types/core/[component] | Core component prop declarations. |
| @boreal-ui/types/next/[component] | Next component prop declarations. |
| @boreal-ui/core/docs | Generated Core component prop metadata. |
| @boreal-ui/next/docs | Generated Next component prop metadata. |
| @boreal-ui/core/registerColorScheme | Standalone core custom color-scheme registration helper. |
| @boreal-ui/next/registerColorScheme | Standalone Next custom color-scheme registration helper. |
| @boreal-ui/core/colorSchemes | Built-in core color scheme definitions. |
| @boreal-ui/next/colorSchemes | Built-in Next color scheme definitions. |
Barrel Imports
react-core.tsxtsx
import "@boreal-ui/core/globals.css";
import { Button, Card, ThemeProvider } from "@boreal-ui/core";next-app.tsxtsx
"use client";
import "@boreal-ui/next/globals.css";
import Button from "@boreal-ui/next/Button";
import Card from "@boreal-ui/next/Card";
import { ThemeProvider } from "@boreal-ui/next/ThemeProvider";Component Barrel Exports
The core and Next barrels expose the same component names.
| Providers and text | ThemeProvider, ToastProvider, useToast, Typography |
|---|---|
| Actions | Button, IconButton, ScrollToTop |
| Forms and inputs | TextInput, TextArea, SearchInput, NumberInput, Select, MultiSelect, ThemeSelect, ComboBox, FileUpload, TagInput, InputGroup, FieldSet, ValidationSummary, RadioButton, RadioGroup, Slider, CheckBox, Toggle, SegmentedControl, ColorPicker, FormField, FormGroup, DatePicker, DateRangePicker, DateTimePicker, TimePicker |
| Data, charts, and content | DataTable, Sparkline, BarChart, LineChart, DonutChart, Legend, MarkdownRenderer, MetricBox, Card, Avatar |
| Feedback and status | Alert, Chip, ChipGroup, Badge, ProgressBar, CircularProgress, Rating, Skeleton, Spinner, Tooltip, MessagePopup, PopOver, EmptyState, NotificationCenter, ToastProvider, useToast |
| Navigation, overlays, and layout | AppShell, PageHeader, BreadCrumbPageHeader, NavBar, Sidebar, Footer, Breadcrumbs, TreeView, Tabs, Stepper, Timeline, Accordion, Pager, Modal, Drawer, Portal, SplitPane, Toolbar, Dropdown, Menu, Divider, CommandPalette, Container, Grid, Inline, Section, Stack |
Next.js Server Components
Use the server barrel for static UI rendered in Next.js App Router server files. Interactive components should continue using the standard Next entries.
app/dashboard/page.tsxtsx
import {
Card,
Grid,
MetricBox,
Typography,
} from "@boreal-ui/next/server";- @boreal-ui/next/server/Alert
- @boreal-ui/next/server/Avatar
- @boreal-ui/next/server/Badge
- @boreal-ui/next/server/BarChart
- @boreal-ui/next/server/BreadCrumbPageHeader
- @boreal-ui/next/server/Breadcrumbs
- @boreal-ui/next/server/Button
- @boreal-ui/next/server/Card
- @boreal-ui/next/server/CheckBox
- @boreal-ui/next/server/Divider
- @boreal-ui/next/server/EmptyState
- @boreal-ui/next/server/Footer
- @boreal-ui/next/server/Layout
- @boreal-ui/next/server/Legend
- @boreal-ui/next/server/LineChart
- @boreal-ui/next/server/MetricBox
- @boreal-ui/next/server/PageHeader
- @boreal-ui/next/server/ProgressBar
- @boreal-ui/next/server/RadioButton
- @boreal-ui/next/server/RadioGroup
- @boreal-ui/next/server/Select
- @boreal-ui/next/server/Skeleton
- @boreal-ui/next/server/Sparkline
- @boreal-ui/next/server/TextArea
- @boreal-ui/next/server/TextInput
- @boreal-ui/next/server/ThemeProvider
- @boreal-ui/next/server/Timeline
- @boreal-ui/next/server/Toolbar
- @boreal-ui/next/server/Typography
- @boreal-ui/next/server/ValidationSummary
Standalone Component Imports
Standalone component paths follow the same core/next split.
standalone-imports.tsxtsx
import Button from "@boreal-ui/core/Button";
import NextButton from "@boreal-ui/next/Button";
import DataTable from "@boreal-ui/next/DataTable";
import type { Column } from "@boreal-ui/types";- @boreal-ui/core/Accordion
@boreal-ui/next/Accordion - @boreal-ui/core/Alert
@boreal-ui/next/Alert - @boreal-ui/core/AppShell
@boreal-ui/next/AppShell - @boreal-ui/core/Avatar
@boreal-ui/next/Avatar - @boreal-ui/core/Badge
@boreal-ui/next/Badge - @boreal-ui/core/BarChart
@boreal-ui/next/BarChart - @boreal-ui/core/BreadCrumbPageHeader
@boreal-ui/next/BreadCrumbPageHeader - @boreal-ui/core/Breadcrumbs
@boreal-ui/next/Breadcrumbs - @boreal-ui/core/Button
@boreal-ui/next/Button - @boreal-ui/core/Card
@boreal-ui/next/Card - @boreal-ui/core/CheckBox
@boreal-ui/next/CheckBox - @boreal-ui/core/Chip
@boreal-ui/next/Chip - @boreal-ui/core/ChipGroup
@boreal-ui/next/ChipGroup - @boreal-ui/core/CircularProgress
@boreal-ui/next/CircularProgress - @boreal-ui/core/ColorPicker
@boreal-ui/next/ColorPicker - @boreal-ui/core/ComboBox
@boreal-ui/next/ComboBox - @boreal-ui/core/CommandPalette
@boreal-ui/next/CommandPalette - @boreal-ui/core/DataTable
@boreal-ui/next/DataTable - @boreal-ui/core/DatePicker
@boreal-ui/next/DatePicker - @boreal-ui/core/DateRangePicker
@boreal-ui/next/DateRangePicker - @boreal-ui/core/DateTimePicker
@boreal-ui/next/DateTimePicker - @boreal-ui/core/Divider
@boreal-ui/next/Divider - @boreal-ui/core/DonutChart
@boreal-ui/next/DonutChart - @boreal-ui/core/Drawer
@boreal-ui/next/Drawer - @boreal-ui/core/Dropdown
@boreal-ui/next/Dropdown - @boreal-ui/core/EmptyState
@boreal-ui/next/EmptyState - @boreal-ui/core/FieldSet
@boreal-ui/next/FieldSet - @boreal-ui/core/FileUpload
@boreal-ui/next/FileUpload - @boreal-ui/core/Footer
@boreal-ui/next/Footer - @boreal-ui/core/FormField
@boreal-ui/next/FormField - @boreal-ui/core/FormGroup
@boreal-ui/next/FormGroup - @boreal-ui/core/IconButton
@boreal-ui/next/IconButton - @boreal-ui/core/InputGroup
@boreal-ui/next/InputGroup - @boreal-ui/core/Layout
@boreal-ui/next/Layout - @boreal-ui/core/Legend
@boreal-ui/next/Legend - @boreal-ui/core/LineChart
@boreal-ui/next/LineChart - @boreal-ui/core/MarkdownRenderer
@boreal-ui/next/MarkdownRenderer - @boreal-ui/core/Menu
@boreal-ui/next/Menu - @boreal-ui/core/MessagePopup
@boreal-ui/next/MessagePopup - @boreal-ui/core/MetricBox
@boreal-ui/next/MetricBox - @boreal-ui/core/Modal
@boreal-ui/next/Modal - @boreal-ui/core/MultiSelect
@boreal-ui/next/MultiSelect - @boreal-ui/core/NavBar
@boreal-ui/next/NavBar - @boreal-ui/core/NotificationCenter
@boreal-ui/next/NotificationCenter - @boreal-ui/core/NumberInput
@boreal-ui/next/NumberInput - @boreal-ui/core/PageHeader
@boreal-ui/next/PageHeader - @boreal-ui/core/Pager
@boreal-ui/next/Pager - @boreal-ui/core/PopOver
@boreal-ui/next/PopOver - @boreal-ui/core/Portal
@boreal-ui/next/Portal - @boreal-ui/core/ProgressBar
@boreal-ui/next/ProgressBar - @boreal-ui/core/RadioButton
@boreal-ui/next/RadioButton - @boreal-ui/core/RadioGroup
@boreal-ui/next/RadioGroup - @boreal-ui/core/Rating
@boreal-ui/next/Rating - @boreal-ui/core/ScrollToTop
@boreal-ui/next/ScrollToTop - @boreal-ui/core/SearchInput
@boreal-ui/next/SearchInput - @boreal-ui/core/SegmentedControl
@boreal-ui/next/SegmentedControl - @boreal-ui/core/Select
@boreal-ui/next/Select - @boreal-ui/core/Sidebar
@boreal-ui/next/Sidebar - @boreal-ui/core/Skeleton
@boreal-ui/next/Skeleton - @boreal-ui/core/Slider
@boreal-ui/next/Slider - @boreal-ui/core/Sparkline
@boreal-ui/next/Sparkline - @boreal-ui/core/Spinner
@boreal-ui/next/Spinner - @boreal-ui/core/SplitPane
@boreal-ui/next/SplitPane - @boreal-ui/core/Stepper
@boreal-ui/next/Stepper - @boreal-ui/core/Tabs
@boreal-ui/next/Tabs - @boreal-ui/core/TagInput
@boreal-ui/next/TagInput - @boreal-ui/core/TextArea
@boreal-ui/next/TextArea - @boreal-ui/core/TextInput
@boreal-ui/next/TextInput - @boreal-ui/core/ThemeProvider
@boreal-ui/next/ThemeProvider - @boreal-ui/core/ThemeSelect
@boreal-ui/next/ThemeSelect - @boreal-ui/core/TimePicker
@boreal-ui/next/TimePicker - @boreal-ui/core/Timeline
@boreal-ui/next/Timeline - @boreal-ui/core/Toggle
@boreal-ui/next/Toggle - @boreal-ui/core/ToastProvider
@boreal-ui/next/ToastProvider - @boreal-ui/core/Toolbar
@boreal-ui/next/Toolbar - @boreal-ui/core/Tooltip
@boreal-ui/next/Tooltip - @boreal-ui/core/TreeView
@boreal-ui/next/TreeView - @boreal-ui/core/Typography
@boreal-ui/next/Typography - @boreal-ui/core/ValidationSummary
@boreal-ui/next/ValidationSummary
Theme and Configuration APIs
Theme helpers are available from both the core and Next barrels.
| ThemeProvider | Wraps the app and provides active scheme state. |
|---|---|
| ThemeSelect | Ready-made scheme selection control. |
| borealConfig | Current global style configuration object. |
| setBorealStyleConfig | Sets global default theme, size, radius, shadow, border width, and scheme. |
| getBorealStyleConfig | Reads the current global style configuration. |
| getThemeInitializationScript | Returns a theme initialization script for early color scheme setup. |
| defaultColorSchemes | Built-in Boreal UI color schemes. |
| registerColorScheme | Registers a custom color scheme. |
Global defaults
Configure component defaults once with setBorealStyleConfig, then override values per component when a local design needs it.
style-config.tstsx
import { setBorealStyleConfig } from "@boreal-ui/next";
setBorealStyleConfig({
defaultTheme: "primary",
defaultSize: "medium",
defaultRounding: "medium",
defaultShadow: "light",
defaultBorderWidth: "none",
defaultColorSchemeName: "Forest Dusk",
});Public types
Shared component types are exported from @boreal-ui/types and component-specific core/next type subpaths.
types.tstsx
import type { ColorScheme, Column } from "@boreal-ui/types";Generated Prop Docs
Use generated docs for exhaustive prop tables and custom documentation surfaces.
prop-docs.tsts
import {
buttonPropDocs,
radioGroupPropDocs,
themeSelectPropDocs,
type GeneratedComponentDoc,
} from "@boreal-ui/next/docs";Common prop-doc exports
- accordionPropDocs
- avatarPropDocs
- badgePropDocs
- buttonPropDocs
- cardPropDocs
- dataTablePropDocs
- modalPropDocs
- themeSelectPropDocs
- typographyPropDocs
The package also publishes prop docs for the rest of the component catalog through @boreal-ui/core/docs and @boreal-ui/next/docs.
Import guidance
- Use @boreal-ui/next/[component] for component imports in Next.js apps.
- Use @boreal-ui/next/server for static UI rendered in React Server Components.
- Use @boreal-ui/core/[component] or @boreal-ui/core for standard React apps.
- Import shared declarations from @boreal-ui/types, not runtime component packages.
- Use the matching core or Next package for helpers such as setBorealStyleConfig, useToast, and defaultColorSchemes.
- Use generated prop docs for exhaustive API tables, not hand-maintained copies.