Amity Diana Design System for web

What is it?

This package contains a set of "ready to use" React components for our web products.

How to install it?

• From npm: npm install @amityco/diana-ds
• From yarn: yarn add @amityco/diana-ds

How to use it?

Diana Provider

import 'antd/dist/antd.css'; // dont forget this part!

import React from 'react';
import ReactDOM from 'react-dom';

import { DianaProvider } from '@amityco/diana-ds';

import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <DianaProvider>
      <App />
    </DianaProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Customisation

Theming

The theme interface is available when importing import { Theme } from '@amityco/diana-ds'. You can pass any partial theme object matching this interface to the Ui-Kit provider to customise the look and feel of our components:

const theme = {
  palette: {
    primary: "#ff0000",
  },
}

// ...

<DianaProvider theme={theme}>{...}</DianaProvider>

Internationalisation

We support english out of the box, but you can also add your own language (as for now we only support LTR languages).

const languages = {
  th: {
    i18nkey: 'hello world',
  },
}

// ...

<DianaProvider languages={languages} locale="th">{...}</DianaProvider>