Introduction

Stera UI components are built on Base UI, styled with Tailwind CSS v4, and use stera-icons for iconography. The CLI copies source directly into your project, so there's no runtime package to install or version to track. Theming uses CSS custom properties, and dark mode is included.

Quick start

pnpm dlx stera-ui@latest init

pnpm dlx stera-ui@latest add button dialog

import { Button } from "@/components/ui/button"

export function MyPage() {
  return <Button variant="brand">Click me</Button>
}

About

Stera UI began as a Figma component library, intended as the starting point for design systems. Kind of like a set of sane defaults.

I maticulously craft each component for a great designer experience. Stera UI is designed for you so you can design for others. Components should be easy to use, flexible, and composable. The hope is that if detatch a component its because your exploring a new exciting idea, instead of being frustrated by an annoyingly rigid component.

Then I discovered Shadcn's UI registry and was like... whoa, I didn't know you could do that. To me it felt like a Figma library. Like I can basically copy and paste this into my project and now I own it?? I wanted this for Stera UI! I stared by bootstraping using Shadcn UI. As I worked to modify each component to match it's Figma counterpart I learned more and more about Base UI and how fucking awesome it is.

Stera started as a little brother to Shadcn, but now they're more like second cousins. Components are structured to more closely follows Base UI's best practices and intentions. Base UI really is the star of the show.