Robuust Vue Components

Appearance

Getting started ​

Installation ​

Prerequisites ​

Install the package 📦 ​

bash
npm install @robuust-digital/vue-components
bash
yarn add @robuust-digital/vue-components

Import the CSS 🎨 ​

Import our base CSS file in your main entry file:

javascript
import '@robuust-digital/vue-components/core/css';

Customize Components with CSS variables ⚡ ​

css
:root {
  /* Accordion */
  --rvc-accordion-border-width: var(--rvc-base-border-width);
  --rvc-accordion-border-style: var(--rvc-base-border-style);
  --rvc-accordion-gap-y: calc(var(--spacing) * 4);
  --rvc-accordion-summary-padding-x: calc(var(--spacing) * 5);
  --rvc-accordion-summary-border-width: var(--rvc-base-border-width);
  --rvc-accordion-summary-border-color: var(--color-slate-200);
  --rvc-accordion-summary-border-radius: var(--radius-xl);
  --rvc-accordion-summary-bg-color: var(--color-white);
  --rvc-accordion-summary-bg-color-open: var(--color-slate-50);
  --rvc-accordion-summary-border-color-open: var(--color-slate-300);
  --rvc-accordion-summary-border-bottom-width-open: var(--rvc-base-border-width);
  --rvc-accordion-icon-transform-open: rotate(45deg);

  /* Button */
  --rvc-button-bg-color: var(--color-primary-500);
  --rvc-button-color: var(--color-black);
}

Example Configuration

With this configuration, you can create a custom theme for all components. For example, you can use the accordion variables to add card-style spacing, borders, and open-state styling.