Once UI

once-ui.com

An open-source design system for indie creators. Deploy fully functional, branded web apps in hours.

llms.txt

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: 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: Pre-built templates and copy-paste blocks
Figma Integration: Design system and component library for Figma

Documentation

Quick start: Set up a Once UI project
Config: Configuration options
Customization Guide: Theming and styling documentation

Basics

Structure: Flexible box and grid layout container
Color: How color and themes works in Once UI
Spacing: How margin, padding and gap works in Once UI
Typography: How font-size and font-weight works in Once UI
Border: How border-radius and color works in Once UI
Components: Best practices for creating custom Once UI components

Context

LayoutProvider: Layout context
ThemeProvider: Theme context
DataThemeProvider: Data theme context
IconProvider: Icon context
ToastProvider: Toast context

Modules

Kbar: Keyboard navigation component
MegaMenu: Navigation mega menu component
MobileMegaMenu: Mobile navigation mega menu component
HeadingNav: Table of contents navigation
Meta: SEO meta tags component
Schema: Structured data schema component
CodeBlock: Syntax-highlighted code display
MediaUpload: Media upload with compression

Components

Accordion: Expandable accordion component
AccordionGroup: Grouped accordion component
Animation: Animation component
Arrow: Animated arrow component
AutoScroll: Auto-scroll component
Avatar: User avatar display
AvatarGroup: Grouped avatar display
Background: Background with effects
Badge: Badge component
Banner: Banner component
BlockQuote: Block quote component
Button: Core button component
Card: Content container component
Carousel: Image/content carousel
CompareImage: Image comparison slider
ContextMenu: Context menu component
CursorCard: Cursor card component
Dialog: Modal dialog component
Dropdown: Dropdown menu component
DropdownWrapper: Composable dropdown wrapper component
ElementType: Automatic semantic resolution component
EmojiPicker: Emoji picker component
EmojiPickerDropdown: Emoji picker dropdown component
Fade: Fade effect component
Feedback: User feedback display
Flex: Flexible box layout container
Grid: Grid layout container
Heading: Heading component
Hover: Hover effect component
HoverCard: Hover card component
Icon: Icon component
IconButton: Button with icon
InfiniteScroll: Infinite scroll component
InlineCode: Inline code display
Kbd: Keyboard key display
Line: Line separator
List: List component
Logo: Logo component
LogoCloud: Logo grid display
Mask: Mask component
MasonryGrid: Masonry grid layout container
Media: Enhanced image component
NavIcon: Navigation icon
OgCard: Open graph card component
Option: Option component
Particle: Particle component
ProgressBar: Progress bar component
Pulse: Pulse effect component
Scroller: Scrolling container
SegmentedControl: Segmented control/tabs
Skeleton: Loading placeholder
Slider: Slider component
SmartLink: Enhanced link component
Spinner: Loading indicator
StatusIndicator: Status indicator component
StyleOverlay: Style overlay component
StylePanel: Style panel component
Swiper: Image swiper component
Table: Table component
Tag: Tag component
Text: Text component
ThemeSwitcher: Theme toggle
Timeline: Timeline component
ToggleButton: Toggle button
Tooltip: Tooltip component
User: User profile component
UserMenu: User menu component

Form Controls

Checkbox: Checkbox input
Chip: Chip/tag component
ColorInput: Color picker input
DateInput: Date input
DatePicker: Date selection input
DateRangeInput: Date range input
DateRangePicker: Date range picker
Input: Text input field
NumberInput: Numeric input
OTPInput: One-time password input
PasswordInput: Password input field
TagInput: Tag input field
RadioButton: Radio selection
Select: Dropdown select
Switch: Toggle switch
Textarea: Multi-line text input

Effects

CelebrationFx: Firework and confetti animation effect
MatrixFx: Matrix grid effect with bulge and flicker animation
WeatherFx: Weather effect (rain, snow, leaves, lightning)
CountdownFx: Countdown timer effect
ShineFx: Shine animation effect for texts
TypeFx: Typewriter effect
CountFx: Numeric count animation effect
FlipFx: Flip animation effect
GlitchFx: Glitch animation effect
HoloFx: Holographic effect
LetterFx: Text animation effect
RevealFx: Reveal animation
TiltFx: Tilt interaction effect

Pro Templates

Authentication: Ready-to-use authentication pages
About: Company and team pages
Blog: Blog and content pages
Contact: Contact page template
Careers: Job listings and careers page
Pricing: Pricing tables and plans
Settings: User settings dashboard
Dashboard: User dashboard
Streaming: Streaming page template
Waitlist: Waitlist page template
Productivity: Productivity page template
Ecommerce: Ecommerce page template
Social: Social page template
Features: Product features showcase
Bento: Bento section layouts
FAQ: Frequently asked questions page
Cookie: Cookie consent banner
Newsletter: Newsletter subscription form
Hero: Hero section layouts
Plans: Plan selector and comparison
Testimonial: Customer testimonials
Header: Site header layouts
Sidebar: Sidebar navigation
Footer: Site footer layouts
Widgets: Widget components
Background: Customizable background with masking effects

Products

Supabase Starter: Once UI and Supabase integration.
Magic Spotlight: Launch a simple, beautiful content creator / founder portfolio.
Magic Convert: Launch a landing page and dashboard for your SaaS with your frontend infrastructure template.
Magic Docs: Launch a simple, lean and fully customizable product documentation site in minutes.
Magic Bio: Launch your bio page for your projects and social profiles and grow your network.
Magic Store: Set up your fully branded merch store in minutes and start selling with a trusted print-on-demand provider.
Magic Portfolio: Build a professional portfolio with CV, blog and password protected pages.
Once UI Starter: Clean Once UI setup.
Once UI Core: The core components library for building beautiful, accessible web applications.
Once UI Tailwind Starter: Clean Once UI setup with Tailwind CSS.

Showcase

Showcase: Real websites, apps, and portfolios built with Once UI by indie creators and teams.

Compare

Compare: How Once UI compares to other tools
Once UI vs Tailwind CSS: Component-first design system vs utility-first CSS
Once UI vs shadcn/ui: Integrated Next.js system vs Radix + Tailwind copy-paste components
Once UI vs Radix UI: Styled components and templates vs unstyled accessible primitives
Once UI vs HeroUI: Open-source Next.js design system vs Tailwind-based component library
Once UI vs Mantine: Next.js templates and marketing UI vs full React component framework
Once UI vs Base UI: Complete design system vs MUI unstyled headless components
Magic Docs vs Mintlify: Self-hosted docs template vs hosted documentation platform