Add your first component

What you need

• A React application using TypeScript.
• React Router with Vite, TanStack Start, Next.js, or Astro.
• Permission to add packages and files to the project.

Yopem has no runtime component package. Initialize StyleX once, then install component source with the CLI.

1. Set up StyleX

Run bunx @yopem-ui/cli init from your project root. Init installs shared packages, source alias, tokens, global styles, and build configuration. See the installation guide for supported frameworks.

Continue only after your app completes a production build. StyleX is a build-time compiler, so installing its runtime package alone is not enough.

2. Install Button

Run bunx @yopem-ui/cli add button from your project root. The CLI installs Button, required shared files, and dependencies. See the Button documentation for usage and API details.

3. Use Button

Import Button from the local file installed by the CLI. Init maps @/* to src/*.

src/components/save-button.tsx

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

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

Render SaveButton. Setup is working when it has padding, a border, a hover state, and a visible keyboard focus ring.

4. Customize it

Use variants for supported visual choices. Use xstyle for a local override, tokens for app-wide design changes, or edit the copied source when behavior should change.

src/components/save-button.tsx

import * as stylex from "@stylexjs/stylex"
import { Button } from "@/components/ui/button"

const styles = stylex.create({ button: { borderRadius: "999px" } })

export function SaveButton() {
  return <Button xstyle={styles.button}>Save changes</Button>
}

Preserve accessible names, keyboard behavior, disabled states, and focus indicators when editing component source.

Next steps

• Add another component: Browse live previews and copy only what your app needs.
• Customize your theme: Change colors, fonts, radii, dark mode, or scoped themes.