# 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.

## Documentation

- [Getting Started](https://docs.once-ui.com/once-ui/quick-start): Complete guide to installing and using Once UI
- [Core Components](https://once-ui.com/products/once-ui-core): Open-source component library documentation
- [Customization Guide](https://once-ui.com/customize): Theming and styling documentation
- [GitHub Repository](https://github.com/once-ui-system/nextjs-starter): Source code and starter templates

## Installation

- [Getting started](https://docs.once-ui.com): Learn how to install and set up Once UI in your Next.js project.
- CLI: `npx create-once-ui-app@latest my-app`
- Git clone: `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


## Layout

- [Flex](https://docs.once-ui.com/once-ui/basics/structure): Flexible box and grid layout container
- [Grid](https://docs.once-ui.com/once-ui/basics/color): Color management system
- [Spacing](https://docs.once-ui.com/once-ui/basics/spacing): Spacing component with custom properties
- [Typography](https://docs.once-ui.com/once-ui/basics/typography): Typography component with custom properties
- [Border](https://docs.once-ui.com/once-ui/basics/border): Border component with custom properties

## Modules

- [MegaMenu](https://docs.once-ui.com/once-ui/modules/megaMenu): 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
- [CompareImage](https://docs.once-ui.com/once-ui/modules/compareImage): Image comparison slider
- [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
- [Arrow](https://docs.once-ui.com/once-ui/components/arrow): Animated arrow component
- [Avatar](https://docs.once-ui.com/once-ui/components/avatar): User avatar display
- [AvatarGroup](https://docs.once-ui.com/once-ui/components/avatarGroup): Grouped avatar display
- [Background](https://docs.once-ui.com/once-ui/components/background): Background with effects
- [Badge](https://docs.once-ui.com/once-ui/components/badge): Badge component
- [Button](https://docs.once-ui.com/once-ui/components/button): Core button component
- [Card](https://docs.once-ui.com/once-ui/components/card): Content container component
- [Carousel](https://docs.once-ui.com/once-ui/components/carousel): Image/content carousel
- [Dialog](https://docs.once-ui.com/once-ui/components/dialog): Modal dialog component
- [Dropdown](https://docs.once-ui.com/once-ui/components/dropdown): Dropdown menu
- [Fade](https://docs.once-ui.com/once-ui/components/fade): Fade effect component
- [Feedback](https://docs.once-ui.com/once-ui/components/feedback): User feedback display
- [Icon](https://docs.once-ui.com/once-ui/components/icon): Icon component
- [IconButton](https://docs.once-ui.com/once-ui/components/iconButton): Button with icon
- [InlineCode](https://docs.once-ui.com/once-ui/components/inlineCode): Inline code display
- [Kbd](https://docs.once-ui.com/once-ui/components/kbd): Keyboard key display
- [Line](https://docs.once-ui.com/once-ui/components/line): Line separator
- [Logo](https://docs.once-ui.com/once-ui/components/logo): Logo component
- [LogoCloud](https://docs.once-ui.com/once-ui/components/logoCloud): Logo grid display
- [NavIcon](https://docs.once-ui.com/once-ui/components/navIcon): Navigation icon
- [Scroller](https://docs.once-ui.com/once-ui/components/scroller): Scrolling container
- [SegmentedControl](https://docs.once-ui.com/once-ui/components/segmentedControl): Segmented control/tabs
- [Skeleton](https://docs.once-ui.com/once-ui/components/skeleton): Loading placeholder
- [Media](https://docs.once-ui.com/once-ui/components/smartImage): Enhanced image component
- [SmartLink](https://docs.once-ui.com/once-ui/components/smartLink): Enhanced link component
- [Spinner](https://docs.once-ui.com/once-ui/components/spinner): Loading indicator
- [Tag](https://docs.once-ui.com/once-ui/components/tag): Tag component
- [ThemeSwitcher](https://docs.once-ui.com/once-ui/components/themeSwitcher): Theme toggle
- [Toast](https://docs.once-ui.com/once-ui/components/toast): Notification component
- [ToggleButton](https://docs.once-ui.com/once-ui/components/toggleButton): Toggle button
- [Tooltip](https://docs.once-ui.com/once-ui/components/tooltip): Tooltip component
- [User](https://docs.once-ui.com/once-ui/components/user): User profile component
- [UserMenu](https://docs.once-ui.com/once-ui/components/userMenu): User menu component

## Form Controls

- [Checkbox](https://docs.once-ui.com/once-ui/form-controls/checkbox): Checkbox input
- [Chip](https://docs.once-ui.com/once-ui/form-controls/chip): Chip/tag component
- [ColorInput](https://docs.once-ui.com/once-ui/form-controls/colorInput): Color picker input
- [DatePicker](https://docs.once-ui.com/once-ui/form-controls/datePicker): Date selection input
- [DateRangePicker](https://docs.once-ui.com/once-ui/form-controls/dateRangePicker): Date range picker
- [Input](https://docs.once-ui.com/once-ui/form-controls/input): Text input field
- [NumberInput](https://docs.once-ui.com/once-ui/form-controls/numberInput): Numeric input
- [OTPInput](https://docs.once-ui.com/once-ui/form-controls/otpInput): One-time password input
- [PasswordInput](https://docs.once-ui.com/once-ui/form-controls/passwordInput): Password input field
- [RadioButton](https://docs.once-ui.com/once-ui/form-controls/radioButton): Radio selection
- [Select](https://docs.once-ui.com/once-ui/form-controls/select): Dropdown select
- [Switch](https://docs.once-ui.com/once-ui/form-controls/switch): Toggle switch
- [TagInput](https://docs.once-ui.com/once-ui/form-controls/tagInput): Tag input field
- [Textarea](https://docs.once-ui.com/once-ui/form-controls/textarea): Multi-line text input

## Effects

- [GlitchFx](https://docs.once-ui.com/once-ui/effects/glitchfx): Glitch animation effect
- [HoloFx](https://docs.once-ui.com/once-ui/effects/holofx): Holographic effect
- [LetterFx](https://docs.once-ui.com/once-ui/effects/letterfx): Text animation effect
- [RevealFx](https://docs.once-ui.com/once-ui/effects/revealfx): Reveal animation
- [TiltFx](https://docs.once-ui.com/once-ui/effects/tiltfx): Tilt interaction effect

## Pro Templates

- [Authentication](https://once-ui.com/blocks/authentication): Ready-to-use authentication pages
- [Contact](https://once-ui.com/blocks/contact): Contact page template
- [Careers](https://once-ui.com/blocks/careers): Job listings and careers page
- [About](https://once-ui.com/blocks/about): Company and team pages
- [Pricing](https://once-ui.com/blocks/pricing): Pricing tables and plans
- [Settings](https://once-ui.com/blocks/settings): User settings dashboard
- [Blog](https://once-ui.com/blocks/blog): Blog and content pages
- [Profile](https://once-ui.com/blocks/profile): User profile pages
- [Features](https://once-ui.com/blocks/features): Product features showcase
- [FAQ](https://once-ui.com/blocks/faq): Frequently asked questions page
- [Cookie](https://once-ui.com/blocks/cookie): Cookie consent banner
- [Newsletter](https://once-ui.com/blocks/newsletter): Newsletter subscription form
- [Hero](https://once-ui.com/blocks/hero): Hero section layouts
- [Plans](https://once-ui.com/blocks/plans): Plan selector and comparison
- [Testimonial](https://once-ui.com/blocks/testimonial): Customer testimonials
- [Header](https://once-ui.com/blocks/header): Site header layouts
- [Sidebar](https://once-ui.com/blocks/sidebar): Sidebar navigation
- [Footer](https://once-ui.com/blocks/footer): Site footer layouts
- [Background](https://once-ui.com/blocks/background): Customizable background with masking effects

## Launch apps without writing a single line of code

- [Magic Docs](https://once-ui.com/products/magic-docs): Launch a simple, lean and fully customizable product documentation site in minutes.
- [Magic Bio](https://once-ui.com/products/magic-bio): Launch your bio page for your projects and social profiles and grow your network.
- [Magic Store](https://once-ui.com/products/magic-store): Set up your fully branded merch store in minutes and start selling with a trusted print-on-demand provider.
- [Magic Portfolio](https://once-ui.com/products/magic-portfolio): Build a professional portfolio with CV, blog and password protected pages.
- [Once UI Core](https://once-ui.com/products/once-ui-core): The core components library for building beautiful, accessible web applications.

## Optional

- [About](https://once-ui.com/about): Meet the team and community behind Once UI.
- [Pricing](https://once-ui.com/pricing): Explore subscription options and Pro features.
- [Changelog](https://docs.once-ui.com/changelog): View recent updates and releases.
- [Roadmap](https://docs.once-ui.com/roadmap): See what's coming next.
- [License](https://github.com/once-ui-system/nextjs-starter/blob/main/LICENSE): Open-source, MIT license details.
- [Sign up](https://once-ui.com/auth?signup): How we handle your data.