Prop DSL for typed UI composition. Components accept utility-class props (p={2} mt={4} variant="primary"); props compile to Tailwind class strings at render time. Same source emits data-class attributes for SSG semantic rewrite. Type-safe at authoring; runtime-validated via Zod; zero runtime overhead beyond a sorted string lookup.
npm install @booga/vdslimport { dsl, resolveClasses, extractDataClass, dslSchema } from "@booga/vdsl";
// Wrap any React component
const DslBox = dsl(Box);
<DslBox p={2} m={4} display="flex" align="center" />
// → className="flex items-center m-4 p-2" data-class="flex items-center m-4 p-2"
// Pure class resolution (no React)
resolveClasses({ p: 2, m: 4 }); // ["m-4", "p-2"]
// SSG attribute extraction
extractDataClass({ p: 2 }); // { "data-class": "p-2" }
// Runtime validation
dslSchema.parse({ p: 5 }); // throws - 5 not in SpaceToken union0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24 | 32
Props: p m pt pr pb pl px py mt mr mb ml mx my gap
bg fg muted accent destructive success warning (from vTheme color scale, resolved as CSS variables)
default primary secondary destructive ghost outline link
sm md lg icon
block flex grid inline inline-flex inline-grid hidden
align: start center end stretch baseline
justify: start center end between around evenly
typeface: sans serif mono (resolves to font-sans, font-serif, font-mono; aligns with vTheme 0.3.0's --v-font-* token surface)
tone: ok warn bad info meta (resolves to a paired bg-tone-<t>-bg + text-tone-<t>-fg class set; aligns with vTheme 0.3.0's 15-slot tone palette)
tracking: tight normal wide (resolves to tracking-tight, tracking-normal, tracking-wide; aligns with vTheme 0.3.0's --v-tracking-* tokens)
semanticKind: kicker eyebrow lead brand-mark engagement-tag (the proposal-html section-vocabulary roles). This is a SEMANTIC prop, not a styling prop: it emits a data-semantic-kind="<value>" attribute in parallel with a vkind-<value> className. Concrete geometry is supplied by a downstream styling layer (vUi primitives, vBlocks section renderers, brand-emitted stylesheets).
MIT © 2026 bvasilenko
For code of conduct, see https://www.contributor-covenant.org/version/2/1/code_of_conduct/