Components

Rokle provides 71 production-ready components across 6 categories: Input, Display, Feedback, Layout, Navigation, and Overlay.

All components read their styles from CSS custom properties automatically. No configuration needed: import the component and the active brand system's tokens apply.

Every component accepts a personality prop for per-instance overrides. Pass { shape, weight, density, feel } to adjust a single component without affecting the rest of the page.

Components are framework-agnostic at the token level. The same tokens.css works with React, Vue, and Solid implementations.

For the full component list, visit the Components page.