Documentation
Custom components
When the built-in set runs out, build your own in Component Studio. A custom component becomes a tag available in every guide and endpoint description in the project.
Building one
- Define props
Each prop has a name and a default value. The default is used whenever an author omits the prop.
- Compose the layout
Build it visually, or write the template directly. Templates are MDX, so they can nest built-in and other custom components.
- Style it
Scoped CSS, applied under the component's own class so it can't leak into the rest of the page.
Props and children
Props are substituted into the template with {{propName}}. Children go where you put {{children}}.
<div class="pricing-tier">
<h3>{{name}}</h3>
<p class="price">{{price}}</p>
{{children}}
</div>An author then writes:
<PricingTier name="Growth" price="$99/mo">
Everything in Starter, plus versioning.
</PricingTier>The renderer parses component tags as HTML, which lowercases attribute names. A prop declared ctaHref arrives as ctahref. Octri resolves declared props case-insensitively, so ctaHref in your template still matches, but it's worth knowing when something doesn't bind.
Naming
Names that collide with a built-in tag are rejected. If you want a different Callout, build NoticeBox, not Callout.
Custom component names are PascalCase and unique per project.
Scoped CSS
Your CSS is scoped to the component's own wrapper class, so a selector like .price { color: red } only applies inside that component. The stylesheet is emitted once per page, and only when the component is actually used.
Where they work
A custom component renders anywhere the built-ins do: the public docs, the studio editor, and the live preview. Nesting works, and there's a depth limit to stop a template that references itself from taking the page down.
A custom component is code you maintain. <Card> with an icon covers most of what people build custom components for, and it already handles dark mode, mobile, and hover states.