Skip to content
Get packs

Guide · Open source

How to use Base UI: unstyled React components guide

Updated · written with AI from the project's own documentation and checked against our catalogue data

Base UI is an open-source library of user interface components for React, such as the building blocks for menus and dialogs. It handles structure, behavior and accessibility but ships with no visual styling. This guide explains what it is, what you need before starting, where to find the official documentation, and who it suits, so you can decide whether it fits your project.

Base UImui/base-ui · ★ 11.3k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Node.js and a React project. Base UI is a React component library.
  2. 2Read the documentation. Open the Base UI quick start at base-ui.com/react/overview/quick-start to find the setup steps.
  3. 3Install the package. Follow the installation instructions in the official docs, since the README does not list install commands.
  4. 4Choose a styling approach. Decide how you will style the unstyled components, such as your own CSS.
  5. 5Build your components. Use the menus, dialogs and other controls in your app and style them to match your design.
  6. 6Check release notes. Review the releases page before upgrading to see the latest changes.

What Base UI is and what it includes

Base UI is an unstyled UI component library for building accessible user interfaces. It comes from the creators of Radix, Floating UI, and Material UI.

The components cover structure, behavior and accessibility. They include no colours, fonts or layout, so you decide how they look.

  • Building blocks for menus, dialogs and similar controls
  • Unstyled by design, so you can match your own design system
  • Written in TypeScript and licensed under MIT

What you need before you start

The project is a React component library, and the README lists Node.js and React as prerequisites. Base UI is aimed at React projects, so it is not a fit for non-React codebases.

Because the components are unstyled, you also need a styling approach of your own, such as your own CSS. The source does not name a specific one.

  • Node.js
  • React
  • Your own CSS or styling approach

Install Base UI and get started

The README does not list install commands. It points to the official documentation for setup, which starts at the quick start guide.

Open the Base UI documentation at base-ui.com and follow the quick start page for installation and first use.

  • Read the quick start at base-ui.com/react/overview/quick-start
  • Check the releases page at base-ui.com/react/overview/releases for the latest updates

Style the components to match your design

Since Base UI ships without visual styling, styling is part of your work. Apply your own CSS or styling approach to the components so they match your design system.

Because the library handles behavior and accessibility, your styling work focuses on appearance rather than rebuilding keyboard or structural logic.

  • Use your existing CSS or styling method
  • Keep your design tokens and visual rules in your own codebase

Get help and follow updates

The project lists several channels. Discord is for community support, questions and tips. The X and Bluesky accounts announce new releases.

If you want to contribute, the contributing guide explains the development process, how to propose bug fixes and improvements, and how to build and test changes.

  • Discord: discord.gg/g6C3hUtuxz for support and questions
  • X: x.com/base_ui for release announcements
  • Bluesky: bsky.app/profile/base-ui.com
  • Contributing guide: CONTRIBUTING.md in the repository

What people use it for

  • Building accessible menus and dialogs for a custom design system
  • Adding behavior-rich controls to a React web app that already has its own CSS
  • Creating a branded component set without inheriting a fixed visual style

Frequently asked questions

Is Base UI free to use?

Yes. The project is licensed under the MIT license, as stated in the README. Check the LICENSE file in the repository for the full terms.

What do I need to install Base UI?

The README lists Node.js and React as prerequisites. Setup details are in the official quick start guide at base-ui.com.

Does Base UI come with styles?

No. Base UI is unstyled, so it handles structure, behavior and accessibility but you provide the visual styling.

Can I use Base UI without React?

The source describes Base UI as a React component library, so it is not aimed at non-React projects.

How does Base UI compare to Radix UI, Headless UI and React Aria?

Radix UI, Headless UI and React Aria are comparable projects that also offer accessible components. This source does not compare their features, so review each project's documentation to decide.

Where can I get help if something breaks?

Join the Discord server for community support, questions and tips. You can also check the official documentation and releases page.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Base UI suits React developers and teams building their own design system who want accessible components without a fixed look. If you want ready-made styled components out of the box, or you are not using React, pick a different library.

Install options & downloads