Rad UI

Rad UI is a React component library that wraps Material UI, is documented with Storybook, and is bundled with Rollup.js for export as an npm package. Its purpose is to promote code reuse and consistency across Rad AI’s projects, thereby reducing development time and ensuring a unified design and user experience.

Storybook

Storybook is a frontend workshop for building UI components and pages in isolation.

Why use Storybook:

• Component Isolation: it allows us to develop and test components independently from the products:
• Visual Documentation: it automatically generates documentation for all components;
• Reusable Components: It’s easy to explore components for reuse across projects.

Material UI

Material UI is an open-source React component library that implements Google's Material Design.

Why use Material UI:

• Customizable Theme: we can easily extend and customize the Material UI theme to match Rad UI's identity;
• Time Efficiency: we leverage the pre-built, well-tested components from Material UI, reducing development time.

Rollup.js

Compile small pieces of code into something larger and more complex.

Why use Rollup:

• Optimized for Libraries: Rollup is particularly well-suited for bundling libraries, providing a clean and minimal output.

Use @radai/radui

To install the @radai/radui as a dependency, you need to:

1. Run npm install @radai/radui

Then you can use the custom ThemeProvider:

import { ThemeProvider } from "@radai/radui";

export default App() => (
    <ThemeProvider themeName="MidnightBlue">
        //...
    </ThemeProvider>
);

Or use any of the components:

import { RadAIReportingLogo } from "@radai/radui";

//...

<RadAIReportingLogo />;