DÁP Szolgáltatások

The import paths have changed from v0.43.0. You no longer need to use the dist folder in your import paths. Check the overview section for the new import paths. Use the subpath imports like dap-design-system/components and dap-design-system/icons instead of paths that include /dist/. For the styles, you have to use the subpath imports like dap-design-system/styles/light.theme.css and dap-design-system/styles/components.native.css instead of paths that include /dist/.

Importing Components

The DÁP Design System supports multiple import strategies to optimize your bundle size. This guide explains the different import patterns available and how to choose the right one for your project.

Overview

The library provides separate entry points for components and icons, allowing you to import only what you need:

dap-design-system - Full bundle with everything (~9KB re-export layer)
dap-design-system/components - All components without icons (~1MB)
dap-design-system/icons - All icons without components (~130KB)
dap-design-system/react - React wrapper components (~38KB)

Quick Start

Tree-Shakeable Imports (Recommended)

Import only the components you need to minimize bundle size:

// Import components (excludes icons - saves ~130KB)
import { DapDSButton, DapDSInput } from 'dap-design-system/components'

// Import icons separately when needed (excludes components - saves ~1MB)
import { SystemAddLine, ArrowsArrowDownLine } from 'dap-design-system/icons'

Full Bundle Import

Import everything from the main entry (backward compatible):

// Imports all components and icons
import { DapDSButton, SystemAddLine } from 'dap-design-system'

Import Patterns

Components Only

Use this when you need components but don't need icon components (you might use custom icons or no icons at all):

import {
  DapDSButton,
  DapDSInput,
  DapDSCard,
  DapDSModal,
  DapDSTable,
} from 'dap-design-system/components'

Benefits:

Excludes icon component library (~130KB saved)
Includes the DapDSIcon utility component for custom icons
Best for applications with minimal icon usage

Icons Only

Use this when you only need icon components:

import {
  SystemAddLine,
  SystemCloseLine,
  ArrowsArrowDownLine,
  UserUserLine,
} from 'dap-design-system/icons'

Benefits:

Excludes all UI components (~1MB saved)
Perfect for icon libraries or utilities
Each icon is a standalone web component

Combined Usage

Import from both entry points when you need both components and icons:

// Import UI components
import {
  DapDSButton,
  DapDSModal,
  DapDSCard,
} from 'dap-design-system/components'

// Import icon components
import { SystemAddLine, SystemCloseLine } from 'dap-design-system/icons'

React Wrappers

For React applications, use the React wrapper entry point:

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

React wrappers provide proper TypeScript types and event handling for React applications.

Bundle Size Comparison

Import Pattern	Bundle Size	What's Included	Best For
`/components`	~1MB	All components (no icons)	Apps using custom icons
`/icons`	~130KB	All icons (no components)	Icon libraries/utilities
Main entry	~9KB	Re-exports (references above)	Backward compatibility
`/react`	~38KB	React wrappers	React applications

Example Savings

If you only need DapDSButton and DapDSInput:

Full bundle: ~1.1MB (all components + all icons)
Optimized: ~50KB (just those 2 components after tree-shaking)
Savings: 95%+ reduction in bundle size!

:::tip Modern bundlers (Webpack 5, Vite, Rollup) will automatically tree-shake unused exports from the /components and /icons entry points, further reducing your final bundle size. :::

Framework Integration

Vanilla JavaScript

<!doctype html>
<html>
  <head>
    <script type="module">
      // Import components you need
      import { DapDSButton, DapDSInput } from 'dap-design-system/components'
      import { SystemAddLine } from 'dap-design-system/icons'
    </script>
    <link
      rel="stylesheet"
      href="node_modules/dap-design-system/dist/light.theme.css" />
  </head>
  <body>
    <dap-ds-button variant="primary">Click Me</dap-ds-button>
    <dap-ds-icon-add-line></dap-ds-icon-add-line>
  </body>
</html>

React

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

function App() {
  return (
    <div>
      <DapDSButton variant="primary">Click Me</DapDSButton>
      <DapDSInput label="Name" placeholder="Enter your name" />
    </div>
  )
}

Vue

&lt;template&gt;
  &lt;div&gt;
    &lt;dap-ds-button variant=&quot;primary&quot;&gt;Click Me&lt;/dap-ds-button&gt;
    &lt;dap-ds-input label=&quot;Name&quot; placeholder=&quot;Enter your name&quot;&gt;&lt;/dap-ds-input&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { DapDSButton, DapDSInput } from &#39;dap-design-system/components&#39;
&lt;/script&gt;

Angular

// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import 'dap-design-system/components'

