React

Before React 19, React does not handle web components as well as other frameworks (full support arrived in React 19), so every component ships its own React wrapper. The wrapper adds the necessary event and property bindings, so you use it like a normal React component.

Using React 19? You can use the raw <dap-ds-…> tags directly — see the React 19 guide. The wrappers below work on every React version.

Installation

npm install dap-design-system

Importing wrappers

Import each wrapper by its own subpath so your bundler only includes the components you use. The wrapper is the default export, and it registers the underlying element for you. Events follow React's convention — prefixed with on and camelCased, so dds-close becomes onDdsClose.

import DapDSButtonReact from 'dap-design-system/react/dap-ds-button'

function App() {
  return (
    <DapDSButtonReact onClick={() => console.log('Hi!')}>
      Click me!
    </DapDSButtonReact>
  )
}

export default App

Prefer the barrel? It still works, but pulls every wrapper into your bundle:

import { DapDSButtonReact } from 'dap-design-system/react'

Finally, import a theme stylesheet once in your root:

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