• Working with Blueprint Components

    index
    5
    status
    Draft

    Workbench is designed to work seamlessly with Blueprint components to create layered, explorable UI demonstrations. Blueprint provides components like Element, Fill, Shadow, Content, and Layout that understand Workbench’s zoom levels, explosion states, and interactive context.

    Integration

    Blueprint components automatically respond to:

    • Zoom levels set on the Workbench
    • View modes (normal vs. exploded)
    • Interactive context for state management

    Basic Pattern

    <script>
  import { Workbench, setupProps, useProp } from "workbench";
  import { Element, Fill, Content } from "blueprint";

  // Set up your props as usual
  setupProps({ ... });
</script>

<Workbench explodable zoomable>
  <Element>
    <Fill color="blue" elevation={0} />
    <Content elevation={1}>Text</Content>
  </Element>
</Workbench>

    Layered Construction

    Blueprint’s elevation system works hand-in-hand with Workbench’s exploded view mode to reveal how interface elements are constructed from multiple layers.

    State Management

    Blueprint components respond to interactive states managed through Workbench’s prop system, allowing you to create demonstrations that show how components behave in different interaction states.

    For detailed information on using Blueprint components, see the Blueprint documentation.