Overview

The @blocklet/ui-react library provides a collection of essential React components designed to accelerate the development of applications, known as Blocklets. It streamlines the creation of common user interface elements by intelligently using the blocklet's metadata, enabling developers to build consistent and feature-rich UIs with minimal effort.

This library is built upon @arcblock/ux, which is a themed extension of Material-UI. This foundation ensures that all components are robust, accessible, and easily customizable to fit your application's branding.

The Problem It Solves#

Modern web applications often require a standard set of UI components for layout, user management, and notifications. Implementing these from scratch for every project is time-consuming and can lead to inconsistencies. The Blocklet UI React library addresses this by providing pre-built components that automatically configure themselves based on your blocklet's metadata (blocklet.yml).

This metadata-driven approach means that elements like your application's name, logo, navigation links, and theme colors are automatically applied across components, drastically reducing boilerplate code and ensuring brand consistency.

Core Architecture#

The library's architecture is designed for simplicity and automation. When a component like Header or Footer is rendered, it reads configuration data from the window.blocklet object, which is populated by the Blocklet Server from your blocklet.yml file. This allows you to define your UI's structure and branding in a central configuration file, and the components adapt accordingly.

Key Features#

• Metadata-Driven: Automatically configures components like Header and Footer using your blocklet's name, logo, and navigation structure defined in blocklet.yml.
• Integrated Session Management: Components seamlessly integrate with DID Connect sessions, automatically displaying user profile information, session controls, and role-based access to navigation links.
• Responsive Layouts: Includes powerful layout components like Dashboard that provide a responsive structure for administrative interfaces out of the box.
• Component Management: Offers tools like ComponentInstaller and BlockletStudio to help manage dependencies and resources within the Blocklet ecosystem.

Core Components#

The library is organized into several key modules, each addressing a specific area of application UI.

Summary#

By leveraging the @blocklet/ui-react library, you can significantly reduce development time and focus on your application's unique features. The metadata-driven approach ensures consistency and simplifies the management of common UI elements.

To start building your application, proceed to the Getting Started guide for a step-by-step tutorial on installing the library and rendering your first components.