Vela Design System

Quick Start

Add one script tag and start using vi-* components immediately.

<script type="module"
  src="https://ds.cdn.velaintelligence.com/vela-ds.js">
</script>

<vi-button variant="primary">
  Run Analysis
</vi-button>

Documentation

Full interactive docs with live examples, theming controls, and a component playground.

Icon Configuration

Components ship with dependency-free fallback icons. Switch to Font Awesome or another set globally:

<script>
  window.VelaDS.configureIcons({
    defaultSystem: 'font-awesome',
    defaultFaStyle: 'solid',
    roles: {
      clear:  { name: 'circle-xmark' },
      filter: { name: 'magnifying-glass' }
    }
  });
</script>

Theming

Apply a built-in theme or create your own. Themes are loaded as CSS custom-property sets.

<vi-theme-provider
  theme="client-atlas-capital"
  mode="dark">
  <!-- themed content -->
</vi-theme-provider>