---
title: "Once UI Design Starter for Next.js"
description: "UI library for building apps with world-class design. Customize your brand in minutes and copy-paste components from the interactive docs."
url: "https://vercel.com/templates/next.js/once-ui-design-for-nextjs"
links:
  repository: "https://github.com/once-ui-system/nextjs-starter"
  demo: "http://demo.once-ui.com"
  deploy: "https://vercel.com/new/clone?demo-title=Once+UI+Design+Starter+for+Next.js&demo-description=UI+library+for+building+apps+with+world-class+design.+Customize+your+brand+in+minutes+and+copy-paste+components+from+the+interactive+docs.&demo-url=http%3A%2F%2Fdemo.once-ui.com&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2C2zfvOiJneqxrDaLNJHsy%2Fab672d2750a25656fafac205bddd8eee%2FOnce_UI_Vercel_Cover.png&project-name=Once+UI+Design+Starter+for+Next.js&repository-name=once-ui-design-for-nextjs&repository-url=https%3A%2F%2Fgithub.com%2Fonce-ui-system%2Fnextjs-starter&from=templates&skippable-integrations=1"
---

# Once UI Design Starter for Next.js

UI library for building apps with world-class design. Customize your brand in minutes and copy-paste components from the interactive docs.

# Once UI for Next.js

A design system for indie builders, startups and freelancers. Once UI combines the simplicity of low-code with the power of code: write 70% less compared to shadcn + Tailwind. Includes 100+ advanced, open-source components.

Check the demo [here](https://demo.once-ui.com).

![Once UI](https://github.com/once-ui-system/nextjs-starter/blob/main/public/images/og/home.jpg?raw=true)

## Features

A lightweight starter template with the [Once UI Core](https://github.com/once-ui-system/core) package and our recommended setup.

* **Customization**: Manage design config in a single file.
* **Components**: Access advanced components with simple APIs.
* **Data-viz**: Add responsive charts with a few lines of code.
* **SEO**: Use our SEO components to simplify meta and schema setup.
* **PRO**: Launch ready-made apps with minimal coding with Once UI Pro.

## Documentation

Learn how to build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).

## Quick start

[Magic Portfolio](https://once-ui.com/products/magic-portfolio) (FREE): Portfolio starter used and loved by thousands of creatives. Simple, customizable, responsive.

[Magic Docs](https://once-ui.com/products/magic-docs) (FREE): Documentation generator. Just add your MDX files and let Magic Docs handle the rest.

[Magic Convert](https://once-ui.com/products/magic-convert) (PRO): Conversion-optimized landing page and dashboard template.

[Once UI Blocks](https://once-ui.com/blocks) (PRO): Copy-paste pre-designed blocks and deploy fully-functional sites with lightning speed.

[Get Once UI Pro](https://once-ui.com/pricing)

## Design

The design counterpart of the Once UI system is available [here](https://once-ui.com/figma).

## Get started

Clone the starter template from GitHub:
```bash
git clone https://github.com/once-ui-system/nextjs-starter.git
```

## Creators

Connect with us!

**Lorant One**: [Site](https://lorant.one)

**Design Engineers Club**: [Site](https://designengineers.club)

## Contribute

Please use the Once UI Core [GitHub repository](https://github.com/once-ui-system/core) for design system contributions.

## Sponsors

Once UI is an indie project. [Sponsor us](https://github.com/sponsors/once-ui-system) and get featured on our site!

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

## Deploy to Vercel
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonce-ui-system%2Fnextjs-starter&project-name=nextjs-starter&repository-name=nextjs-starter&redirect-url=https%3A%2F%2Fgithub.com%2Fonce-ui-system%2Fnextjs-starter&demo-title=Next.js%20Starter&demo-description=Showcase%20your%20designers%20or%20developer%20portfolio&demo-url=https%3A%2F%2Fdemo.nextjs-starter.com&demo-image=%2F%2Fraw.githubusercontent.com%2Fonce-ui-system%2Fnextjs-starter%2Fmain%2Fpublic%2Fimages%2Fog%2Fhome.jpg)

## Related Templates

### [Morphic: AI-powered answer engine](https://vercel.com/templates/next.js/morphic-ai-answer-engine-generative-ui)

AI answer engine with Generative UI.

### [Design System with Turborepo](https://vercel.com/templates/react/turborepo-design-system)

This is an official starter Turborepo with a single Storybook documentation site, a shared UI component library, and three local packages.

### [Object Generation Streaming with useObject](https://vercel.com/templates/next.js/use-object)

An application that converts text inputs into structured objects and streams the expense as it’s being processed using the Vercel AI SDK.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.