Components

Reusable, composable, scoped.

Defining a component

Components are uppercase identifiers with props and optional scoped styles:

component Card { props title description style { bg white, radius 12px, padding 2rem } h3 .title p .description }

Using components

Pass props as attributes. Uppercase names are auto-detected as component calls:

Card title="NyxCode" description="AI-native language."

External files

Import components from other .nyx files with the use keyword:

use "./components/card.nyx" page / { Card title="Hello" description="World" }

Slots

Components can accept children via the slot keyword:

component Layout { props unused nav { link "Home" href="/" } main { slot } footer { p "Footer" } } Layout unused="" { h1 "Page content goes here" }

Scoped styles

Each component instance gets a unique class (nyx-c-N). Styles never leak between components. Identical style blocks are deduplicated.

Props use .propName syntax inside components. The dot prefix is required.

← Styling Reactivity →