A React components library designed to streamline UI development by providing a set of reusable, accessible, and highly customizable components based on the DGA design system.
Built with TypeScript by "NHC development team" for type safety and scalability, this library enables you to create modern, consistent, responsive user-friendly interfaces with minimal effort.
- A set of high-quality React components based on DGA design system.
- Implements components that adhere to the DGA design principles, ensuring consistency and usability.
- TypeScript support: full TypeScript integration for enhanced type safety and improved developer experience.
- Customizability: easily themeable and customizable to fit your specific project requirements.
- Responsive design: components are designed to work seamlessly across all screen sizes and devices.
npm install nhc-dga-ui
yarn add nhc-dga-ui
import { Button, StatusTag } from 'nhc-dga-ui';
export default () => (
<>
<Button>Click me</Button>
<StatusTag color="secondary">Secondary status</StatusTag>
</>
);
By overriding the theme using ThemeProvider and setting its direction to rtl.
import {ThemeProvider, StatusTag} from "nhc-dga-ui";
export default () => (
<ThemeProvider theme={{ direction: "rtl" }}>
<StatusTag>status</StatusTag>
</ThemeProvider>
);
You can wrap any component by withRtl HOC to act as rtl;
import { withRtl } from 'nhc-dga-ui';
const MyComponent = () => (
<StatusTag>status</StatusTag>
);
export default withRtl(MyComponent)
All theme values are overridable by passing a theme object containing the override values.
e.g override the golden secondary color to the lavender color:
import { ThemeProvider, Button } from 'nhc-dga-ui';
export default () => (
<ThemeProvider
theme={{
palette: {
secondary: {
25: "#FEFCFF",
50: "#F9F5FA",
100: "#F2E9F5",
200: "#E1CCE8",
300: "#CCADD9",
400: "#A57BBA",
500: "#80519F",
600: "#6D428F",
700: "#532D75",
800: "#3D1D5E",
900: "#281047",
950: "#16072E",
light: "#CCADD9",
main: "#80519F",
dark: "#532D75",
contrastText: "#FFF",
},
},
}}
>
<Button color="secondary">Button</Button>
</ThemeProvider>
);
To retrieve the theme object:
import { useTheme } from "nhc-dga-ui";
export default () => {
const theme = useTheme();
return (
<p style={{color: theme.palette.primary[600]}}>Paragraph text colored from my custom theme</p>
);
};
If you have any questions, issues, or feedback, feel free to reach out. I'm happy to assist with any concerns or inquiries.
You can contact me via email at a.ainia.c@nhc.sa.