Marble UI
← Components

Theme Panel

Preview: Default

Live token editor: preset, accent hue/chroma, radius and mode, applied to a scoped preview (not the whole page), with copyable CSS. The docs site uses it for "make it yours".

Import

import { ThemePanel } from '@marbleui/ui'

Props

<ThemePanel>

PropTypeDefaultDescription
classNamestring—
previewReactNode—

Usage notes

Live editor for accent hue and chroma, radius, preset and mode, with a scoped preview and copyable CSS. Use it on a docs or settings page to try a brand color; to switch the app’s theme at runtime use ThemeProvider and ThemeToggle.

<ThemePanel
  preview={
    <>
      <Button>Start trial</Button>
      <Switch defaultSelected>Weekly digest</Switch>
    </>
  }
/>
  • Changes apply only to the preview pane (its own data-theme and .dark class), not the page, and nothing is saved. The panel doesn’t read or update useTheme().
  • preview replaces the default sample (badge, text field, buttons, switch).
  • “Copy CSS” gives a [data-theme="…"] rule for --accent, --accent-hover, --accent-soft, --accent-soft-fg, --accent-ink and --radius, plus a .dark / [data-mode="dark"] rule with the dark-tuned accent values, whatever the Dark mode switch is set to; themeCss(draft) builds the same string.
Example source · show
import { ThemePanel } from './theme-panel'

export const styles = { Default: () => <ThemePanel /> }

Source: packages/ui/src/theme-panel/theme-panel.tsx

Catalog

Category
utilities
Priority
Extra
Primitive
custom