Layout
Generic intrinsic-element wrapper with StyleX defaults and xstyle. Div-only flex layout with display:flex and xstyle. Div-only vertical flex layout with spacing. Div-only horizontal flex layout with centered items and spacing. Div-only vertical flex layout with centered items and spacing. Div-only grid layout with display:grid. Div-only flex layout that centers content on both axes. Centered, fluid page wrapper with a 90rem maximum width and horizontal padding. Center an element within a positioned ancestor. Extend content into a parent's inline padding. Position content over a corner of its parent. Flex layout that wraps items across rows. Native anchor with xstyle and no component visual defaults. Native paragraph with xstyle. Semantic quotation with a quiet left border. Native emphasized text. Highlight matching text with semantic marks. Native marked text using semantic theme tokens. Readable container for long-form content. Scrollable preformatted source code. Native h2-by-default heading with h1-h6 selection and xstyle. Button with variants, sizes, rendering composition, and loading state. Composable form label.
Overview
Copy the source into your project, then import the parts you need. Styles use local StyleX declarations and shared theme tokens. You can change the source without wrapping or replacing a package.
Installation
Run bunx @yopem-ui/cli init from your project root first. The CLI configures StyleX and installs shared files and dependencies.
Run from your project root. The CLI installs required components, shared files, and packages. Previews may need additional components. Existing files are preserved. To refresh installed source, use update; locally edited files need an explicit --force to overwrite.
Preview
Composable layout primitives
Usage
Start with Box for generic containers. It renders a div by default, applies default box sizing and minimum inline size, and supports native tags through as.
Use xstyle for StyleX overrides and className for external CSS integration. Native attributes and refs follow the selected tag, including input size, image dimensions, and meta content.
Flex renders a div with display:flex. Customize direction, alignment, and gap with xstyle.
Stack renders a div with column direction and a default gap of four spacing units. Override through xstyle.
HStack renders a div with centered items, row direction, and a default gap of four spacing units. Override through xstyle.
VStack renders a div with centered items, column direction, and a default gap of four spacing units. Override through xstyle.
Grid renders a div with display:grid. Set columns and gaps through xstyle.
Center renders a div with flex layout centered on both axes. Override through xstyle.
Container centers page content with a 90rem maximum inline size and four spacing units of horizontal padding. Use fluid to remove the width cap or xstyle to choose another maximum width and padding.
Position an ancestor before placing AbsoluteCenter inside it. Set axis to horizontal or vertical to center along one dimension only.
Place Bleed inside a padded region to extend content to its inline edges. Avoid using it as a page-width wrapper; Container handles that case.
Position the parent and use Float to place a badge or action over one corner. Keep interactive content keyboard reachable.
Wrap uses flex rows that wrap automatically. Set gap through xstyle rather than adding spacing to every child.
Link renders a native anchor with href, events, ref, and keyboard behavior. Use render={<RouterLink to="/path" />} with TanStack Router or render={<NextLink href="/path" />} with Next.js so the framework handles navigation. Both router components must render an anchor.
Text replaces Paragraph and renders a native p. Use xstyle for typography.
Use Blockquote for quoted passages, not for indentation. Supply a citation in surrounding content when needed.
Em adds semantic stress emphasis. Use it for meaning rather than visual italics alone.
Highlight marks matching text segments. Keep the original text readable when there are no matches.
Mark highlights text relevant to the current context. It does not replace an accessible status message.
Prose supplies a readable width for long-form content. Compose semantic headings, paragraphs and lists inside it.
Codeblock preserves code whitespace and allows horizontal scrolling. Supply a language label outside the block when context is not obvious.
Heading renders h2 by default; as accepts h1 through h6. Use xstyle to control visual size independently of semantics.
Use Button for an action. Set type="submit" inside a form when it should submit.
loading displays Spinner and disables the native button. Use an accessible label for icon-only sizes. Use render with a link for navigation; custom elements must handle disabled interaction themselves because an anchor does not honor the disabled attribute.
Use Label with htmlFor matching the control's id.
For Base UI validation and description associations, use FieldLabel within Field instead.
Import from the local file installed by the CLI.
API reference
Generated from canonical TypeScript source. Only component and Base UI props appear below. Required marks a required property, not a required component.