React bindings for the Dubai Design System web components.

Setup

1. Install the package

npm i @dubai-design-system/components-react

2. Add the icon fonts

DDA components use Material Icons and Material Symbols. Add both inside the <head> tag of your index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">

3. Use the components

No extra registration step is needed — importing a component automatically registers its custom element:

import React from 'react';
import { DdaButton } from '@dubai-design-system/components-react';

const App = () => (
  <div>
    <DdaButton
      button_color="default-primary"
      start_icon="sentiment_satisfied"
      end_icon="arrow_forward"
      button_id="button"
      aria_label="button"
      onClick={() => console.log('clicked')}
    >
      Button
    </DdaButton>
  </div>
);

export default App;

Upgrading

Upgrading from an earlier version? Install the same version of this package and @dubai-design-system/components-js, then read node_modules/@dubai-design-system/components-js/MIGRATION.md. It lists what to change when you come from 5.0.x, 4.1.0 or 3.x.

License

Copyright (c) 2018-2026 Digital Dubai. All rights reserved. An open-source license is under review and will be announced in a future release.