Xanui Core is a lightweight styling and theming toolkit for React. It bundles a constraint-based CSS generator, a TypeScript-friendly <Tag> primitive, responsive helpers, and an opinionated theme engine so that design tokens, animations, and layout logic stay consistent across your application.
- Build any element with
<Tag>and the ergonomicsx/alias props while still passing native attributes. - Author design tokens once via
createTheme, ship them withThemeProvider, and switch them at runtime withcreateThemeSwitcher. - Drive responsive layouts using
BreakpointProvider,useBreakpoint, anduseBreakpointPropswithout bespoke media queries. - Compose micro-animations through
useAnimation, ready-madeTransitionvariants, and reusable CSS utilities. - Support SSR portals by rehydrating critical styles with
RenderServerStyles.
npm install @xanui/coreimport { ThemeProvider, Tag, createTheme, createThemeSwitcher } from '@xanui/core'
// Register a custom theme once at startup
createTheme('brand', {
colors: {
brand: { primary: '#7C3AED', secondary: '#5B21B6' },
},
})
const useThemeSwitcher = createThemeSwitcher('brand', ThemeSwitcherOption)
export const App = () => {
const { name, change } = useThemeSwitcher()
return (
<ThemeProvider theme={name} isRootProvider>
<Tag
component="main"
px={24}
py={32}
bgcolor="background"
color="text.primary"
gap={24}
>
<Tag component="h1" fontSize="h2">
Xanui Core
</Tag>
<button onClick={() => change(name === 'brand' ? 'dark' : 'brand')}>
Toggle Theme
</button>
</Tag>
</ThemeProvider>
)
}- Design Tokens –
createThememerges your overrides with defaults and exposes typed references likebrand.primaryor typography presets. - Adaptive Layout – Wrap your app with
BreakpointProvider(automatically included byThemeProviderwhenisRootProvideristrue) to consume breakpoint helpers throughout the tree. - Composable Styles –
css,getValue, andgetPropstransform alias props, breakpoints, and pseudo selectors into atomic class names. Use them directly for utilities such as scrollbars or keyframes. - Animation Primitives –
useAnimationbuilds scoped keyframes on the fly;Transitioncontrols mount/unmount sequences with variants such asfade,slideDown, orcollapseVertical.
When rendering on the server, collect the emitted styles:
import RenderServerStyles from '@xanui/core/RenderServerStyles'
export const Document = () => (
<html>
<head>
<RenderServerStyles />
</head>
<body>{/* app */}</body>
</html>
)Detailed API docs (props tables, option summaries, and usage examples) live inside the docs/ directory. Each API/component has its own README.md for fast reference:
docs/tag/README.mddocs/theme-provider/README.mddocs/transition/README.mddocs/use-animation/README.mddocs/use-color-template/README.mddocs/use-interface/README.mddocs/use-breakpoint/README.mddocs/use-breakpoint-props/README.mddocs/use-scrollbar/README.mddocs/render-server-styles/README.mddocs/css/README.mddocs/create-theme/README.md
- Fork and clone the repo.
- Run
npm install. - Use
npm run buildto verify type safety. - Submit a pull request that focuses on one improvement at a time.
Need another integration example or a new preset? Open an issue so we can keep the primitives lean and discoverable.