Components

Vara includes a deliberately small set of components for documentation content and landing pages. They cover the common foundations without preventing your project from adding its own.

How to use components

Use components as custom HTML tags in your Markdown. Vara's generators render Markdown first and then resolve component tags, so components can appear anywhere in a page:

<vara-alert
  title="Heads up"
  description="Something worth knowing."
  color="info"
/>

Paired components receive their already-rendered inner content:

<vara-container size="sm">
  Any Markdown or component output can live here.
</vara-container>

Props

Component attributes are strings:

• Quote every value.
• Booleans use "true" and "false".
• Repeated records use predictable families such as item_1_title, item_2_title, and so on.

Every component accepts a class prop for targeted styling with your own utilities.

Available components

Content foundations

Small components for use inside documentation and rich text:

• Alert - contextual callouts.
• Badge - compact labels and statuses.
• Button - links and native buttons.
• Container - constrained content layout.
• Icon - bundled Lucide and Simple Icons.
• Keyboard key - keyboard shortcuts and key names.

Landing-page sections

Larger sections for composing landing pages:

• Header - responsive site navigation.
• Hero - centered or split page introduction.
• Content split - explanatory copy with supporting media.
• Features - reusable feature cards.
• Stats - semantic metrics in cards or a strip.
• FAQ - single-open accordion with composable items.
• Testimonial - a focused customer quote.
• Carousel - a generic slider for any collection of slides.
• Call to action - centered or inline conversion panel.
• Footer - site metadata and secondary navigation.

These components intentionally omit product-specific recipes such as pricing, forms, and team grids. Add those in your own components/ directory when your content model is known.

Customization

Components use Vara's design tokens, so they inherit the site's colors and dark mode automatically. Internal links and assets are resolved with Veta's deployment-aware url() helper, which keeps them portable across root domains and deployment subdirectories.