@Component({
  selector: 'app-root',
  template: `
    <dap-ds-button variant="primary">Click Me</dap-ds-button>
    <dap-ds-input label="Name" placeholder="Enter your name"></dap-ds-input>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {}

CDN Usage

You can also import the library from a CDN:

Components Only

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/dap-design-system/dist/components.js"></script>

Icons Only

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/dap-design-system/dist/icons.js"></script>

Full Bundle

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/dap-design-system/dist/dds.js"></script>

With Styles

Always include the theme CSS:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/light.theme.css" />

Migration Guide

From Full Bundle to Tree-Shakeable Imports

Before:

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

After:

import { DapDSButton, DapDSInput } from 'dap-design-system/components'
import { SystemAddLine } from 'dap-design-system/icons'

Migration Steps

Identify your imports - Check which components and icons you're using
Separate by type - Split component and icon imports
Update import statements - Use the new subpath imports
Test your build - Verify everything still works
Check bundle size - Compare before and after bundle sizes

:::info Migration is Optional The old import style still works perfectly. Migrate when you want to optimize bundle sizes. Both patterns are supported indefinitely. :::

Best Practices

✅ Do: Use Subpath Imports

// Good - optimal bundle size
import { DapDSButton } from 'dap-design-system/components'
import { SystemAddLine } from 'dap-design-system/icons'

❌ Don't: Mix Components and Icons from Main Entry

// Avoid - loads everything
import { DapDSButton, SystemAddLine } from 'dap-design-system'

✅ Do: Import Only What You Need

// Good - specific imports
import { DapDSButton, DapDSInput } from 'dap-design-system/components'

❌ Don't: Import Entire Modules

// Avoid - loads all components
import * as DDS from 'dap-design-system/components'

TypeScript Support

All entry points include full TypeScript definitions:

import type { IconSize } from 'dap-design-system/components'
import type { DapDSButton } from 'dap-design-system/react'

// Type declarations are automatically available
const size: IconSize = 'lg'

Build Tool Configuration

Vite

No configuration needed! Vite automatically recognizes the exports field in package.json.

// vite.config.js - no special config required
export default {
  // Your existing config
}

Webpack 5

Webpack 5 supports subpath exports out of the box:

// webpack.config.js - no special config required
module.exports = {
  // Your existing config
}

Rollup

Works automatically with @rollup/plugin-node-resolve:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'

export default {
  plugins: [resolve()],
}

Troubleshooting

Import Not Found Error

If you see errors like Cannot find module 'dap-design-system/components':

Update package.json - Ensure you're using the latest version
Clear node_modules - Delete and reinstall: rm -rf node_modules && npm install
Check Node version - Requires Node.js >= 20.0.0
Verify bundler support - Ensure your bundler supports package.json exports field

Bundle Size Not Decreasing

If your bundle size isn't improving:

Check tree-shaking - Ensure your bundler has tree-shaking enabled
Use production build - Development builds don't tree-shake
Analyze bundle - Use bundle analyzer to verify what's included
Verify imports - Make sure you're using subpath imports (/components, /icons)

TypeScript Errors

If TypeScript can't find types:

Check tsconfig.json - Ensure moduleResolution is set to "node" or "bundler"
Restart TS server - Reload your IDE/editor
Clear cache - Delete .tsbuildinfo and restart

Need Help?

If you're experiencing issues with imports or bundle sizes, open an issue on the GitHub repository with details about your setup and the error you're encountering.

// Import components (excludes icons - saves ~130KB) import { DapDSButton, DapDSInput } from 'dap-design-system/components' // Import icons separately when needed (excludes components - saves ~1MB) import { SystemAddLine, ArrowsArrowDownLine } from 'dap-design-system/icons'

// Import UI components import { DapDSButton, DapDSModal, DapDSCard, } from 'dap-design-system/components' // Import icon components import { SystemAddLine, SystemCloseLine } from 'dap-design-system/icons'

Import Pattern

Bundle Size

What's Included

Best For

/components

~1MB

All components (no icons)

Apps using custom icons

/icons

~130KB

All icons (no components)

Icon libraries/utilities

Main entry

~9KB

Re-exports (references above)

Backward compatibility

/react

~38KB

React wrappers

React applications

<!doctype html> <html> <head> <script type="module"> // Import components you need import { DapDSButton, DapDSInput } from 'dap-design-system/components' import { SystemAddLine } from 'dap-design-system/icons' </script> <link rel="stylesheet" href="node_modules/dap-design-system/dist/light.theme.css" /> </head> <body> <dap-ds-button variant="primary">Click Me</dap-ds-button> <dap-ds-icon-add-line></dap-ds-icon-add-line> </body> </html>

import React from 'react' import { DapDSButton, DapDSInput } from 'dap-design-system/react' function App() { return ( <div> <DapDSButton variant="primary">Click Me</DapDSButton> <DapDSInput label="Name" placeholder="Enter your name" /> </div> ) }

<template> <div> <dap-ds-button variant="primary">Click Me</dap-ds-button> <dap-ds-input label="Name" placeholder="Enter your name"></dap-ds-input> </div> </template> <script setup> import { DapDSButton, DapDSInput } from 'dap-design-system/components' </script>

// app.component.ts import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' import 'dap-design-system/components' @Component({ selector: 'app-root', template: ` <dap-ds-button variant="primary">Click Me</dap-ds-button> <dap-ds-input label="Name" placeholder="Enter your name"></dap-ds-input> `, schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppComponent {}