Xanui Core — Documentation

Why Xanui Core

Built around one idea: props are the API, the theme is the source of truth

One primitive, every style

Tag renders any element with shorthand CSS props — px, bgcolor, radius, gap — resolved to atomic classes at render time.

Themes generate real palettes

createTheme expands a single brand color into a full 19-step scale plus semantic tokens for surface, text, and state colors.

Responsive props, no media queries

Any prop can take a per-breakpoint object — { xs: 'column', md: 'row' } — resolved automatically via useBreakpointProps.

SSR-safe by default

Styles collected during server rendering are streamed and hoisted into <head> automatically — no flush step required.

tsx

import { AppRoot, createTheme, Tag } from 'xanui-core'
 
const theme = createTheme({
  name: 'brand',
  mode: 'light',
  colors: { brand: '#7C3AED', accent: '#f59e0b' },
})
 
export const App = () => (
  <AppRoot component="body" theme={theme}>
    <Tag
      component="section"
      display="flex"
      direction="column"
      gap={}
      px={}
      py={}
      radius="md"
      shadow="md"
      bgcolor="paper.primary"
    >
      Themed, responsive, SSR-ready.
    </Tag>
  </AppRoot>
)

A headless React toolkit for theme-driven UI

Built around one idea: props are the API, the theme is the source of truth

Everything shipped in the package, documented

Start building with Xanui Core