Flint Workbench
Every Flint component rendered live as MUI, shadcn/ui and plain CSS, side by side, in every state. Where the three differ, that is a finding.
How to use it
- Switch light and dark with the theme button in the header. All three implementations follow.
- Switch density on each bench page. Comfortable and compact change insets and gaps, never target size.
- Read down a column for one implementation's states. Read across a row to compare the three.
- Use the Live row with your mouse and keyboard. The other rows are forced states: they render the real hover and focus CSS without you hovering.
Benches
- ButtonFour variants, every state, as MUI, shadcn/ui and plain CSS. All three read the button component tokens.
- CheckboxEvery state as MUI, shadcn/ui and plain CSS. All three read the checkbox tokens: 24px box, edge, checked fill and mark.
- InputEvery state as MUI, shadcn/ui and plain CSS. All three read the input tokens, and error follows aria-invalid in each.
Usage guidance and code live on the component pages. Which Figma components are built yet is listed there too.
What gets checked
- Every bench page passes axe (WCAG 2.2 A and AA) in light and dark, at both densities, on every build.
- Every semantic and component token has a row in these docs; the build fails if one is missing.
- Token values match across CSS, MUI, shadcn and Swift (the parity check).