drip-design-library-vue

@dripcapital/drip-design-library-vue

DCDS — the Drip Capital Design System, packaged as a standalone Vue 3 component library. 46 components plus the design-token stylesheet, extracted from the LOS customer portal so it can be versioned once and consumed by any project.

Published to GitHub Packages under the @dripcapital scope.

Requirements

• Vue ^3.4.0 (peer dependency — supplied by the consuming app)
• Node >=22

pdf-lib ships as a runtime dependency. It is only pulled into a bundle if you import one of the DcdsUpload* components, which use it to detect password-protected PDFs client-side.

Install

GitHub Packages requires authentication even for reads. Add an .npmrc in the consuming project:

@dripcapital:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

GITHUB_TOKEN needs the read:packages scope. Then:

npm install @dripcapital/drip-design-library-vue

In CI, $ works without extra setup.

Usage

Two stylesheets are required, imported once at your app root. tokens.css must come first — every component reads its CSS custom properties at runtime, so without it components render unstyled.

// main.js
import '@dripcapital/drip-design-library-vue/theme/tokens.css'  // design tokens (required)
import '@dripcapital/drip-design-library-vue/style.css'         // component styles (required)

Then import components either from the barrel:

import { DcdsButton, DcdsModal } from '@dripcapital/drip-design-library-vue'

…or via a per-component subpath, which lets a bundler drop everything else:

import DcdsButton from '@dripcapital/drip-design-library-vue/components/DcdsButton'

<template>
  <DcdsButton label="Continue" variant="Primary" size="M" @click="submit" />
</template>

Components

DcdsAccordion, DcdsAlert, DcdsAvatar, DcdsAvatarGroup, DcdsBadge, DcdsBaseCell, DcdsBaseEditableCell, DcdsBaseNav, DcdsBox, DcdsBreadcrumbs, DcdsButton, DcdsButtonGroup, DcdsCheckbox, DcdsChip, DcdsChipGroup, DcdsDatepicker, DcdsDeterminateLoader, DcdsDrawer, DcdsDropdownButton, DcdsDropdownMenu, DcdsFlex, DcdsGrid, DcdsIndeterminateLoader, DcdsInputFields, DcdsLinkButton, DcdsModal, DcdsNavElement, DcdsPagination, DcdsRadioButton, DcdsScrollBar, DcdsSideBar, DcdsSpacer, DcdsStepper, DcdsSwitch, DcdsTable, DcdsTableActionBar, DcdsTableColumn, DcdsTableFooter, DcdsTabs, DcdsTag, DcdsTooltip, DcdsTopBar, DcdsTypography, DcdsUploadCTA, DcdsUploadDocument, DcdsUploadDragDrop

Design tokens

tokens.css defines two tiers: primitive palette values (--dcds-*-N, internal reference only) and semantic tokens (--color-*, --gap-*, --rd-*) intended for product code. Use the semantic tier — the primitives are free to change.

.my-panel {
  color: var(--color-text-primary);
  background: var(--color-bg-neutral);
}

The file also @imports Nunito Sans from Google Fonts. If your CSP blocks remote font hosts, self-host the family and strip that line downstream.

Development

npm install
npm run build

Output lands in dist/: index.js (barrel), components/Dcds*.js (one entry per component), style.css, and theme/tokens.css. vue and pdf-lib are left external and resolved by the consumer.

Releasing

Publishing is driven by version tags, matching the sibling dripcapital/drip-design-library repo. Bump version in package.json, merge to main, then tag:

git tag v0.1.0
git push origin v0.1.0

The publish workflow runs on any v* tag: it installs, builds, and pushes the package to GitHub Packages using the repo’s own GITHUB_TOKEN. It can also be triggered manually via workflow_dispatch.