once-ui.txt

 once-ui.com > An open-source design system for indie creators to ship like teams of 10+ alone. ## Build faster than AI with Once UI for Next.js - [Build better products with Once UI Pro](https://once-ui.com/auth): An open-source design system for indie creators to ship like teams of 10+ alone. - [Built an agency in days with Once UI](https://once-ui.com/pricing): Get Once UI Pro - quick start with ready-made apps, copy-paste blocks, and request components. - [Build better products with Once UI Pro](https://once-ui.com/auth?signup): An open-source design system for indie creators to ship like teams of 10+ alone. - [Launch apps without writing a single line of code](https://once-ui.com/products): Quick start your SaaS app, creative portfolio, ecommerce site or agency with high quality products and copy-paste blocks. - [Once UI: The open-source stack for indie creators](https://once-ui.com/customize): An open-source design system for indie creators to ship like teams of 10+ alone. - [Once UI for Figma](https://once-ui.com/figma): Advanced design system and component library for Figma, fully compatible with Once UI for Next.js. - [Meet the community that fuels our mission](https://once-ui.com/about): Join the Once UI community and contribute to our open-source design system, or become our sponsor to support our mission. - [Installation](https://once-ui.com/docs): An open-source design system and component library for Next.js that emphasizes easy styling and accessibility in UI development. - [Quick start with Pro](https://once-ui.com/pro): High-level copy-paste components, sections and templates for your upcoming Next.js project. - [Page Not Found](https://once-ui.com/dir//Space+Needle+400+Broad+St+Seattle,+WA+98109/@47.6205063,-122.3492774,17z/data=!4m5!4m4!1m0!1m2!1m1!1s0x5490151f4ed5b7f9:0xdb2ba8689ed0920d): An open-source design system for indie creators to ship like teams of 10+ alone. ## Meet the community that fuels our mission - [Zsofia Komaromi](https://once-ui.com/about/zsofia): Zsofia is a product manager and designer who helps designers and developers bring their ideas to life with Once UI. She advocates for design systems that are both beautiful and functional, making complex interfaces feel effortless and intuitive. - [Suhaib SZ](https://once-ui.com/about/suhaib): Suhaib is a full-stack developer and entrepreneur specializing in web development, app development, and digital solutions. He excels in building SaaS applications with modern web technologies. - [Vincent Villafuerte](https://once-ui.com/about/vincent): Helping developers succeed with Once UI through documentation, tutorials, and community support. - [Adhitya Nadooli](https://once-ui.com/about/adhitya): High school innovator and full-stack developer, creator of Dusk IDE and Pyupil. Combines AI and education technology to build tools that empower developers and students. Currently leads multiple tech initiatives while pursuing his passion for computer science. - [Lorant One](https://once-ui.com/about/lorant): Lorant is a Vienna-based design engineer with a passion for all things creative. He designs and builds web apps, contributes to open-source projects, experiments with generative AI, paints digitally and occasionally picks up a pen to sketch on paper. ## Installation - [NavIcon](https://once-ui.com/docs/navIcon): Use the Nav Icon component to create navigation icons in your Next.js application. - [Scroller](https://once-ui.com/docs/scroller): A wrapper component that allows for accessible scrolling with handlers for the overflowing content. - [SegmentedControl](https://once-ui.com/docs/segmentedControl): A segmented control component with customizable buttons and optional prefix and suffix icons for your Next.js application. - [Skeleton](https://once-ui.com/docs/skeleton): Use the Skeleton component to create loading placeholders in your Next.js application. - [SmartImage](https://once-ui.com/docs/smartImage): A custom image component that allows quick and easy rendering and styling of media elements such as images or videos. - [SmartLink](https://once-ui.com/docs/smartLink): A custom link component that allows quick and easy styling of link elements. - [Spinner](https://once-ui.com/docs/spinner): Use the Spinner component to indicate loading states in your Next.js application. - [Tag](https://once-ui.com/docs/tag): A customizable tag component with different variants, sizes, and optional prefix and suffix icons. - [ThemeSwitcher](https://once-ui.com/docs/themeSwitcher): A component for toggling between light and dark themes in your Next.js application, with smooth transitions and system preference support. - [Toast](https://once-ui.com/docs/toast): Learn how to use the Toast component to create notifications in your Next.js applications. - [ToggleButton](https://once-ui.com/docs/toggleButton): A button that can be toggled between selected and unselected states. - [Tooltip](https://once-ui.com/docs/tooltip): Use the Tooltip component in Once UI to create hover tooltips in your Next.js application. - [User](https://once-ui.com/docs/user): A customizable user component that displays an avatar, a name, a subline, and a tag, with optional loading states. - [UserMenu](https://once-ui.com/docs/userMenu): Use the User Menu component in Once UI to create profile menus in your Next.js applications. - [Checkbox](https://once-ui.com/docs/checkbox): A customizable and interactive checkbox component with optional descriptions and icon buttons. - [Chip](https://once-ui.com/docs/chip): A component that displays an inline-flex element with optional prefix icon and remove functionality. - [ColorInput](https://once-ui.com/docs/colorInput): A color input component that lets you pick or set colors in different color formats, such as hex or rgb. - [DatePicker](https://once-ui.com/docs/datePicker): Customizable component in Once UI. Build quickly without compromising design and branding. - [DatePicker](https://once-ui.com/docs/dateRangePicker): Customizable component in Once UI. Build quickly without compromising design and branding. - [Input](https://once-ui.com/docs/input): Create user input fields with optional prefix and suffix icons in your Next.js application. - [NumberInput](https://once-ui.com/docs/numberInput): Customizable component in Once UI. Build quickly without compromising design and branding. - [OTPInput](https://once-ui.com/docs/otpInput): A secure input component for handling one-time passwords and verification codes in your Next.js application. - [PasswordInput](https://once-ui.com/docs/passwordInput): Customizable component in Once UI. Build quickly without compromising design and branding. - [RadioButton](https://once-ui.com/docs/radioButton): Use the Radio Button component to create radio controls in your Next.js application. - [Select](https://once-ui.com/docs/select): Use the Select component to create dropdowns in your Next.js application. - [Switch](https://once-ui.com/docs/switch): Use the Switch component to create toggle controls in your Next.js application. - [TagInput](https://once-ui.com/docs/tagInput): A tag input component that allows users to enter multiple tags. - [Textarea](https://once-ui.com/docs/textarea): Use the Text Area component for long-form textual inputs. - [GlitchFx](https://once-ui.com/docs/glitchfx): Customizable component in Once UI. Build quickly without compromising design and branding. - [HoloFx](https://once-ui.com/docs/holofx): Customizable component in Once UI. Build quickly without compromising design and branding. - [LetterFx](https://once-ui.com/docs/letterfx): Customizable component in Once UI. Build quickly without compromising design and branding. - [RevealFx](https://once-ui.com/docs/revealfx): Customizable component in Once UI. Build quickly without compromising design and branding. - [TiltFx](https://once-ui.com/docs/tiltfx): Customizable component in Once UI. Build quickly without compromising design and branding. - [CodeBlock](https://once-ui.com/docs/codeBlock): A code block component with different styles and highlighting in Once UI for your Next.js project. - [CompareImage](https://once-ui.com/docs/compareImage): An interactive component for comparing two images or React components with a slider in your Next.js application. - [MediaUpload](https://once-ui.com/docs/mediaUpload): A media upload component with client-side image compression in Once UI for your Next.js project. - [Accordion](https://once-ui.com/docs/accordion): A flexible accordion component in Once UI for your Next.js project. - [Arrow](https://once-ui.com/docs/arrow): A custom animated arrow component in Once UI for your Next.js project. - [Avatar](https://once-ui.com/docs/avatar): A customizable avatar component that can display an image, a letter, or an icon, with optional loading and status indicator states. - [AvatarGroup](https://once-ui.com/docs/avatarGroup): A customizable avatarGroup component that can display an image, a letter, or an icon, with optional loading and status indicator states. - [Background](https://once-ui.com/docs/background): A background component with customizable graphic elemenets and optional static or cursor tracking masking. - [Badge](https://once-ui.com/docs/badge): A badge component with optional animated effect and link. - [Button](https://once-ui.com/docs/button): Add a button to perform various actions, such as submitting a form, navigating to a different page, or triggering JavaScript code on click. - [Card](https://once-ui.com/docs/card): Customizable component in Once UI. Build quickly without compromising design and branding. - [Carousel](https://once-ui.com/docs/carousel): A custom carousel component with adjustable aspect ratio and thumbnail or graphic indicator. - [Dialog](https://once-ui.com/docs/dialog): A dialog component that renders in the middle of the screen, locks the scroll when open, and includes a header, body, and footer. - [Dropdown](https://once-ui.com/docs/dropdown): A customizable dropdown component that allows users to select options with optional prefix and suffix icons. - [Fade](https://once-ui.com/docs/fade): Customizable component in Once UI. Build quickly without compromising design and branding. - [Feedback](https://once-ui.com/docs/feedback): Learn how to use the Feedback component in Once UI, show feedback for user actions - [Flex](https://once-ui.com/docs/flex): A component that provides flexible box layout, allowing easy alignment and spacing of child elements. - [Grid](https://once-ui.com/docs/grid): Use the Grid component to create responsive grid layouts in your Next.js application. - [Icon](https://once-ui.com/docs/icon): A flexible icon component that allows you to add icons to your Next.js application. The size and type of the icon can be customized. - [IconButton](https://once-ui.com/docs/iconButton): A button component that displays an icon and an optional tooltip. It can be used to perform various actions when clicked. - [InlineCode](https://once-ui.com/docs/inlineCode): A component for displaying inline code snippets in your Next.js application. - [Kbd](https://once-ui.com/docs/kbd): Customizable component in Once UI. Build quickly without compromising design and branding. - [Line](https://once-ui.com/docs/line): Customizable component in Once UI. Build quickly without compromising design and branding. - [Logo](https://once-ui.com/docs/logo): A logo component that allows for setting your brand logo or display custom logos, set size and add link. - [LogoCloud](https://once-ui.com/docs/logoCloud): Customizable component in Once UI. Build quickly without compromising design and branding. - [Theming](https://once-ui.com/docs/theming): Learn how to customize the theme for your Next.js application using the Once UI design system. - [Fonts](https://once-ui.com/docs/fonts): Learn how to use and customize fonts in Once UI for your Next.js application. - [Color](https://once-ui.com/docs/colors): Learn about the color system of Once UI for your Next.js application. - [Icons](https://once-ui.com/docs/icons): Import icons from various icon libraries to Once UI for your Next.js project. - [Flex layout](https://once-ui.com/docs/flexComponent): A custom Flex component in Once UI for your Next.js project. - [Grid layout](https://once-ui.com/docs/gridComponent): A custom grid component in Once UI for your Next.js project. - [Heading](https://once-ui.com/docs/headingComponent): A heading component with custom properties in Once UI for your Next.js project. - [Text](https://once-ui.com/docs/textComponent): A text component with custom properties in Once UI for your Next.js project. - [Color](https://once-ui.com/docs/color): Explore the color system in Once UI and learn how to style your Next.js components. - [Typography](https://once-ui.com/docs/typography): Explore the typography system in Once UI and learn how to style your Next.js components. - [Spacing](https://once-ui.com/docs/spacing): Explore the spacing system in Once UI and learn how to style your Next.js components. - [Border](https://once-ui.com/docs/border): Explore the border styles in Once UI and learn how to style your Next.js components. - [MegaMenu](https://once-ui.com/docs/megaMenu): A powerful navigation component for creating expandable mega menus in your Next.js application. - [HeadingNav](https://once-ui.com/docs/headingnav): Customizable component in Once UI. Build quickly without compromising design and branding. - [Meta](https://once-ui.com/docs/meta): A component for managing SEO meta tags and Open Graph data in your Next.js application. - [Schema](https://once-ui.com/docs/schema): A component for adding structured data and schema markup to your Next.js application. ## Quick start with Pro - [Contact](https://once-ui.com/pro/contact): Customizable component in Once UI Pro. Build quickly without compromising design and branding. - [Careers](https://once-ui.com/pro/careers): Customizable component in Once UI Pro. Build quickly without compromising design and branding. - [About](https://once-ui.com/pro/about): Customizable component in Once UI Pro. Build quickly without compromising design and branding. - [Authentication](https://once-ui.com/pro/authentication): Implement beautiful authentication UI in minutes with copy-paste code. - [Pricing](https://once-ui.com/pro/pricing): Implement beautiful pricing page UI in minutes with copy-paste code. - [Settings](https://once-ui.com/pro/settings): Implement beautiful settings page UI in minutes with copy-paste code. - [Blog](https://once-ui.com/pro/blog): Implement beautiful blog page UI in minutes with copy-paste code. - [Profile](https://once-ui.com/pro/profile): Implement beautiful profile page UI in minutes with copy-paste code. - [Features](https://once-ui.com/pro/features): Customizable component in Once UI Pro. Build quickly without compromising design and branding. - [Frequently asked questions](https://once-ui.com/pro/faq): Customizable component in Once UI Pro. Build quickly without compromising design and branding. - [Cookie](https://once-ui.com/pro/cookie): Customizable component in Once UI Pro. Build quickly without compromising design and branding. - [Newsletter](https://once-ui.com/pro/newsletter): Customizable component in Once UI Pro. Build quickly without compromising design and branding. - [Hero](https://once-ui.com/pro/hero): Implement beautiful hero section UI in minutes with copy-paste code. - [Plans](https://once-ui.com/pro/plans): Implement beautiful plan selector UI in minutes with copy-paste code. - [Testimonial](https://once-ui.com/pro/testimonial): Implement beautiful testimonial section UI in minutes with copy-paste code. - [Header](https://once-ui.com/pro/header): Implement beautiful header section UI in minutes with copy-paste code. - [Sidebar](https://once-ui.com/pro/sidebar): Implement beautiful sidebar section UI in minutes with copy-paste code. - [Footer](https://once-ui.com/pro/footer): Implement beautiful footer section UI in minutes with copy-paste code. - [Background](https://once-ui.com/pro/background): A background component with customizable graphic elemenets and optional static or cursor tracking masking. - [Documentation – Once UI Pro](https://once-ui.com/pro/undefined&cid=15792901685599310349): Customizable component in Once UI Pro. Build quickly without compromising design and branding. ## 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.