You hold the glaze
Swap style presets, flip modes and repaint the primary color — every control below is real MarclayUI, re-theming instantly like react-bootstrap, but at runtime.
Everyday parts, potted well
The daily-use set — forms, overlays, feedback and data display. Lazy-loaded below, because a fast site is part of the design.
…plus Card, Divider, Navbar, Range, Select, Skeleton, Stack, Stat, Tabs, Textarea, Kbd, Toast and Tooltip in the docs.
Handmade, kiln-fired engineering
Claymorphism first
Soft extruded shapes, dual shadows and colored inner light — straight out of the kiln.
Light & dark
One data-theme attribute flips the whole system. Persists across visits, follows the OS.
Runtime theming
Override primary, secondary, accent, background and more with a single prop or hook.
Zero runtime deps
Only React as a peer. No Tailwind, no CSS-in-JS, no utility runtime to ship.
26 components
Buttons to modals — the everyday set, each with a responsive, cross-browser build.
TypeScript first
Full type definitions and strict props for every component, generated for ESM + CJS.
Next.js ready
RSC-friendly with 'use client' boundaries where they matter. Tree-shakeable imports.
Accessible
ARIA roles, keyboard navigation, focus rings and reduced-motion support included.
Two imports and you're firing
npm install marclayui// app/layout.tsx
import { MarclayProvider } from "marclayui";
import "marclayui/styles.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<MarclayProvider>{children}</MarclayProvider>
</body>
</html>
);
}import { Button, useTheme } from "marclayui";
export function Actions() {
const { setColors, toggle } = useTheme();
return (
<>
<Button variant="primary" onClick={toggle}>
Toggle dark mode
</Button>
<Button variant="secondary" onClick={() => setColors({ primary: "#7c5cff" })}>
Repaint the UI
</Button>
</>
);
}Full guide in the getting-started docs.