Importing Components

The DÁP Design System lets you register only the components you use, so your bundle stays small. This guide explains the import strategies and when to use each.

How registration works

Each component ships as two pieces:

• a registration entry (dap-design-system/components/<name>) — importing it defines the <dap-ds-…> custom element (and any components it renders internally), using a guarded define() that never throws on a duplicate.
• a class (default export of the same subpath) — for when you need a reference to the element class itself.

Because registration lives in the entry (not the class), your bundler includes only the components you actually import.

Quick start Per-component import (recommended)

Import each component by its own subpath. This registers the element and tree-shakes everything you don't use:

import 'dap-design-system/components/button'
import 'dap-design-system/components/input'

<dap-ds-button variant="primary">Click me</dap-ds-button>
<dap-ds-input label="Name"></dap-ds-input>

You don't need to import the icons a component renders — a component auto-registers its own internal dependencies (for example, dap-ds-button brings its loading spinner).

Register everything

Import the main entry to register the whole library at once. Convenient for prototyping, but it pulls every component into your bundle:

import 'dap-design-system'

Use per-component imports for application code you ship to users. Use the full import for quick prototypes or when you genuinely use most of the library.

Import patterns Registering vs. referencing the class

A bare import registers the element:

import 'dap-design-system/components/modal' // defines <dap-ds-modal>

The same subpath default-exports the class, which also registers it on import — useful when you need the constructor (manual registration, extension, typing):

import DapDSModal from 'dap-design-system/components/modal'

Grouped sub-components

Sub-components are imported by their own tag name (without the dap-ds- prefix):

import 'dap-design-system/components/navigation-menu'
import 'dap-design-system/components/navigation-menu-item'
import 'dap-design-system/components/table'
import 'dap-design-system/components/table-row'

Icons

Most apps never import icons directly — components register the icons they use. When you need a standalone icon, import the icons entry (registers all icons):

import 'dap-design-system/icons'

<dap-ds-icon-add-line></dap-ds-icon-add-line>

React wrappers

For React, use the React entry, which provides typed wrappers and event handling:

import { DapDSButton, DapDSInput } from 'dap-design-system/react'

function App() {
  return (
    <DapDSButton variant="primary">Click me</DapDSButton>
  )
}

Styles

Registering a component does not load a theme. Import one theme stylesheet once, at your app entry:

import 'dap-design-system/styles/light.theme.css'

Available themes: light, dark, high-contrast, teal, cold-grey, azure, violet. An optional reset is available at dap-design-system/styles/dds-reset.css.

Framework integration Angular

// main.ts — register the components this app uses
import 'dap-design-system/components/button'
import 'dap-design-system/components/input'

// use CUSTOM_ELEMENTS_SCHEMA in components that render dap-ds-* tags
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `<dap-ds-button variant="primary">Click me</dap-ds-button>`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {}

Vue

// main.js
import 'dap-design-system/components/button'
import 'dap-design-system/components/input'

<template>
  <dap-ds-button variant="primary">Click me</dap-ds-button>
</template>

Svelte / Astro / Vanilla

import 'dap-design-system/components/button'

<dap-ds-button variant="primary">Click me</dap-ds-button>

Migration From the barrel to per-component imports

The dap-design-system/components barrel and the full dap-design-system entry both register every component, so they cannot be tree-shaken. Switch to per-component imports to only ship what you use:

Before

import { DapDSButton } from 'dap-design-system/components' // registers everything

After

import 'dap-design-system/components/button' // registers only the button

Then remove any manual customElements.define(...) calls — the entry registers the element for you.

Troubleshooting

Cannot find module 'dap-design-system/components/<name>' — the subpath is the component's tag without the dap-ds- prefix (e.g. dap-ds-file-input → dap-design-system/components/file-input). Ensure moduleResolution is "bundler" or "node16"/"nodenext" and that you're on a version that ships per-component exports.

An element renders but stays unstyled/unupgraded — make sure the component is registered (a bare import 'dap-design-system/components/<name>') and that a theme stylesheet is loaded.

Bundle isn't shrinking — verify you're using per-component imports (not the /components barrel or the full entry) and a production build.