DOCSEARCHbyAlgolia
Submit Docs

Once UI Next.js Starter

repository·main·Indexed 21 days ago

https://github.com/once-ui-system/nextjs-starter

A design system and Next.js starter template for indie builders and startups. It features over 100 advanced components, centralized design configuration for themes and typography, responsive data visualization, and SEO components. The system includes the @once-ui-system/nextjs-starter package and a centralized icon library mapping semantic names to react-icons.

Tokens
1.4K
Snippets
5
Records
7
Agent score
74%

What's inside once-ui-system-nextjs-starter

  1. Overview of Once UI features

    main

    Once UI is a design system designed to reduce boilerplate code (claiming to write 70% less than shadcn + Tailwind). Key features include:

    • Customization: Centralized design configuration in a single file.
    • Components: Advanced, open-source components with simple APIs.
    • Data-viz: Responsive charts that can be implemented with minimal code.
    • SEO: Dedicated components for simplifying meta tags and schema setup.
    • Once UI Pro: Access to ready-made apps and pre-designed blocks.

  3. Get started with the Once UI Next.js starter

    main

    To begin building with Once UI, clone the starter template from the official GitHub repository. This template includes the Once UI Core package and a recommended setup for Next.js projects.

    git clone https://github.com/once-ui-system/nextjs-starter.git

  4. Configure the Once UI visual style

    main

    The style object controls the global design tokens applied to the application. You can customize the theme, color palettes (neutral and brand), component styles (solid, border, surface), and motion/scaling settings. These settings are applied to the HTML in the main layout.

    const style = {
  theme: "system", // dark | light | system
  neutral: "gray", // sand | gray | slate | mint | rose | dusk | custom
  brand: "blue", // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
  accent: "indigo", // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
  solid: "contrast", // color | contrast | inverse
  solidStyle: "flat", // flat | plastic
  border: "playful", // rounded | playful | conservative | sharp
  surface: "filled", // filled | translucent
  transition: "all", // all | micro | macro
  scaling: "100", // 90 | 95 | 100 | 105 | 110
};

  5. Configure typography and fonts

    main

    The fonts object maps specific font variants to CSS variables used throughout the system. You can define custom fonts for headings, body text, labels, and code blocks using next/font/google.

    import { Geist, Geist_Mono } from "next/font/google";

const heading = Geist({
  variable: "--font-heading",
  subsets: ["latin"],
  display: "swap",
});

const body = Geist({
  variable: "--font-body",
  subsets: ["latin"],
  display: "swap",
});

const label = Geist({
  variable: "--font-label",
  subsets: ["latin"],
  display: "swap",
});

const code = Geist_Mono({
  variable: "--font-code",
  subsets: ["latin"],
  display: "swap",
});

const fonts = {
  heading,
  body,
  label,
  code,
};

  6. Configure data visualization styles

    main

    The dataStyle object defines the visual properties for charts and data components, including variants, color modes, and axis/tick styling.

    const dataStyle = {
  variant: "gradient", // flat | gradient | outline
  mode: "categorical", // categorical | divergent | sequential
  height: 24, // default chart height
  axis: {
    stroke: "var(--neutral-alpha-weak)",
  },
  tick: {
    fill: "var(--neutral-on-background-weak)",
    fontSize: 11,
    line: false
  },
};

  7. Use the available icon names in Once UI

    main

    The project provides a centralized iconLibrary mapping semantic names to react-icons components. You can use the IconName type to ensure you are using a valid icon key defined in the library. Currently, the library includes the following icon names:

    • rocket
    import { iconLibrary, IconName } from './src/resources/icons';

// Example of using a valid icon name
const myIcon: IconName = 'rocket';

// Accessing the component
const IconComponent = iconLibrary[myIcon];