Playroom

Select "Open in Playroom" to get started with the example below.

With Playroom, you can test different screen sizes and themes, share links to prototypes, and use all system components without needing to import anything.

You can control Playroom state and interactivity using the variables and functions that are injected into the global context:

// State
setDefaultState(key, value)
getState(key)
setState(key, value)
toggleState(key)
resetState()
// Theme
accent
mode
setAccent(accent)
setMode(mode)
// CSS
vars