React components you copy, own, and change.

Yopem UI gives you accessible React component source built with Base UI and StyleX. Copy only what you need into your application. There is no Yopem package between you and your UI.

Build your first component · Browse components

What is Yopem UI?

Yopem is a component registry, not a component library dependency. Each component page contains a live preview, install dependencies, complete TypeScript source, usage notes, and generated API details.

React 19: Typed components that stay inside your project.
Base UI: Keyboard and screen-reader behavior from accessible primitives.
StyleX: Colocated, typed styles compiled to atomic CSS.

Why source-owned?

Change anything. Edit markup, behavior, variants, and styles in the same file.
Ship less. Copy the components you use instead of installing a full kit.
Keep control. Updates never change your app until you choose to copy them.

How it works

Configure the StyleX build transform and copy shared theme files once.
Choose a component and install the dependencies shown on its page.
Copy each required file to its displayed path under your source directory.
Import the local component and customize its source or xstyle prop.

Use your local component

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

export function SaveButton() {
  return <Button variant="outline">Save changes</Button>
}

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

export function SaveButton() {
  return <Button variant="outline">Save changes</Button>
}

Where to start

Introduction: Learn the workflow by adding one Button from start to finish.
Ready to configure: Pick React Router, TanStack Start, Next.js, or Astro.
Build a layout: Choose layout and typography components for your page.
Style components: Compose StyleX styles through xstyle.
Style your app: Change tokens, create themes, or override one component.