@blocklet/ui-react/docs/components.md

Some useful front-end web components that can be used in Blocklets.

# Components

This section provides a comprehensive reference for all available UI components in the Blocklet UI React library. Each component is documented with its properties (props), practical usage examples, and best practices to ensure seamless integration into your application.

The components are organized into logical categories to facilitate navigation and discovery. Select a category below to explore the components within it.

<x-cards data-columns="3">
  <x-card data-title="Layout" data-icon="lucide:layout-template" data-href="/components/layout">
    Primary components like Header, Footer, and Dashboard that form the main structure of a blocklet application.
  </x-card>
  <x-card data-title="User Management" data-icon="lucide:users" data-href="/components/user-management">
    A suite of components for handling user profiles, session management, and organization switching.
  </x-card>
  <x-card data-title="Component Management" data-icon="lucide:package" data-href="/components/component-management">
    Tools for dynamically installing, publishing, and managing blocklet components within an application.
  </x-card>
  <x-card data-title="Notifications" data-icon="lucide:bell" data-href="/components/notifications">
    Provides components and utilities for implementing a real-time user notification system.
  </x-card>
  <x-card data-title="Utilities" data-icon="lucide:wrench" data-href="/components/utilities">
    A collection of helper components and utilities, such as a versatile Icon component and theme providers.
  </x-card>
</x-cards>

---

To begin building your application's structure, proceed to the [Layout Components](./components-layout.md) section.