UCalgary Design System — All Components

This package provides all web components in the UCalgary Design System. It includes all core UI components in a single package and supports two distribution formats:

• Standard (ESM): For projects using a package manager like npm.
• Bundled: A fully self-contained version that includes all components and dependencies—ideal for projects that don't use a build system or package manager.

Installation (via npm)

Install using your preferred package manager:

npm install @ucalgary-design-system/all-components

Usage

Option 1: Import via JavaScript (Recommended)

For projects using a bundler (like Vite, Webpack, or Rollup):

import '@ucalgary-design-system/all-components';

Then use the components in your HTML:

<ucds-button>Click me</ucds-button>

💡 Our components automatically load global design tokens when first used. You don’t need to import them manually!

Option 2: Use the Bundled Build (No Build System Required)

For projects not using a package manager, you can include the bundled JavaScript and CSS directly in your HTML:

<link rel="stylesheet" href="dist/bundle/index.css" />
<script type="module" src="dist/bundle/index.js"></script>

Once included, you can use any UCalgary Design System component:

<ucds-text-input label="Your name"></ucds-text-input>

💡 Make sure the dist/bundle directory is served publicly by your server.

Option 3: Load from a CDN

If you don’t want to install the package locally, you can load the bundled files directly from jsDelivr:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ucalgary-design-system/[email protected]/bundle/index.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ucalgary-design-system/[email protected]/bundle/index.js">
</script>

Once included, you can use any UCalgary Design System component:

<ucds-dropdown label="Choose one">
  <ucds-dropdown-item value="1">Option 1</ucds-dropdown-item>
  <ucds-dropdown-item value="2">Option 2</ucds-dropdown-item>
</ucds-dropdown>

💡 You can pin to a specific version (recommended) or use @latest to always get the newest release:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ucalgary-design-system/all-components@latest/bundle/index.js"></script>

Components Included

The following components are available:

• ucds-accordion
• ucds-accordion-group
• ucds-breadcrumb
• ucds-button
• ucds-button-group
• ucds-checkbox
• ucds-chip
• ucds-chip-group
• ucds-dropdown
• ucds-fieldset
• ucds-icon
• ucds-icon-button
• ucds-link
• ucds-radio
• search-input
• ucds-text-input
• ucds-text-area