StateBuilder: Component State Generator & Specs

The fastest way to build interactive components and hand-off all states to devs.

Designing the "Default" state is easy. Manually creating the Hover, Pressed, Focus, Disabled, and Error states can be tedious. BiblioStates automates the entire process in one click.

StateBuilder understands Component Types. Tell it you have a "Checkbox," and it generates Checked/Unchecked. Tell it you have a "Button," and it generates Hover/Pressed.

Key Features:

Smart State GenerationAuto-generate the exact states you need based on component logic:

Core: Default, Hover, Focus, Pressed, Placeholder.

Validation: Success, Error, and the critical Disabled state (with auto-calculated opacity).

Selection: Checked, Selected, Indeterminate (for complex data tables).

Toggles: On / Off switch positions.

Auto-DocumentationDon't just hand off visuals. BiblioStates generates a Spec Card next to your component listing:

Exact Hex codes for every state.

Opacity shifts (e.g., "Disabled: 40%").

Border & Focus Ring logic.

Token names (if available).

Accessibility GuardThe plugin runs a WCAG Contrast Check on every generated state. If your "Disabled" state is invisible to users, the documentation card will flag it immediately.

Supported Components✅ Buttons & Icon Buttons✅ Inputs (Text, Area, Combo)✅ Checkboxes, Radio Groups, Switches✅ Chips & Segmented ControlsBiblioKit.comBiblioKit is a suite of Figma plugins that cuts the grind for designers, developers, and marketers, so teams ship faster with clean, consistent files.