Documentation / Build with Pebble
Theming & motion
Keep your own visual system, or start with Pebble’s tokens.
Pebble Pro is live · The Pebble installer is not published yet, so Free components install through the shadcn CLI.
Use semantic tokens
Components refer to roles such as background, foreground, border and muted, instead of assuming a particular color. Keep those roles consistent across your application.
--background--foreground--muted--borderLight and dark
Pebble uses a dark class on the root element. Supply both sets of semantic tokens when using your own theme, then check focus, contrast, disabled controls and overlays in each. Use this site’s theme control to compare the examples.
The website’s restrained monochrome styling is separate from the component token system. Change your project’s tokens to suit your own brand.
Respect motion preferences
Components use CSS and Motion where interaction benefits from it. Preserve their reduced-motion behavior when customizing them. Prefer opacity or an immediate state change over large movement for people who request reduced motion.
Test keyboard interaction and focus after composition. Automated checks do not replace testing with people and assistive technology. Mac baselines and human screen-reader checks remain outstanding.