Dyvix UI

Appearance

Input overrides ​

Input style overrides represent a set of typed CSS Variables that allow easier control for the developer rather than using normal styling.

Usage ​

tsx
<DyvixInput
  placeholder="Enter your username"
  overrides={{
    '--dyvix-input-bg': '#0f172a',
    '--dyvix-input-color': '#f8fafc',
    '--dyvix-input-border-color': '#334155',
    '--dyvix-input-border-radius': '6px',
    '--dyvix-input-focus-border-color': '#3b82f6',
    '--dyvix-input-focus-box-shadow': '0 0 0 2px rgba(59, 130, 246, 0.2)',
    '--dyvix-input-placeholder-color': '#64748b',
    '--dyvix-input-width': '100%'
  }}
/>

Available Overrides ​

  • --dyvix-input-padding: 8px 16px || 10px 22px || 12px 24px || string
  • --dyvix-input-transition: string || none
  • --dyvix-input-hover-transform: none || translateY(-1px) || translateY(-2px) || scale(1.02) || string
  • --dyvix-input-focus-transform: none || translateY(1px) || translateY(2px) || scale(0.98) || string
  • --dyvix-input-color: color
  • --dyvix-input-font-size: 0.875rem || 0.9rem || 1rem || 1.125rem || string
  • --dyvix-input-font-weight: 400 || 500 || 600 || 700 || normal || bold || string
  • --dyvix-input-font-family: Geist || system-ui || monospace || string
  • --dyvix-input-border-radius: 0px || 4px || 6px || 8px || 9999px || string
  • --dyvix-input-border-width: 0px || 1px || 2px || string
  • --dyvix-input-border-style: solid || dashed || dotted || double || string || none
  • --dyvix-input-border-color: color || transparent
  • --dyvix-input-bg: color || transparent || string
  • --dyvix-input-box-shadow: none || inset 0 1px 0 0 rgba(255, 255, 255, 0.05) || string
  • --dyvix-input-letter-spacing: -0.02em || -0.01em || 0em || string
  • --dyvix-input-hover-bg: color || transparent || string
  • --dyvix-input-hover-border-color: color || transparent
  • --dyvix-input-hover-border-width: 0px || 1px || 2px || string
  • --dyvix-input-hover-border-style: solid || dashed || dotted || double || string || none
  • --dyvix-input-hover-color: color
  • --dyvix-input-hover-box-shadow: none || 0 4px 12px rgba(0, 0, 0, 0.5) || string
  • --dyvix-input-hover-border-radius: 0px || 4px || 6px || 8px || 9999px || string
  • --dyvix-input-focus-bg: color || transparent || string
  • --dyvix-input-focus-border-color: color || transparent
  • --dyvix-input-focus-border-width: 0px || 1px || 2px || string
  • --dyvix-input-focus-border-style: solid || dashed || dotted || double || string || none
  • --dyvix-input-focus-color: color
  • --dyvix-input-focus-box-shadow: none || 0 0 10px rgba(255, 255, 255, 0.3) || string
  • --dyvix-input-focus-border-radius: 0px || 4px || 6px || 8px || 9999px || string
  • --dyvix-input-disabled-bg: color || transparent || string
  • --dyvix-input-disabled-border-color: color || transparent
  • --dyvix-input-disabled-color: color
  • --dyvix-input-disabled-box-shadow: none || string
  • --dyvix-input-placeholder-color: color
  • --dyvix-input-placeholder-font-size: string
  • --dyvix-input-disabled-placeholder-color: color
  • --dyvix-input-width: fit-content || 100% || auto || string
  • --dyvix-input-height: fit-content || 100% || auto || string
  • --dyvix-input-display: inline-block || block || inline-flex || flex || inline || grid || inline-grid || contents || flow-root || list-item || table || inline-table || table-row || table-cell || none || string
  • --dyvix-input-position: relative || absolute || fixed || sticky || static || string