Once UI for Next.js

Once UI for Next.js is a starter template and design system for Next.js and React that bundles 100+ open-source components, a token-based design config, and SEO and data-viz helpers into a single lightweight setup.

What is Once UI for Next.js?

Once UI for Next.js is a lightweight starter template built on the Once UI Core package, created by the once-ui-system indie project (Lorant One and the Design Engineers Club) and distributed under the MIT License. It takes a fresh Next.js project and a single design configuration file as input, and produces a styled application with reusable components, responsive charts, and SEO utilities. The template runs on Next.js with React and TypeScript, and ships with a matching Figma design kit.

Key Features

• Customization — Manage the entire design configuration in a single file, using a token-based system that restyles the whole app without touching individual components.
• Components — Access 100+ advanced, open-source components with simple APIs, covering navigation, forms, layouts, and more.
• Data-viz — Add responsive charts with a few lines of code via built-in data visualization components.
• SEO — Simplify meta tags and schema markup with dedicated SEO components instead of writing raw head markup.
• 70% less code — Once UI's component APIs are designed to require roughly 70% less code than a typical shadcn plus Tailwind setup for the same UI.
• Free starters — Magic Portfolio and Magic Docs are included as free, customizable, responsive starters for portfolio and documentation sites.
• PRO products — Launch ready-made apps with minimal coding through Once UI Pro, including the Magic Convert landing/dashboard template and Once UI Blocks copy-paste blocks.

Who is it for?

• Indie builders and freelancers — Get a head start on client projects and side apps, with a single-file config to rebrand everything.
• Startups — Ship landing pages, dashboards, and docs quickly using the free Magic Portfolio and Magic Docs starters.
• Developers who prefer code over low-code — Enjoy the simplicity of low-code with full control of a conventional codebase.
• Design engineers — Align design and code with a token-based system and a Figma counterpart available at once-ui.com/figma.

What can you do with Once UI for Next.js?

• Portfolio sites — Build a customizable, responsive portfolio using the free Magic Portfolio starter.
• Documentation sites — Generate documentation layouts from MDX files with Magic Docs, which handles the site structure automatically.
• Landing pages and dashboards — Use Magic Convert (PRO) to create conversion-optimized landing pages and dashboards.
• Assembling sites from blocks — Copy-paste pre-designed Once UI Blocks (PRO) to deploy fully functional pages with minimal code.

How does it work?

Clone the nextjs-starter repository from GitHub, then install dependencies and run the development server as you would for any Next.js app. The starter includes the Once UI Core package, so you can edit the design config in one file, add components from the library, and deploy to Vercel with the provided one-click deploy button.

Pricing

Once UI is freemium. The starter template and core components are open-source under the MIT License, and Magic Portfolio and Magic Docs are free. Paid Pro products include Magic Convert, Once UI Blocks, and Once UI Pro; pricing details are on the Once UI pricing page.

FAQ

Is Once UI for Next.js free?

The starter template and its 100+ core components are open-source under the MIT License. Free starters such as Magic Portfolio and Magic Docs are also available. Pro products like Magic Convert, Once UI Blocks, and Once UI Pro are paid.

How does Once UI compare to shadcn?

The Once UI team states that its components require about 70% less code than a typical shadcn plus Tailwind setup. It also ships with a single-file design config, data-viz components, and SEO helpers that shadcn does not include by default.

How do I customize the design?

You edit a single design configuration file that uses design tokens. Changes to those tokens propagate across every component, so you don't need to modify component code for most theming tasks.

Is there a Figma design file?

Yes. Once UI has a Figma counterpart available at once-ui.com/figma, designed to match the token-based system in the code.

Can I deploy to Vercel?

Yes. The repository includes a "Deploy to Vercel" button that clones the starter, sets the project name, and triggers a deployment with the Vercel builder.