Unfortunately, React does not handles webcomponents as well as other frameworks (they are working on the full support in React 19), and all the components has its own React implementation. These wrappers are available in the dap-design-system/dist/react package. These wrappers adds the neccessary event and property bindings to the webcomponents, so you can use them as you would use a normal React component.

npm install dap-design-system

Every component has its own React wrapper, so you can import them individually. Every component will get the default event naming convention from React, prefixed with on and camelCased. For example, the ddsClose event will be onDdsClose.

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


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

export default App

And do not forget to import the CSS variables as well somewhere in your root components:

import 'dap-design-system/dist/dds/dds.css'