GET STARTED FEATURE
Render your first component
Drop a primitive() or component() call into any template and it renders on the server, styled by the active skin's tokens. No CSS to write, no client mount.
Render your first component
Your first Semitexa UI is one helper call in a Twig template. No component import, no CSS file, no client mount — the server renders it and the active skin styles it.
{{ primitive('button', { text: 'Primary', tone: 'brand' }) }}{{ primitive('badge', { text: 'Stable', tone: 'success' }) }}{{ component('platform.field', { label: 'Email', name: 'email', placeholder: 'you@example.com',}) }}What happens
primitive() renders an atomic element (button, input, badge…); component() renders a composed one (field, form). The registry resolves it by name or alias and emits markup carrying only ui-* / sx-* attributes — no colour, radius or spacing literal. The skin tokens paint it.
The button, badges and field above are exactly that: rendered from the helpers, styled by the moss skin, with no per-component CSS.
The shortest path to a styled, accessible control is a function call the server resolves and the skin paints. You add UI by writing intent, not markup plus a CSS file plus a client mount. Next: theme the whole site.
How it works
Call primitive('button', {…}) for an atomic element or component('platform.field', {…}) for a composed one. The registry resolves it by canonical name or alias, renders markup carrying only ui-* / sx-* attributes, and the skin tokens paint it. The button and field above are exactly that — rendered from the helpers, styled by the moss skin, with no per-component CSS.
Why it matters
The shortest path to a styled, accessible control is a function call the server resolves and the skin paints. You add UI by writing intent, not markup plus a CSS file plus a client mount.