Once UI

# Once UI > Once UI is an open-source React/Next.js design system (`@once-ui-system/core`) for indie creators and teams. Ship with 100+ components, semantic layout primitives, and Pro templates (Magic Portfolio, Magic Docs, Supabase Starter, and more). Documentation lives at https://docs.once-ui.com. Core is MIT-licensed; Pro adds deployment-ready templates and copy-paste blocks. 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. - **Install:** `npx create-once-ui-app@latest my-app` - **npm package:** `@once-ui-system/core` - **GitHub:** https://github.com/once-ui-system/core - **License:** MIT (core) · Pro subscription for templates and blocks ## 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/contexts/dataThemeProvider): Data theme context - [IconProvider](https://docs.once-ui.com/once-ui/contexts/iconProvider): Icon context - [ToastProvider](https://docs.once-ui.com/once-ui/contexts/toastProvider): Toast context ### Modules - [Kbar](https://docs.once-ui.com/once-ui/modules/kbar): Keyboard navigation component - [MegaMenu](https://docs.once-ui.com/once-ui/modules/megaMenu): Navigation mega menu component - [MobileMegaMenu](https://docs.once-ui.com/once-ui/modules/mobileMegaMenu): Mobile navigation mega menu component - [HeadingNav](https://docs.once-ui.com/once-ui/modules/headingNav): Table of contents navigation - [Meta](https://docs.once-ui.com/once-ui/modules/meta): SEO meta tags component - [Schema](https://docs.once-ui.com/once-ui/modules/schema): Structured data schema component - [CodeBlock](https://docs.once-ui.com/once-ui/modules/codeBlock): Syntax-highlighted code display - [MediaUpload](https://docs.once-ui.com/once-ui/modules/mediaUpload): Media upload with compression ### Components - [Accordion](https://docs.once-ui.com/once-ui/components/accordion): Expandable accordion component - [AccordionGroup](https://docs.once-ui.com/once-ui/components/accordionGroup): Grouped accordion component - [Animation](https://docs.once-ui.com/once-ui/components/animation): Animation component - [Arrow](https://docs.once-ui.com/once-ui/components/arrow): Animated arrow component - [AutoScroll](https://docs.once-ui.com/once-ui/components/autoScroll): Auto-scroll component - [Avatar](https://docs.once […gekürzt]