A lightweight starter template for building a Next.js + TypeScript project with Boreal UI.
This setup gives you a clean starting point with Boreal UI already connected, themed, and ready to use so you can jump straight into building your interface.
- Next.js with the App Router
- React + TypeScript
- Boreal UI Next.js setup
- Boreal UI global CSS import
ThemeProviderconfigured at the app root- A starter theme configuration
- A simple starter page using Boreal UI components
- A clean project structure for building pages, layouts, and components
Install dependencies:
npm installRun the development server:
npm run devBuild for production:
npm run buildStart the production build locally:
npm run startThis starter already includes the required Boreal UI setup in src/app/layout.tsx.
The root layout:
- imports Boreal UI’s global CSS once
- wraps the application with
ThemeProvider - sets the initial active color scheme
- keeps the setup centralized for all routes and pages
Example:
import type { Metadata } from "next";
import { ThemeProvider } from "boreal-ui-next";
import "@boreal-ui/next/globals.css";
import "./globals.css";
export const metadata: Metadata = {
title: "Boreal UI Starter",
description: "A Next.js starter project using Boreal UI.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<ThemeProvider initialSchemeName="Forest Dusk">
{children}
</ThemeProvider>
</body>
</html>
);
}If you are using the combined Boreal UI package instead of the standalone Next package, your imports may look like this:
import { ThemeProvider } from "@boreal-ui/next";
import "@boreal-ui/next/globals.css";Use the import path that matches the package version installed in your project.
src/
app/
globals.css # Project-level global styles
layout.tsx # Root layout and Boreal UI ThemeProvider setup
page.tsx # Starter homepage using Boreal UI componentsThe starter homepage demonstrates a simple interface using Boreal UI components such as:
TypographyButtonThemeSelect
You can update src/app/page.tsx to replace the starter content with your own app layout.
Example component imports:
import Typography from "@boreal-ui/next/Typography";
import Button from "@boreal-ui/next/Button";
import ThemeSelect from "@boreal-ui/next/ThemeSelect";Boreal UI handles component styling through its global CSS and theme system.
In this project:
@boreal-ui/next/globals.cssprovides Boreal UI’s required base stylingsrc/app/globals.cssis for your project-wide global styles- page-specific styles can be added with CSS modules, global CSS, or your preferred styling approach
You do not need to manually style Boreal UI components just to get started.
This starter uses Boreal UI’s ThemeProvider to apply a default color scheme.
You can change the default scheme by updating initialSchemeName in src/app/layout.tsx:
<ThemeProvider initialSchemeName="Forest Dusk">{children}</ThemeProvider>You can also register custom color schemes using the customSchemes prop:
<ThemeProvider
initialSchemeName="Cyberpunk Pulse"
customSchemes={[
{
name: "Cyberpunk Pulse",
primaryColor: "#792348ff",
secondaryColor: "#8338ec",
tertiaryColor: "#3a0ca3",
quaternaryColor: "#fb5607",
backgroundColor: "#000000ff",
},
]}
>
{children}
</ThemeProvider>You can continue building your app by importing Boreal UI components into your pages and layouts.
Example:
import Button from "@boreal-ui/next/Button";
import Card from "@boreal-ui/next/Card";
import { Stack } from "@boreal-ui/next/Layout";
export default function ExamplePage() {
return (
<Stack gap="medium">
<Card title="Welcome to Boreal UI">
Start building your interface with accessible, theme-ready components.
</Card>
<Button theme="primary">Get Started</Button>
</Stack>
);
}A few good next steps after cloning this starter:
- replace the starter homepage with your own app content
- add more Boreal UI components
- create additional custom color schemes
- add your own routes under
src/app - connect your app to your own data, APIs, or backend services
To explore more Boreal UI components and patterns, check the Boreal UI documentation and examples that accompany the library.
This project is licensed under the MIT License.
See the LICENSE file for full details.