Components & structure

A component in Milda is a tree of neutral nodes with a typed contract and a published anatomy. None of it is web-specific — the same model realizes into React, Figma, or anything else.

#Nodes and structure

A component's structure is a tree of nodes. Each node has a kind describing what it is — not which HTML tag it becomes. Kinds include containers, text, icons, controls, table parts (table/row/cell), and escape hatches (foreign, fragment) for the rare cases the visual vocabulary can't express.

#Anatomy and parts

Nodes are organized into a component's anatomy — named parts with a semantic role (container, item, text, control, input, icon, content). A select's anatomy might name a trigger, a surface, and an option. Each part carries layout intent, style facets, and state-keyed overrides.

#The contract

Every component declares a contract: its props and events. Props are typed, can be required or optional with defaults, and a prop can be tied to a context group — so a variant prop selects styling, or a prop drives responsive values. The contract is the stable, public surface consumers code against; it's also what powers safe versioning. See Behaviors for events.

#Archetypes

You rarely start from a blank node tree. An archetype is a built-in pattern — Button, Dialog, Single-select, Tabs, Table, and dozens more — that comes with an invariant contract, a published anatomy, and composed behavior. Archetypes give every component a correct, consistent baseline that you then style and extend.

#Slots

Slots are named insertion points with an arity (single, optional, or many) and a content contract. They are the composition API: how a consumer drops their own content or nests another component inside yours.