cadmv-ui: CA DMV User Interface Component Library

Component library and supporting frontend utils for CA DMV projects by Digital Bazaar.

Storybook Docs

# Import dependencies using Node 22+
npm i

# Load & serve Storybook
# You can visit at http://localhost:6006/
npm run storybook

UI Details

Frontend

cadmv-ui is built on Quasar Framework and provides reusable UI components designed to plug directly into Quasar-based Vue apps.

Colors

The color palette is defined in src/theme/colors.js and follows the CA DMV color style guide.

Color names use these prefixes:

• c means the color comes from the CA DMV style guide, such as cBlueDark2.
• u means the color is user-defined and is not part of the CA DMV style guide, such as uBtnOutline.

Import the colors object to use palette values in JavaScript:

import {colors} from '@digitalbazaar/cadmv-ui';

const headingColor = colors.cBlueDark2;
const outlineColor = colors.uBtnOutline;

Calling applyTheme() registers the colors as Quasar CSS variables. The camel-cased color names become kebab-cased and are prefixed with --q-:

import {applyTheme} from '@digitalbazaar/cadmv-ui';

applyTheme();

.example {
  color: var(--q-c-blue-dark-2);
  border-color: var(--q-u-btn-outline);
}

Icons

We use Font Awesome Free (v7) icons via the official package: @fortawesome/fontawesome-free

Icons are consumed through Quasar’s built-in <q-icon> component using Font Awesome class names.

Setup

Font Awesome Free is automatically installed in consuming apps after installing this project:

npm install @digitalbazaar/cadmv-ui

Usage

Then, use icons by specifying their name according to the Font Awesome Docs.

<template>
  <q-icon name="fa-solid fa-user" size="24px" />
</template>