Getting Started

index

0

status

Draft

Blueprint components are designed to be used within a Workbench context to create layered, explorable UI elements. Here’s a simple example:

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

  setupProps({
    hue: {
      type: "number",
      value: 180,
      min: 0,
      max: 360,
      unit: "deg",
      configurable: true,
      playable: true,
      duration: 3000,
      label: "Hue",
      showValue: true,
    },
    baseColor: {
      derive: ({ hue }) => `hsl(${hue.value}, 100%, 50%)`,
      inputs: ["hue"],
      fallback: "#00f"
    }
  });

  const color = useProp("baseColor");
</script>

<Workbench explodable={true} zoomLevel={4}>
  <Element borderRadius="0.5rem">
    <Shadow elevation={-1} />
    <Fill color={color} elevation={0} />
    <Content color="white">Button</Content>
  </Element>
</Workbench>

Blueprint components must be used within a Workbench context as they rely on zoom level, view mode, and interactive state context provided by the Workbench ecosystem.