RollerPlayground
An interactive dice notation editor. The user types a notation string, presses roll, and sees the total with a step-by-step breakdown panel.
Live Demo
Section titled “Live Demo”import { RollerPlayground } from '@randsum/component-library'
export default function App() {return <RollerPlayground defaultNotation="4d6L" />}| Prop | Type | Default | Description |
|---|---|---|---|
defaultNotation | string | '4d6L' | Initial dice notation shown in the input |
size | 's' | 'm' | 'l' | 'l' | Overall size — scales font, padding, and chip |
stackblitz | boolean | true | Show the Code button to open the notation in StackBlitz |
className | string | — | Additional class name appended to the root element |
size variants
Section titled “size variants”The size prop scales the entire component proportionally.
size=“s”
size=“m”
size=“l” (default)
<RollerPlayground size="s" defaultNotation="1d20" /><RollerPlayground size="m" defaultNotation="2d6+3" /><RollerPlayground size="l" defaultNotation="4d6L" />Theming
Section titled “Theming”The component respects prefers-color-scheme automatically. Force a specific theme by setting data-theme on any ancestor:
<div data-theme="light"><RollerPlayground /></div>
<div data-theme="dark"><RollerPlayground /></div>