Components

Components are reusable CurveaScript templates stored under:

src/components

[!NOTE]

Component declarations always include parentheses, even when the component has no props.

@component Hero(title)

@component Divider()

Import and use

The Engine requires a component import in each file that uses the component:

@page
@import Hero

<Hero title="Welcome" />

The Curvea VS Code extension can insert this @import automatically when accepting component completion, but the resulting source uses the same explicit Engine syntax.

Slot content

A component can render nested content through {{ slot }}:

@component Hero(title)

<section class="hero">
  <h1>{{ title }}</h1>
  {{ slot }}
</section>

@page
@import Hero

<Hero title="Welcome">
  <p>This content becomes the slot.</p>
</Hero>

Props

Props are passed as attributes:

<Card title="Simple Card" />

Quoted literal values stay strings. An exact interpolation expression inside a quoted value is resolved:

<Card title="{{ page.title }}" />

A bare simple path is also resolved:

<Card title=page.title />

Folder imports

Import every .csc component directly inside a component folder with:

@import sections/*

Wildcard imports register each component by file name.

Names and conflicts

The tag name must match the component declaration. For example, using <Hero> expects the imported component file to declare @component Hero(...).

If imports resolve two different component paths to the same component name, Curvea throws a duplicate-import error.