Introduction

Cubby UI is a collection of primitive and composable components built with React 19, TypeScript, Tailwind CSS 4, and Base UI. Copy, paste, and customize.

What is Cubby UI?

Cubby UI is a collection of opinionated components built on Base UI with React 19, TypeScript, and Tailwind CSS 4. It adds styling and functionality defaults on top of Base UI's unstyled, accessible primitives.

Why Cubby UI?

  • Opinionated styling - Pre-styled components built on Base UI's unstyled, accessible primitives. No need to design from scratch.
  • Common patterns built-in - Abstracts common use cases so you don't have to wire up the same functionality repeatedly.
  • Full ownership - Components are copied into your project via the shadcn registry, not imported from a package. Customize freely.

Primitives and Composables

The component library is split into two groups, labelled on every component page and grouped in the sidebar:

  • Primitives - A styled wrapper around a single Base UI primitive. Button, Dialog, and Select take an unstyled, accessible primitive and add Cubby UI's defaults. If Base UI ships it, you'll find the styled version here.
  • Composables - A higher-level pattern composed from primitives, or an original component with no Base UI counterpart. Command builds a command menu on top of Dialog; Circular Slider is built from scratch. Composables list what they're built on so you can trace them back to their foundation.

Other Options

There are several great UI libraries built on Base UI. Here are some worth checking out:

  • Shadcn/UI - Shadcn/UI now offers all their ui components with Base UI as the component library. This is a great option if you are already using Shadcn/UI and want to use Base UI components.
  • Coss UI - Great collection of components built by the team of Cal.com that is also built on top of Base UI.

If you're looking for chart components, check out Evil Charts.

Getting Started

Ready to start building? Head to the Installation guide to add Cubby UI to your project.