Once UI: The open-source design system for indie creators

# Once UI > An open-source design system and component library for Next.js that helps indie creators ship like teams of 10+ alone. Once UI provides a comprehensive set of customizable components and tools for building beautiful, accessible web applications. It includes both open-source core components and pro features for rapid development. ## Installation - [Get started](https://docs.once-ui.com/get-started): Once UI and product introduction - Install Once UI Starter: `npx create-once-ui-app@latest my-app` - Clone Once UI Starter: `git clone https://github.com/once-ui-system/nextjs-starter.git` ## Pro Features - [Once UI Pro](https://once-ui.com/products): Pre-built templates and copy-paste blocks - [Figma Integration](https://once-ui.com/figma): Design system and component library for Figma ## Documentation - [Quick start](https://docs.once-ui.com/once-ui/quick-start): Set up a Once UI project - [Config](https://docs.once-ui.com/once-ui/config): Configuration options - [Customization Guide](https://once-ui.com/brand): Theming and styling documentation ### Basics - [Structure](https://docs.once-ui.com/once-ui/basics/structure): Flexible box and grid layout container - [Color](https://docs.once-ui.com/once-ui/basics/color): How color and themes works in Once UI - [Spacing](https://docs.once-ui.com/once-ui/basics/spacing): How margin, padding and gap works in Once UI - [Typography](https://docs.once-ui.com/once-ui/basics/typography): How font-size and font-weight works in Once UI - [Border](https://docs.once-ui.com/once-ui/basics/border): How border-radius and color works in Once UI - [Components](https://docs.once-ui.com/once-ui/basics/components): Best practices for creating custom Once UI components ### Context - [LayoutProvider](https://docs.once-ui.com/once-ui/contexts/layoutProvider): Layout context - [ThemeProvider](https://docs.once-ui.com/once-ui/contexts/themeProvider): Theme context - [DataThemeProvider](https://docs.once-ui.com/once-ui/context