Components · HR Dashboard
HR Dashboard
Dashboard
No basis in this component: Motion · Density · Variant — and a control that changes nothing is not shown.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the prompt — once for the whole site.
Enter your email to reveal the code and the prompt
Once. No password, no account.Usage
- Copy
tokens.cssinto your project and link it before the component styles. - Paste the HTML markup where you want it.
- Paste the CSS into your sheet — its selectors are scoped to the component class, so nothing leaks.
- Set
dirtortlorltr— the component works with both.
RTL/LTR
Works in both directions — Arabic and English. Enforced in every build by , and exercised in the playground above.
Responsive
No fixed width that overflows, and a layout that stretches.
Accessibility
- Every field is named, with no redundant ARIA —
- Fully operable by keyboard
Dependencies
No external dependency — no CDN, no package to download.
tokens.css— Every colour and size in the component points to a token, with no literal value
Examples
- In English — The direction flips and the layout follows
- In light mode — Colours come from tokens, so they follow the theme
- On the mobile stage — A width of 360 pixels
- Without motion — As anyone who prefers reduced motion sees it
Not documented yet: When to use · When not to use · Variants · States · Motion — it needs human judgement, and no prose will be generated that looks like judgement without being it.