Installation

Add the package, load the tokens, and register the elements.

Install

lit is a peer dependency, so your app shares one copy with the components.

npm install @tweakpad/ui lit

Register the elements

Import the design tokens once, then define every element. Registration is a side effect, so it belongs in your app’s entry module.

import '@tweakpad/ui/styles.css'; import '@tweakpad/ui/register';

Then use the elements in your markup:

<tp-field label="Email"> <tp-input name="email" type="email" required></tp-input> </tp-field> <tp-button type="submit">Continue</tp-button>

Entry points

ImportContents@tweakpad/uiComponent classes and utilities, without side effects@tweakpad/ui/registerDefines every component@tweakpad/ui/widgetsWidget classes: color picker, easing editor, flow, emoji picker and text editor@tweakpad/ui/register/widgetsDefines every widget@tweakpad/ui/emojiEmoji data types, lookup helpers and the Emojibase adapter for the emoji picker@tweakpad/ui/text-editorEngine adapters, built-in tools, default layouts, strings and types for the text editor@tweakpad/ui/icons/<name>Individual icons@tweakpad/ui/styles.cssDesign tokens and page defaults

Widgets are opt-in: neither @tweakpad/ui nor @tweakpad/ui/register includes them. The text editor also needs an editing engine, Tiptap or Lexical, that your app installs; the library depends on neither.

Frameworks

The elements work in any framework that renders custom elements. For React and Vue the package also ships components that wrap them, typed from each element, and for Preact, Solid, Svelte and Vue templates, types for the elements’ own tags.

ImportContents@tweakpad/ui/react, @tweakpad/ui/widgets/reactReact 19 components, one per element@tweakpad/ui/vue, @tweakpad/ui/widgets/vueVue 3 components with v-model, one per element@tweakpad/ui/react/jsxTypes for <tp-…> tags in React@tweakpad/ui/vue/elementsTypes for <tp-…> tags in Vue templates@tweakpad/ui/preact, /solid, /svelte (and /widgets/…)Types for <tp-…> tags in those frameworks
import '@tweakpad/ui/styles.css'; import { Checkbox, Dialog, Button } from '@tweakpad/ui/react'; <Checkbox checked={checked} onCheckedChange={(event) => setChecked(event.detail.value)}> Snap to grid </Checkbox>;

A component defines its element when it first renders, and importing one bundles only that element. Frameworks covers events, controlled values, slots and server rendering in each framework.

Browser support

Current versions of Chrome, Edge, Firefox and Safari.