Customization

This page covers customization options for Veltix.

Theme Customization

Veltix supports both light and dark themes with customizable color palettes.

Color Palette


// Custom color palette
const customTheme = {
  colors: {
    primary: {
      50: '#eff6ff',
      500: '#3b82f6',
      900: '#1e3a8a'
    },
    background: {
      primary: '#ffffff',
      secondary: '#f8fafc'
    }
  }
}

Component Styling


// Custom component styles
const componentStyles = {
  borderRadius: '8px',
  spacing: '16px',
  shadows: {
    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    md: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
  }
}

Layout Customization

Dashboard Layout


// Custom layout configuration
const layoutConfig = {
  grid: {
    columns: 12,
    gap: 16
  },
  responsive: {
    breakpoints: {
      mobile: 768,
      tablet: 1024,
      desktop: 1440
    }
  }
}

Next Steps

For API reference, see the API Reference documentation.