Components
Reusable, scoped, composable. Define once in components.nml — use anywhere.
@define
Define a component in components.nml. The component name must be PascalCase. Use @ComponentName to invoke it.
// components.nml
@slot
The default slot injects all child content at the @slot position.
@define.Layout
Named Slots
Use @slot.name inside the component definition, and @slot.name inside the invocation to target a specific slot. Named slots can have fallback content.
@define.Card
Props
Pass values directly on the component invocation using dot notation. Reference them inside the component with prop.*.
@define.Button
Scoped Styles
Use @style: inside a @define block to scope CSS to that component. A stable nml-c-xxxxxx attribute is auto-injected to the root element. Styles are only emitted when the component is actually used.
@define.Card
The scope ID is deterministic — a hash of the component name + style content — so it is stable across builds.