Configuration

Updated: June 2, 2026

Once UI manages app-level design configuration with the help of Providers and a config file. Here's our recommended root layout.tsx and once-ui.config.js structure:

import '@once-ui-system/foundations/css/styles.css';
import '@once-ui-system/foundations/css/tokens.css';

import classNames from "classnames";
import { Column, ThemeInit } from "@once-ui-system/core";
import { fonts } from "../resources/once-ui.config";

interface RootLayoutProps {
  children: React.ReactNode;
}

export default async function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <Column
        as="html"
        lang="en"
        suppressHydrationWarning
        className={classNames(
          fonts.primary.variable,
          fonts.secondary.variable,
          fonts.tertiary.variable,
          fonts.code.variable,
        )}
      >
        <head>
          <ThemeInit
            config={{
              theme: "system",
              brand: "blue",
              accent: "indigo",
              neutral: "gray",
              solid: "contrast",
              'solid-style': "flat",
              border: "playful",
              surface: "filled",
              transition: "all",
              scaling: "100",
              'viz-style': "gradient",
            }}
          />
        </head>
        <LayoutProvider>
          <ThemeProvider>
            <DataThemeProvider>
              <ToastProvider>
                <IconProvider>
                  <Column background="page" as="body" fillWidth margin="0" padding="0" style={{ minHeight: "100vh" }}>
                    {children}
                  </Column>
                </IconProvider>
              </ToastProvider>
            </DataThemeProvider>
          </ThemeProvider>
        </LayoutProvider>
      </Column>
    </>
  );
}

This setup provides everything you need to get started with Once UI. Read more about the customization and usage of each provider in the Contexts section.

pageAI Coding (MCP)

BasicsStructure

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club