Appearance
Utility Components
@boundsvg/extras provides small unstyled VNode helpers for application code. It fills the same role as a utility layer such as drei: it does not add a new renderer, theme, or visual language, but it removes repetitive layout props from common boundsvg scenes.
Example
tsx
import { Canvas, Box, Text } from "@boundsvg/core";
import { Center, FitText, HStack, ImageCover, VStack } from "@boundsvg/extras";
const coverSvg =
"data:image/svg+xml;utf8," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">' +
'<rect width="160" height="120" fill="#164e63"/>' +
'<circle cx="116" cy="36" r="24" fill="#facc15"/>' +
'<path d="M0 92 44 54 78 82 110 50 160 94v26H0z" fill="#22c55e"/>' +
"</svg>",
);
const vnode = (
<Canvas width={460} height={220} background="#111827">
{Center(
{ width: 460, height: 220 },
HStack(
{ gap: 16, padding: 18, width: 432, height: 172 },
Box(
{ width: 150, height: 132, overflow: "clip", borderRadius: 8 },
ImageCover({ src: coverSvg, width: 150, height: 132 }),
),
VStack(
{ gap: 10, width: 230 },
FitText(
{
font: "NotoSansJP",
fontSizePx: 28,
color: "#f8fafc",
preferredFrame: { w: 220, h: 42 },
},
"Utility layout",
),
Text(
{
font: "NotoSansJP",
fontSizePx: 14,
color: "#cbd5e1",
preferredFrame: { w: 220 },
wrap: "word",
},
"Compose reusable, unstyled layout helpers without changing the SVG model.",
),
),
),
)}
</Canvas>
);
Generated SVG
xml
<svg xmlns="http://www.w3.org/2000/svg" data-boundsvg-node-id="auto:0" viewBox="0 0 460 220" width="460" height="220">
<defs>
<clipPath id="clip-auto:0.0.0.0">
<rect x="32" y="42" width="150" height="132" rx="8" ry="8"/>
</clipPath>
</defs>
<rect x="0" y="0" width="460" height="220" fill="#111827"/>
<g data-boundsvg-node-id="auto:0.0">
<g data-boundsvg-node-id="auto:0.0.0">
<g data-boundsvg-node-id="auto:0.0.0.0" clip-path="url(#clip-auto:0.0.0.0)">
<g data-boundsvg-node-id="auto:0.0.0.0.0">
<image data-boundsvg-node-id="auto:0.0.0.0.0" href="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20120%22%3E%3Crect%20width%3D%22160%22%20height%3D%22120%22%20fill%3D%22%23164e63%22%2F%3E%3Ccircle%20cx%3D%22116%22%20cy%3D%2236%22%20r%3D%2224%22%20fill%3D%22%23facc15%22%2F%3E%3Cpath%20d%3D%22M0%2092%2044%2054%2078%2082%20110%2050%20160%2094v26H0z%22%20fill%3D%22%2322c55e%22%2F%3E%3C%2Fsvg%3E" x="32" y="42" width="150" height="132" preserveAspectRatio="xMidYMid slice"/>
</g>
</g>
<g data-boundsvg-node-id="auto:0.0.0.1">
<g data-boundsvg-node-id="auto:0.0.0.1.0">
<g data-boundsvg-node-id="auto:0.0.0.1.0" data-boundsvg-text="Utility layout" aria-label="Utility layout">
<path d="M208.05 69.65q-1.56 0-2.89-.45-1.34-.44-2.33-1.47T201.29 65q-.56-1.7-.56-4.12v-12h2.56V60.93q0 2.45.64 3.86t1.71 2q1.08.6 2.41.6q1.37 0 2.45-.6q1.09-.59 1.74-2q.66-1.41.66-3.86V48.88h2.47v12q0 2.42-.54 4.12t-1.54 2.73q-1.01 1.03-2.34 1.47-1.34.45-2.9.45zM225.37 69.65q-1.59 0-2.53-.63-.95-.62-1.35-1.77-.41-1.14-.41-2.64V56.23h-2.25V54.31l2.39-.14.28-4.26h2.12v4.26h4.12v2.06h-4.12v8.46q0 1.37.51 2.13.52.77 1.83.77.41 0 .89-.13.47-.12.83-.29l.5 1.92q-.64.22-1.36.39-.73.17-1.45.17zM231.13 69.29V54.17h2.57V69.29zM232.41 51.05q-.75 0-1.21-.46t-.46-1.24q0-.75.46-1.2.46-.44 1.21-.44.76 0 1.23.44.47.45.47 1.2q0 .78-.47 1.24t-1.23.46zM241.46 69.65q-.94 0-1.53-.39-.58-.39-.86-1.16-.28-.76-.28-1.82V47.12h2.56V66.45q0 .58.21.83t.49.25q.11 0 .22-.01.11-.02.31-.04l.36 1.95q-.28.08-.61.15-.34.07-.87.07zM246.7 69.29V54.17h2.56V69.29zM247.98 51.05q-.75 0-1.21-.46t-.46-1.24q0-.75.46-1.2.46-.44 1.21-.44t1.22.44q.48.45.48 1.2q0 .78-.48 1.24-.47.46-1.22.46zM259.09 69.65q-1.59 0-2.53-.63-.95-.62-1.36-1.77-.4-1.14-.4-2.64V56.23h-2.25V54.31l2.39-.14.28-4.26h2.12v4.26h4.12v2.06h-4.12v8.46q0 1.37.51 2.13.52.77 1.82.77.42 0 .89-.13.48-.12.84-.29l.5 1.92q-.64.22-1.36.39-.73.17-1.45.17zM265.1 75.8q-.53 0-.97-.08-.45-.08-.81-.22l.5-2.04q.23.09.53.17.31.08.64.08q1.28 0 2.1-.93.83-.93 1.3-2.32l.33-1.15-6.07-15.14h2.65l3.06 8.38q.36 1 .74 2.11.37 1.12.76 2.18H270q.31-1.06.63-2.16t.6-2.13l2.73-8.38h2.48l-5.68 16.4q-.53 1.47-1.29 2.66-.75 1.18-1.8 1.88-1.06.69-2.57.69zM288.27 69.65q-.95 0-1.53-.39-.59-.39-.87-1.16-.27-.76-.27-1.82V47.12h2.56V66.45q0 .58.21.83t.48.25q.12 0 .23-.01.11-.02.3-.04l.37 1.95q-.28.08-.62.15-.33.07-.86.07zM296.98 69.65q-1.25 0-2.25-.5t-1.57-1.46-.57-2.33q0-2.48 2.21-3.8t7.06-1.85q0-.98-.27-1.85-.26-.88-.93-1.42-.67-.55-1.92-.55-1.31 0-2.47.52-1.15.51-2.07 1.1l-.97-1.76q.69-.44 1.61-.9t2.01-.77q1.08-.3 2.31-.3q1.83 0 2.99.78t1.7 2.16q.54 1.37.54 3.27v9.3H302.3l-.22-1.81H302q-1.06.89-2.33 1.53t-2.69.64zM297.71 67.59q1.08 0 2.07-.5t2.08-1.48v-4.2q-2.54.28-4.04.79-1.5.52-2.14 1.25-.64.74-.64 1.74q0 1.31.78 1.86.77.54 1.89.54zM309.43 75.8q-.53 0-.97-.08-.45-.08-.81-.22l.5-2.04q.22.09.53.17t.64.08q1.28 0 2.1-.93t1.3-2.32l.33-1.15-6.07-15.14h2.65l3.06 8.38q.36 1 .74 2.11.37 1.12.76 2.18h.14q.31-1.06.63-2.16t.6-2.13l2.73-8.38h2.47l-5.68 16.4q-.53 1.47-1.28 2.66-.75 1.18-1.81 1.88-1.06.69-2.56.69zM329.37 69.65q-1.84 0-3.46-.93-1.61-.94-2.57-2.7-.96-1.77-.96-4.28q0-2.53.96-4.3t2.57-2.72q1.62-.94 3.46-.94q1.39 0 2.66.53q1.26.53 2.24 1.56.97 1.03 1.53 2.5.56 1.48.56 3.37q0 2.51-.98 4.28-.97 1.76-2.56 2.7-1.59.93-3.45.93zM329.37 67.53q1.31 0 2.29-.72.99-.73 1.55-2.03.56-1.31.56-3.04q0-1.75-.56-3.06t-1.55-2.03q-.98-.73-2.29-.73t-2.3.73q-.99.72-1.53 2.03T325 61.74q0 1.73.54 3.04.54 1.3 1.53 2.03.99.72 2.3.72zM344.79 69.65q-2.39 0-3.52-1.5-1.13-1.51-1.13-4.4V54.17h2.56v9.27q0 2.09.67 3.05t2.17.96q1.17 0 2.09-.61.92-.62 2.01-1.95V54.17h2.53V69.29h-2.12l-.19-2.37h-.08q-1.06 1.23-2.25 1.98-1.18.75-2.74.75zM362 69.65q-1.59 0-2.53-.63-.95-.62-1.35-1.77-.41-1.14-.41-2.64V56.23h-2.25V54.31l2.39-.14.28-4.26h2.12v4.26h4.12v2.06h-4.12v8.46q0 1.37.51 2.13.52.77 1.82.77.42 0 .9-.13.47-.12.83-.29l.5 1.92q-.64.22-1.36.39-.73.17-1.45.17z" fill="#f8fafc"/>
</g>
</g>
<g data-boundsvg-node-id="auto:0.0.0.1.1">
<g data-boundsvg-node-id="auto:0.0.0.1.1" data-boundsvg-text="Compose reusable, unstyled
layout helpers without changing
the SVG model." aria-label="Compose reusable, unstyled
layout helpers without changing
the SVG model.">
<path d="M203.28 99.9q-.95 0-1.77-.35-.82-.36-1.42-1.05-.61-.68-.94-1.67-.34-.99-.34-2.23q0-1.25.35-2.24.34-.98.95-1.67.62-.69 1.45-1.05.82-.36 1.8-.36.94 0 1.65.38.72.39 1.17.88l-.7.84q-.41-.44-.93-.7-.52-.27-1.17-.27-.97 0-1.7.5-.73.51-1.13 1.44-.41.93-.41 2.2q0 1.31.39 2.25.4.95 1.11 1.46t1.69.51q.73 0 1.31-.31t1.07-.85l.72.82q-.6.7-1.37 1.09-.77.38-1.78.38zM211.17 99.9q-.92 0-1.73-.47t-1.3-1.35q-.48-.89-.48-2.15q0-1.28.48-2.17.49-.89 1.3-1.36.81-.48 1.73-.48.7 0 1.34.27.64.26 1.13.78t.77 1.26.28 1.7q0 1.26-.49 2.15-.49.88-1.29 1.35t-1.74.47zM211.17 98.84q.66 0 1.16-.37.5-.36.78-1.02t.28-1.52q0-.89-.28-1.54-.28-.66-.78-1.03-.5-.36-1.16-.36-.65 0-1.15.36-.5.37-.77 1.03-.27.65-.27 1.54q0 .86.27 1.52t.77 1.02q.5.37 1.15.37zM216.7 99.72v-7.6h1.05l.13 1.1h.03q.5-.54 1.1-.92.59-.38 1.26-.38.89 0 1.38.39.49.4.72 1.07.61-.65 1.22-1.05.6-.41 1.3-.41q1.17 0 1.73.77.57.76.57 2.21v4.82h-1.27V95.07q0-1.08-.35-1.55-.34-.48-1.07-.48-.43 0-.9.29t-1.02.87v5.52h-1.27V95.07q0-1.08-.34-1.55-.35-.48-1.07-.48-.44 0-.91.29-.48.29-1 .87v5.52zM229.67 102.93V92.12h1.05l.12.88h.03q.52-.43 1.14-.76.63-.32 1.28-.32.98 0 1.66.49.68.48 1.02 1.35.35.86.35 2.04q0 1.3-.47 2.22t-1.22 1.4-1.62.48q-.51 0-1.05-.23-.53-.23-1.05-.65l.05 1.33v2.58zM232.8 98.82q.63 0 1.13-.35.5-.36.78-1.04t.28-1.62q0-.84-.21-1.47-.2-.64-.63-.99-.44-.35-1.18-.35-.47 0-.97.27-.5.26-1.04.77v4q.5.43.99.61.49.17.85.17zM241.3 99.9q-.92 0-1.73-.47-.82-.47-1.3-1.35-.48-.89-.48-2.15q0-1.28.48-2.17t1.3-1.36q.81-.48 1.73-.48.7 0 1.34.27.64.26 1.13.78t.77 1.26.28 1.7q0 1.26-.49 2.15-.49.88-1.29 1.35t-1.74.47zM241.3 98.84q.66 0 1.16-.37.49-.36.77-1.02t.28-1.52q0-.89-.28-1.54-.28-.66-.77-1.03-.5-.36-1.16-.36t-1.15.36q-.5.37-.77 1.03-.28.65-.28 1.54q0 .86.28 1.52.27.66.77 1.02.49.37 1.15.37zM248.75 99.9q-.8 0-1.55-.3t-1.28-.75l.62-.85q.5.4 1.03.66.54.25 1.22.25.76 0 1.13-.35.37-.34.37-.84q0-.39-.26-.65t-.66-.45-.82-.34q-.53-.21-1.04-.47t-.84-.67q-.33-.42-.33-1.06q0-.62.31-1.1t.9-.77q.58-.29 1.41-.29.7 0 1.31.25.61.26 1.04.62l-.61.8q-.4-.28-.81-.48-.41-.19-.92-.19-.72 0-1.07.33-.34.32-.34.77q0 .35.23.59t.61.4.8.33q.42.15.83.33.41.19.74.44t.53.62q.21.37.21.92q0 .61-.32 1.13-.31.52-.92.82t-1.52.3zM256.39 99.9q-1.02 0-1.84-.47-.83-.48-1.31-1.37-.49-.89-.49-2.13q0-.94.28-1.68.28-.73.77-1.26.48-.52 1.1-.8.61-.27 1.26-.27.98 0 1.65.44.67.43 1.03 1.23.35.81.35 1.9q0 .21-.01.39-.01.19-.04.34h-5.13q.05.81.38 1.41.32.59.87.92t1.27.33q.56 0 1.02-.16.45-.16.89-.44l.45.85q-.49.32-1.11.55-.62.22-1.39.22zM254 95.31h4.07q0-1.15-.49-1.76-.5-.61-1.4-.61-.53 0-1 .28t-.78.8q-.32.52-.4 1.29zM264.21 99.72v-7.6h1.05l.12 1.38h.03q.39-.72.96-1.15t1.2-.43q.26 0 .45.04.19.03.36.13l-.24 1.11q-.2-.06-.35-.09-.15-.04-.39-.04-.46 0-1 .4-.53.4-.91 1.36v4.89zM272.52 99.9q-1.02 0-1.85-.47-.82-.48-1.3-1.37-.49-.89-.49-2.13q0-.94.28-1.68.28-.73.77-1.26.48-.52 1.09-.8.62-.27 1.26-.27.98 0 1.66.44.67.43 1.02 1.23.36.81.36 1.9q0 .21-.01.39-.02.19-.04.34h-5.13q.04.81.37 1.41.33.59.88.92.54.33 1.27.33.56 0 1.02-.16.45-.16.89-.44l.44.85q-.49.32-1.1.55-.62.22-1.39.22zM270.13 95.31h4.07q0-1.15-.5-1.76-.49-.61-1.39-.61-.53 0-1 .28t-.78.8q-.32.52-.4 1.29zM279.42 99.9q-1.2 0-1.77-.75-.56-.76-.56-2.22V92.12h1.28v4.66q0 1.05.34 1.53.34.49 1.09.49.59 0 1.05-.31t1.01-.98V92.12h1.27v7.6h-1.06l-.1-1.19h-.04q-.53.62-1.13.99-.59.38-1.38.38zM287.68 99.9q-.79 0-1.54-.3t-1.28-.75l.61-.85q.51.4 1.04.66.53.25 1.22.25.75 0 1.12-.35.37-.34.37-.84q0-.39-.25-.65-.26-.26-.66-.45t-.82-.34q-.53-.21-1.05-.47-.51-.26-.83-.67-.33-.42-.33-1.06q0-.62.3-1.1.31-.48.9-.77t1.41-.29q.7 0 1.31.25.61.26 1.05.62l-.62.8q-.39-.28-.81-.48-.41-.19-.91-.19-.73 0-1.07.33-.35.32-.35.77q0 .35.24.59.23.24.6.4.38.16.8.33.42.15.84.33.41.19.74.44t.53.62.2.92q0 .61-.31 1.13-.32.52-.93.82t-1.52.3zM294 99.9q-.63 0-1.14-.25-.5-.25-.79-.74-.28-.48-.28-1.16q0-1.25 1.11-1.92q1.11-.66 3.55-.93q0-.49-.13-.93-.14-.44-.47-.71-.34-.27-.97-.27-.66 0-1.24.26-.58.25-1.04.55l-.49-.88q.35-.23.81-.46t1.01-.38q.54-.16 1.16-.16.92 0 1.51.39.58.4.85 1.09t.27 1.64v4.68h-1.05l-.11-.91h-.04q-.53.45-1.17.77T294 99.9zM294.36 98.87q.55 0 1.05-.26.49-.25 1.04-.74V95.76q-1.28.14-2.03.4-.76.26-1.08.63t-.32.87q0 .66.39.93.39.28.95.28zM303.48 99.9q-.52 0-1.1-.25-.57-.25-1.06-.71h-.06l-.11.78h-1.02V88.58h1.29v3.05l-.06 1.36q.52-.45 1.14-.76.61-.31 1.26-.31.98 0 1.65.49.67.48 1.02 1.35.35.86.35 2.04q0 1.29-.47 2.21-.47.93-1.22 1.41t-1.61.48zM303.27 98.82q.63 0 1.12-.35.5-.36.78-1.04t.28-1.62q0-.84-.2-1.47-.21-.64-.64-.99T303.43 93q-.47 0-.98.27-.5.26-1.03.77v4q.49.43.99.61.49.17.86.17zM310.13 99.9q-.48 0-.77-.19-.3-.2-.44-.59-.14-.38-.14-.91V88.58h1.29v9.71q0 .3.11.42.1.13.24.13.06 0 .11-.01.06-.01.16-.02l.18.98q-.14.04-.31.08-.17.03-.43.03zM315.84 99.9q-1.02 0-1.85-.47-.83-.48-1.31-1.37t-.48-2.13q0-.94.28-1.68.28-.73.76-1.26.48-.52 1.1-.8.62-.27 1.26-.27.98 0 1.65.44.67.43 1.03 1.23.36.81.36 1.9q0 .21-.02.39-.01.19-.04.34h-5.12q.04.81.37 1.41.33.59.87.92.55.33 1.28.33.56 0 1.01-.16.46-.16.89-.44l.45.85q-.49.32-1.11.55-.61.22-1.38.22zM313.44 95.31h4.08q0-1.15-.5-1.76t-1.39-.61q-.53 0-1 .28t-.79.8q-.31.52-.4 1.29zM320.28 102.38l-.31-.76q.66-.29 1.03-.79.38-.51.37-1.15l-.14-1.15.63.94q-.14.15-.3.22-.16.06-.35.06-.37 0-.65-.24t-.28-.66.28-.66q.29-.23.68-.23.51 0 .79.4.29.39.29 1.09q0 1.01-.55 1.77-.56.75-1.49 1.16zM329.77 99.9q-1.21 0-1.77-.75-.57-.76-.57-2.22V92.12h1.29v4.66q0 1.05.33 1.53.34.49 1.1.49.58 0 1.05-.31.46-.31 1-.98V92.12h1.28v7.6h-1.07l-.09-1.19h-.05q-.53.62-1.12.99-.6.38-1.38.38zM336.04 99.72v-7.6h1.05l.13 1.1h.02q.55-.54 1.16-.92t1.39-.38q1.21 0 1.77.77.56.76.56 2.21v4.82h-1.28V95.07q0-1.08-.34-1.55-.34-.48-1.1-.48-.59 0-1.05.3-.46.29-1.02.86v5.52zM346.57 99.9q-.8 0-1.55-.3t-1.28-.75l.62-.85q.5.4 1.03.66.53.25 1.22.25.76 0 1.13-.35.37-.34.37-.84q0-.39-.26-.65t-.66-.45-.82-.34q-.53-.21-1.04-.47t-.84-.67q-.33-.42-.33-1.06q0-.62.31-1.1t.89-.77q.59-.29 1.42-.29.7 0 1.31.25.61.26 1.04.62l-.62.8q-.39-.28-.8-.48-.41-.19-.92-.19-.73 0-1.07.33-.34.32-.34.77q0 .35.23.59t.61.4.8.33q.42.15.83.33.41.19.74.44t.53.62q.21.37.21.92q0 .61-.32 1.13-.31.52-.92.82t-1.52.3zM353.16 99.9q-.8 0-1.27-.31-.48-.32-.68-.89-.2-.58-.2-1.33V93.15h-1.14v-.96l1.21-.07.14-2.14h1.06v2.14h2.07v1.03h-2.07v4.26q0 .69.26 1.07.26.39.92.39.21 0 .44-.07.24-.06.42-.14l.26.96q-.33.11-.69.2-.36.08-.73.08zM356.19 103q-.27 0-.49-.05-.23-.04-.41-.11l.25-1.02q.11.04.27.08.15.05.32.05.64 0 1.06-.47.41-.47.65-1.17l.17-.58-3.06-7.61h1.33l1.54 4.21q.19.51.37 1.07.19.56.39 1.09h.07q.15-.53.31-1.09.17-.55.31-1.07l1.37-4.21h1.24l-2.85 8.24q-.27.75-.65 1.34-.37.6-.91.95-.53.35-1.28.35zM364.7 99.9q-.48 0-.77-.19-.3-.2-.44-.59-.14-.38-.14-.91V88.58h1.29v9.71q0 .3.11.42.1.13.24.13.06 0 .11-.01.06-.01.16-.02l.18.98q-.14.04-.31.08-.17.03-.43.03zM370.41 99.9q-1.02 0-1.85-.47-.82-.48-1.31-1.37-.48-.89-.48-2.13q0-.94.28-1.68.28-.73.76-1.26.49-.52 1.1-.8.62-.27 1.26-.27.98 0 1.65.44.68.43 1.03 1.23.36.81.36 1.9q0 .21-.01.39-.02.19-.05.34h-5.12q.04.81.37 1.41.33.59.88.92.54.33 1.27.33.56 0 1.01-.16.46-.16.89-.44l.45.85q-.49.32-1.1.55-.62.22-1.39.22zM368.02 95.31h4.07q0-1.15-.5-1.76-.49-.61-1.39-.61-.53 0-1 .28t-.79.8q-.31.52-.39 1.29zM377.68 99.9q-.96 0-1.66-.46-.71-.46-1.09-1.35-.39-.89-.39-2.16q0-1.24.46-2.13.46-.9 1.21-1.39t1.62-.49q.67 0 1.16.23.48.23.98.65l-.07-1.3V88.58h1.29V99.72h-1.05l-.11-.9h-.04q-.45.45-1.04.77-.59.31-1.27.31zM377.96 98.82q.53 0 1-.26.48-.25.94-.77V93.8q-.47-.44-.92-.62t-.93-.18q-.6 0-1.1.37-.49.37-.79 1.02t-.3 1.52q0 .91.25 1.57t.72 1t1.13.34zM200.63 116.7q-.47 0-.77-.19-.29-.2-.43-.59-.14-.38-.14-.91v-9.63h1.29v9.71q0 .3.1.42.11.13.25.13.05 0 .11-.01.05-.01.15-.02l.18.98q-.14.04-.3.08-.17.03-.44.03zM205.01 116.7q-.63 0-1.13-.25t-.79-.74q-.29-.48-.29-1.16q0-1.25 1.11-1.92q1.12-.66 3.55-.93q0-.49-.13-.93t-.47-.71q-.33-.27-.96-.27-.66 0-1.24.26-.58.25-1.05.55l-.49-.88q.35-.23.82-.46.46-.23 1-.38.55-.16 1.17-.16.92 0 1.5.39.58.4.86 1.09.27.69.27 1.64v4.68h-1.05l-.11-.91h-.05q-.53.45-1.16.77-.64.32-1.36.32zM205.38 115.67q.54 0 1.04-.26.5-.25 1.04-.74v-2.11q-1.27.14-2.03.4-.75.26-1.07.63-.33.37-.33.87q0 .66.4.93.39.28.95.28zM211.27 119.8q-.26 0-.49-.05-.22-.04-.4-.11l.25-1.02q.11.04.26.08.16.05.33.05.64 0 1.05-.47.42-.47.65-1.17l.17-.58-3.05-7.61h1.33l1.54 4.21q.18.51.37 1.07t.39 1.09h.07q.15-.53.31-1.09.16-.55.3-1.07l1.37-4.21h1.25l-2.86 8.24q-.26.75-.64 1.34-.38.6-.91.95t-1.29.35zM221.3 116.7q-.93 0-1.74-.47t-1.29-1.35q-.49-.89-.49-2.15q0-1.28.49-2.17.48-.89 1.29-1.36.81-.48 1.74-.48.7 0 1.33.27.64.26 1.13.78t.77 1.26.28 1.7q0 1.26-.49 2.15-.49.88-1.29 1.35t-1.73.47zM221.3 115.64q.65 0 1.15-.37.5-.36.78-1.02t.28-1.52q0-.89-.28-1.54-.28-.66-.78-1.03-.5-.36-1.15-.36-.66 0-1.16.36-.5.37-.77 1.03-.27.65-.27 1.54q0 .86.27 1.52t.77 1.02q.5.37 1.16.37zM229.05 116.7q-1.2 0-1.77-.75-.57-.76-.57-2.22v-4.81H228v4.66q0 1.05.34 1.53.33.49 1.09.49.59 0 1.05-.31t1.01-.98v-5.39h1.27v7.6H231.7l-.1-1.19h-.04q-.53.62-1.13.99-.59.38-1.38.38zM237.7 116.7q-.79 0-1.27-.31-.48-.32-.68-.89-.2-.58-.2-1.33v-4.22h-1.14v-.96l1.21-.07.14-2.14h1.06v2.14h2.07v1.03h-2.07v4.26q0 .69.26 1.07.26.39.92.39.21 0 .45-.07.23-.06.42-.14l.25.96q-.32.11-.69.2-.36.08-.73.08zM243.74 116.52V105.38h1.29v3.05l-.06 1.57q.53-.54 1.13-.91.61-.37 1.39-.37q1.2 0 1.76.76.56.77.56 2.22v4.82h-1.27v-4.65q0-1.08-.34-1.55-.35-.48-1.1-.48-.59 0-1.05.3-.46.29-1.02.86v5.52zM255.32 116.7q-1.03 0-1.85-.47-.83-.48-1.31-1.37t-.48-2.13q0-.94.28-1.68.28-.73.76-1.26.48-.52 1.1-.8.61-.27 1.26-.27.98 0 1.65.44.67.43 1.03 1.23.36.81.36 1.9q0 .21-.02.39-.01.19-.04.34h-5.12q.04.81.37 1.41.33.59.87.92.55.33 1.28.33.56 0 1.01-.16.46-.16.89-.44l.45.85q-.49.32-1.11.55-.61.22-1.38.22zM252.92 112.11H257q0-1.15-.5-1.76t-1.39-.61q-.54 0-1 .28-.47.28-.79.8-.31.52-.4 1.29zM261.34 116.7q-.48 0-.77-.19-.3-.2-.44-.59-.14-.38-.14-.91v-9.63h1.29v9.71q0 .3.1.42.11.13.25.13.06 0 .11-.01.06-.01.16-.02l.18.98q-.14.04-.31.08-.17.03-.43.03zM263.97 119.73V108.92h1.05l.12.88h.03q.52-.43 1.14-.76.63-.32 1.28-.32.98 0 1.66.48.68.49 1.03 1.36.34.86.34 2.04q0 1.3-.47 2.22t-1.22 1.4-1.62.48q-.51 0-1.05-.23-.53-.23-1.05-.65l.05 1.33v2.58zM267.1 115.62q.63 0 1.13-.35.5-.36.78-1.04t.28-1.62q0-.84-.21-1.47-.2-.64-.63-.99-.44-.35-1.18-.35-.47 0-.97.27-.5.26-1.04.77v4q.5.43.99.61.49.17.85.17zM275.73 116.7q-1.02 0-1.85-.47-.83-.48-1.31-1.37t-.48-2.13q0-.94.28-1.68.28-.73.76-1.26.48-.52 1.1-.8.62-.27 1.26-.27.98 0 1.65.44.67.43 1.03 1.23.36.81.36 1.9q0 .21-.02.39-.01.19-.04.34h-5.12q.04.81.37 1.41.33.59.87.92.55.33 1.28.33.56 0 1.01-.16.46-.16.89-.44l.45.85q-.49.32-1.11.55-.61.22-1.38.22zM273.33 112.11h4.08q0-1.15-.5-1.76t-1.39-.61q-.53 0-1 .28t-.79.8q-.31.52-.4 1.29zM280.4 116.52v-7.6h1.05l.13 1.38h.03q.39-.72.96-1.15.56-.43 1.19-.43.27 0 .46.04.19.03.36.13l-.24 1.11q-.2-.06-.35-.09-.16-.04-.39-.04-.47 0-1 .4t-.91 1.36v4.89zM287.73 116.7q-.8 0-1.55-.3t-1.28-.75l.61-.85q.51.4 1.04.66.53.25 1.22.25.75 0 1.13-.35.37-.34.37-.84q0-.39-.26-.65t-.66-.45-.82-.34q-.53-.21-1.04-.47t-.84-.67q-.33-.42-.33-1.06q0-.62.31-1.1.3-.48.89-.77t1.42-.29q.7 0 1.31.25.6.26 1.04.62l-.62.8q-.39-.28-.8-.48-.42-.19-.92-.19-.73 0-1.07.33-.34.32-.34.77q0 .35.23.59t.61.4q.37.16.79.33.42.15.84.33.41.19.74.44t.53.62.2.92q0 .61-.31 1.13-.32.52-.92.82-.61.3-1.52.3zM296.63 116.52l-2.11-7.6h1.3l1.13 4.39q.13.55.23 1.07.11.52.22 1.05h.07q.13-.53.25-1.05.11-.52.25-1.07l1.19-4.39h1.25l1.19 4.39q.14.55.27 1.07.14.52.26 1.05h.07q.11-.53.23-1.05.11-.52.23-1.07l1.11-4.39H305l-2.06 7.6h-1.55l-1.09-4.1q-.14-.53-.27-1.07-.12-.54-.25-1.12h-.07q-.13.58-.24 1.12-.12.55-.28 1.1l-1.08 4.07zM306.65 116.52v-7.6h1.29v7.6zM307.3 107.35q-.38 0-.61-.23t-.23-.62q0-.38.23-.61.23-.22.61-.22t.61.22q.24.23.24.61q0 .39-.24.62-.23.23-.61.23zM312.88 116.7q-.79 0-1.27-.31-.48-.32-.68-.89-.2-.58-.2-1.33v-4.22h-1.14v-.96l1.21-.07.14-2.14H312v2.14h2.07v1.03H312v4.26q0 .69.26 1.07.26.39.92.39.21 0 .45-.07.23-.06.42-.14l.25.96q-.32.11-.69.2-.36.08-.73.08zM315.78 116.52V105.38h1.29v3.05l-.06 1.57q.54-.54 1.14-.91t1.38-.37q1.21 0 1.77.76.56.77.56 2.22v4.82h-1.28v-4.65q0-1.08-.34-1.55-.34-.48-1.1-.48-.59 0-1.05.3-.46.29-1.02.86v5.52zM327.23 116.7q-.92 0-1.73-.47t-1.3-1.35q-.48-.89-.48-2.15q0-1.28.48-2.17.49-.89 1.3-1.36.81-.48 1.73-.48.7 0 1.34.27.64.26 1.13.78t.77 1.26.28 1.7q0 1.26-.49 2.15-.49.88-1.29 1.35t-1.74.47zM327.23 115.64q.66 0 1.16-.37.5-.36.78-1.02t.28-1.52q0-.89-.28-1.54-.28-.66-.78-1.03-.5-.36-1.16-.36-.65 0-1.15.36-.5.37-.77 1.03-.27.65-.27 1.54q0 .86.27 1.52t.77 1.02q.5.37 1.15.37zM334.99 116.7q-1.2 0-1.77-.75-.57-.76-.57-2.22v-4.81h1.29v4.66q0 1.05.34 1.53.33.49 1.09.49.59 0 1.05-.31t1.01-.98v-5.39h1.27v7.6h-1.06l-.1-1.19h-.04q-.54.62-1.13.99-.6.38-1.38.38zM343.64 116.7q-.8 0-1.27-.31-.48-.32-.68-.89-.2-.58-.2-1.33v-4.22h-1.14v-.96l1.21-.07.14-2.14h1.06v2.14h2.07v1.03h-2.07v4.26q0 .69.26 1.07.26.39.92.39.21 0 .44-.07.24-.06.42-.14l.26.96q-.33.11-.69.2-.36.08-.73.08zM352.67 116.7q-1.01 0-1.81-.47-.81-.47-1.27-1.35-.47-.89-.47-2.15q0-1.28.5-2.17t1.34-1.36q.84-.48 1.81-.48.74 0 1.28.27.54.26.93.63l-.64.84q-.32-.3-.69-.48-.38-.18-.82-.18-.69 0-1.24.36-.54.37-.85 1.03-.31.65-.31 1.54q0 .86.3 1.52t.83 1.02q.52.37 1.22.37.54 0 .98-.22.45-.22.82-.54l.56.87q-.52.45-1.15.7t-1.32.25zM356.82 116.52V105.38h1.28v3.05l-.05 1.57q.53-.54 1.13-.91t1.39-.37q1.2 0 1.76.76.56.77.56 2.22v4.82h-1.27v-4.65q0-1.08-.34-1.55-.35-.48-1.1-.48-.59 0-1.05.3-.47.29-1.03.86v5.52zM367.06 116.7q-.63 0-1.13-.25t-.79-.74q-.29-.48-.29-1.16q0-1.25 1.12-1.92q1.11-.66 3.54-.93q0-.49-.13-.93t-.47-.71q-.33-.27-.96-.27-.66 0-1.24.26-.58.25-1.05.55l-.49-.88q.35-.23.82-.46.46-.23 1-.38.55-.16 1.17-.16.92 0 1.5.39.58.4.85 1.09.28.69.28 1.64v4.68h-1.05l-.11-.91h-.05q-.53.45-1.16.77-.64.32-1.36.32zM367.43 115.67q.54 0 1.04-.26.5-.25 1.04-.74v-2.11q-1.27.14-2.03.4-.75.26-1.07.63-.33.37-.33.87q0 .66.4.93.39.28.95.28zM373.2 116.52v-7.6h1.05l.12 1.1h.03q.55-.54 1.16-.92.6-.38 1.39-.38q1.2 0 1.76.76.56.77.56 2.22v4.82H378v-4.65q0-1.08-.34-1.55-.35-.48-1.1-.48-.59 0-1.05.3-.47.29-1.03.86v5.52zM384.3 120.02q-.93 0-1.64-.24t-1.11-.69q-.39-.46-.39-1.1q0-.49.3-.94.29-.46.82-.78v-.07q-.29-.18-.49-.49-.19-.31-.19-.76q0-.47.27-.84.27-.36.57-.57v-.06q-.38-.29-.69-.82-.31-.54-.31-1.22q0-.84.39-1.45.4-.61 1.05-.94t1.4-.33q.34 0 .61.06.28.05.47.14h2.65v.98h-1.56q.28.26.45.67t.17.9q0 .81-.37 1.4-.37.6-1 .92t-1.42.32q-.26 0-.56-.07t-.56-.19q-.21.16-.35.37t-.14.54q0 .35.28.58.28.24 1.05.24h1.5q1.32 0 1.98.44.67.43.67 1.37q0 .7-.48 1.3-.47.6-1.34.97-.86.36-2.03.36zM384.28 113.24q.45 0 .82-.22t.59-.63.22-.95q0-.56-.22-.96t-.58-.61-.83-.21q-.43 0-.8.21t-.59.6-.22.97q0 .54.23.95.22.41.59.63.36.22.79.22zM384.48 119.14q.73 0 1.27-.23.54-.22.84-.58.3-.35.3-.73q0-.55-.39-.76-.4-.21-1.15-.21h-1.32q-.21 0-.47-.02t-.51-.09q-.4.28-.59.62-.18.35-.18.67q0 .6.58.96.58.37 1.62.37zM389.63 116.52v-7.6h1.29v7.6zM390.28 107.35q-.38 0-.61-.23t-.23-.62q0-.38.23-.61.23-.22.61-.22.37 0 .61.22.24.23.24.61q0 .39-.24.62t-.61.23zM393.48 116.52v-7.6h1.05l.13 1.1h.03q.54-.54 1.15-.92t1.39-.38q1.21 0 1.77.76.56.77.56 2.22v4.82h-1.28v-4.65q0-1.08-.34-1.55-.34-.48-1.1-.48-.59 0-1.05.3-.46.29-1.02.86v5.52zM404.58 120.02q-.92 0-1.63-.24-.72-.24-1.11-.69-.39-.46-.39-1.1q0-.49.29-.94.3-.46.83-.78v-.07q-.3-.18-.49-.49-.2-.31-.2-.76q0-.47.27-.84.28-.36.57-.57v-.06q-.38-.29-.68-.82-.31-.54-.31-1.22q0-.84.39-1.45t1.04-.94t1.41-.33q.34 0 .61.06.27.05.47.14h2.64v.98h-1.55q.28.26.45.67t.17.9q0 .81-.38 1.4-.37.6-1 .92t-1.41.32q-.27 0-.57-.07t-.55-.19q-.21.16-.35.37t-.14.54q0 .35.28.58.28.24 1.05.24h1.5q1.31 0 1.98.44.66.43.66 1.37q0 .7-.47 1.3-.48.6-1.34.97-.86.36-2.04.36zM404.57 113.24q.45 0 .82-.22t.59-.63q.21-.41.21-.95q0-.56-.21-.96-.22-.4-.58-.61-.37-.21-.83-.21-.43 0-.81.21-.37.21-.58.6-.22.39-.22.97q0 .54.22.95.23.41.59.63.37.22.8.22zM404.77 119.14q.72 0 1.26-.23.54-.22.84-.58.3-.35.3-.73q0-.55-.39-.76t-1.15-.21h-1.31q-.21 0-.47-.02t-.51-.09q-.41.28-.59.62-.18.35-.18.67q0 .6.58.96.58.37 1.62.37zM201.67 133.5q-.8 0-1.28-.31-.47-.32-.67-.89-.21-.58-.21-1.33v-4.22h-1.13v-.96l1.2-.07.14-2.14h1.07v2.14h2.07v1.03h-2.07v4.26q0 .69.25 1.07.26.39.92.39.21 0 .45-.07.24-.06.42-.14l.25.96q-.32.11-.68.2-.37.08-.73.08zM204.57 133.32V122.18h1.28v3.05l-.05 1.57q.53-.54 1.13-.91t1.39-.37q1.2 0 1.76.76.56.77.56 2.22v4.82h-1.27v-4.65q0-1.08-.35-1.55-.34-.48-1.09-.48-.59 0-1.05.3-.47.29-1.03.86v5.52zM216.14 133.5q-1.02 0-1.84-.47-.83-.48-1.31-1.37-.49-.89-.49-2.13q0-.94.28-1.68.28-.73.77-1.26.48-.52 1.1-.8.61-.27 1.26-.27.98 0 1.65.44.67.43 1.03 1.23.35.81.35 1.9q0 .21-.01.39-.01.19-.04.34h-5.13q.05.81.38 1.41.32.59.87.92t1.27.33q.56 0 1.02-.16.45-.16.89-.44l.45.85q-.49.32-1.11.55-.62.22-1.39.22zM213.75 128.91h4.07q0-1.15-.49-1.76-.5-.61-1.4-.61-.53 0-1 .28t-.78.8q-.32.52-.4 1.29zM226.92 133.5q-1.09 0-2-.4-.92-.41-1.58-1.11l.77-.9q.55.58 1.29.93t1.54.35q1.02 0 1.59-.46.56-.47.56-1.21q0-.54-.23-.87-.23-.32-.61-.54-.39-.21-.88-.42l-1.47-.65q-.47-.21-.96-.53-.48-.32-.8-.84t-.32-1.26q0-.8.42-1.41.42-.6 1.14-.95.73-.35 1.67-.35.92 0 1.7.35t1.31.91l-.67.82q-.48-.43-1.05-.69-.56-.26-1.29-.26-.87 0-1.39.4-.53.4-.53 1.08q0 .51.26.83t.65.52q.39.19.8.38l1.46.63q.58.25 1.07.6.48.35.76.87.28.51.28 1.27q0 .81-.42 1.48-.42.66-1.2 1.05-.79.38-1.87.38zM234.3 133.32l-3.27-10.26h1.35l1.67 5.56q.27.89.48 1.68.22.79.51 1.7h.06q.29-.91.51-1.7t.48-1.68l1.66-5.56h1.31l-3.26 10.26zM244.31 133.5q-1.36 0-2.4-.63t-1.64-1.82q-.59-1.19-.59-2.85q0-1.25.35-2.24.35-.98.99-1.67.63-.69 1.49-1.05.85-.36 1.87-.36q1.08 0 1.79.39.72.4 1.17.87l-.7.84q-.4-.41-.92-.69-.53-.28-1.3-.28-1.03 0-1.8.5-.77.51-1.19 1.44t-.42 2.2q0 1.31.4 2.25.4.95 1.17 1.46t1.86.51q.54 0 1.04-.16t.81-.44v-2.69H244.1V128h3.38v4.31q-.51.52-1.33.86-.82.33-1.84.33zM252.94 133.32v-7.6h1.05l.12 1.1h.03q.5-.54 1.1-.92.59-.38 1.27-.38.88 0 1.37.39.49.4.73 1.07.6-.65 1.21-1.05.61-.41 1.31-.41q1.16 0 1.73.76.56.77.56 2.22v4.82h-1.27v-4.65q0-1.08-.34-1.55-.35-.48-1.08-.48-.43 0-.9.29t-1.01.87v5.52h-1.28v-4.65q0-1.08-.34-1.55-.34-.48-1.07-.48-.44 0-.91.29-.48.29-1 .87v5.52zM268.85 133.5q-.92 0-1.73-.47t-1.3-1.36q-.48-.88-.48-2.14q0-1.28.48-2.17.49-.89 1.3-1.36.81-.48 1.73-.48.7 0 1.34.27.64.26 1.13.78t.77 1.26.28 1.7q0 1.26-.49 2.14-.49.89-1.29 1.36t-1.74.47zM268.85 132.44q.66 0 1.16-.37.5-.36.78-1.02t.28-1.52q0-.89-.28-1.54-.28-.66-.78-1.03-.5-.36-1.16-.36-.65 0-1.15.36-.5.37-.77 1.03-.27.65-.27 1.54q0 .86.27 1.52t.77 1.02q.5.37 1.15.37zM276.97 133.5q-.95 0-1.66-.46-.7-.46-1.09-1.35-.38-.89-.38-2.16q0-1.24.46-2.13.46-.9 1.21-1.39t1.62-.49q.67 0 1.15.23.49.23.99.65l-.07-1.3v-2.92h1.29v11.14h-1.05l-.11-.9h-.05q-.44.45-1.03.77-.59.31-1.28.31zM277.25 132.42q.54 0 1.01-.26.48-.25.94-.77V127.4q-.48-.44-.92-.62-.45-.18-.93-.18-.6 0-1.1.37-.49.37-.8 1.02-.3.65-.3 1.52q0 .91.26 1.57.25.66.72 1t1.12.34zM286.14 133.5q-1.02 0-1.84-.47-.83-.48-1.31-1.37-.49-.89-.49-2.13q0-.94.28-1.68.28-.73.77-1.26.48-.52 1.1-.8.61-.27 1.26-.27.98 0 1.65.44.67.43 1.03 1.23.35.81.35 1.9q0 .21-.01.39-.01.19-.04.34h-5.13q.05.81.37 1.41.33.59.88.92t1.27.33q.56 0 1.02-.16.45-.16.89-.44l.45.85q-.49.32-1.11.55-.62.22-1.39.22zM283.75 128.91h4.07q0-1.15-.49-1.76-.5-.61-1.4-.61-.53 0-1 .28t-.78.8q-.32.52-.4 1.29zM292.16 133.5q-.47 0-.77-.19-.29-.2-.43-.59-.14-.38-.14-.91v-9.63h1.29v9.71q0 .3.1.42.11.13.25.13.05 0 .11-.01t.15-.02l.19.98q-.14.04-.31.08-.17.03-.44.03zM295.45 133.5q-.37 0-.65-.27-.27-.27-.27-.69q0-.45.27-.72.28-.26.65-.26.38 0 .66.26.27.27.27.72q0 .42-.27.69-.28.27-.66.27z" fill="#cbd5e1"/>
</g>
</g>
</g>
</g>
</g>
</svg>When to use it
Use extras when a scene is still regular boundsvg but the same layout pattern appears repeatedly:
HStackandVStackfixdirectionfor row and column stacks.CenterfixesalignItemsandjustifyContenttocenter.Insetnames padding intent when wrapping content.FitTextdefaults text fitting toshrink.ImageCoverfixesobjectFittocover.
The helpers return normal boundsvg VNodes, so you can still render them with @boundsvg/core, pass them to @boundsvg/react, inspect them, or transform them with @boundsvg/core/vnode.
Keeping utilities unstyled
Extras deliberately avoids cards, badges, templates, gradients, and brand-specific components. Keep product styling in your application:
tsx
import { Canvas, Box, Text } from "@boundsvg/core";
import { Center, HStack, VStack } from "@boundsvg/extras";
const vnode = (
<Canvas width={360} height={160} background="#111827">
{Center(
{ width: 360, height: 160 },
HStack(
{ gap: 12 },
Box({ width: 48, height: 48, background: "#155e75", borderRadius: 8 }),
VStack(
{ gap: 4, width: 220 },
Text(
{ font: "NotoSansJP", fontSizePx: 20, color: "#f8fafc" },
"Reusable block",
),
Text(
{ font: "NotoSansJP", fontSizePx: 13, color: "#cbd5e1" },
"Your styles stay local.",
),
),
),
)}
</Canvas>
);