Diana
Design System for web
Amity 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>