Skip to main content

KeyComponents

KeyComponents​

Description: The KeyComponents module provides a collection of essential UI components that are commonly used in web applications. These components are designed to be flexible, customizable, and easy to integrate into various projects. This documentation covers the key components provided in the module, detailing their props, default values, and usage examples to help developers effectively utilize them in their projects.

Label​

A simple component to display a label with optional additional information like a required indicator or tooltip.

Props:

  • label (string, required): The text to display as the label.
  • disabled (bool, optional): If true, the label appears in a disabled state.
  • required (bool, optional): If true, displays an asterisk (*) indicating the field is required.
  • info (string, optional): Additional information displayed as a tooltip.
  • className (string, optional): Additional CSS classes for customization.

Usage:

<Label label="Username" required info="This is your unique identifier" />

ContentLabel​

Used for displaying a labeled section with additional elements like badges, images, and descriptions.

Props:

  • label (string, required): The main text for the label.
  • sublabel (string, optional): Additional text displayed beside the label.
  • badge (string, optional): A badge displayed beside the label.
  • image (string, optional): An image displayed next to the label.
  • disabled (bool, optional): If true, the label appears in a disabled state.
  • description (string, optional): A description displayed below the label.
  • size (string, optional): Size variant for the label.
  • time (string, optional): Time or additional info displayed with the description.
  • className (string, optional): Additional CSS classes for customization.
  • children (node, optional): Additional content to be rendered below the label.

Usage:

<ContentLabel label="Dashboard" sublabel="Admin" badge="New" description="Access to all admin features." />

ContentCard​

A card component that wraps the ContentLabel component, providing a close button and optional description.

Props:

  • title (string, required): The main title of the card.
  • subtitle (string, optional): Subtitle displayed below the title.
  • image (string, optional): An image displayed in the card.
  • description (string, optional): Description text displayed below the subtitle.
  • className (string, optional): Additional CSS classes for customization.
  • size (string, optional): Size variant for the card.
  • onHide (func, required): Function called when the close button is clicked.

Usage:

<ContentCard title="User Profile" subtitle="View and edit your profile" onHide={handleClose} />

Hint​

A component used to display hints or error messages with optional icons.

Props:

  • children (node, required): The content of the hint.
  • className (string, optional): Additional CSS classes for customization.
  • error (bool, optional): If true, the hint is styled as an error message.
  • disabled (bool, optional): If true, the hint appears in a disabled state.
  • icon (string, optional): Icon class to display next to the hint.

Usage:

<Hint error icon="ri-error-warning-line">Invalid input</Hint>

PasswordStrength​

Displays a password strength meter based on the input value. It uses the zxcvbn library to assess the password strength.

Props:

  • value (string, required): The password value to be analyzed.
  • className (string, optional): Additional CSS classes for customization.

Usage:

<PasswordStrength value={password} />

Icon​

A flexible icon component that allows for various customizations like size, variant, and whether it's bordered or disabled.

Props:

  • icon (string, required): The icon name to be displayed.
  • className (string, optional): Additional CSS classes for customization.
  • size (string, optional): Size of the icon, e.g., 'sm' or 'lg'.
  • variant (string, optional): Color variant of the icon.
  • type (string, optional): Icon style, either 'line' or 'fill'.
  • bordered (bool, optional): If true, the icon is bordered.
  • light (bool, optional): If true, the icon appears in a lighter shade.
  • disabled (bool, optional): If true, the icon appears in a disabled state.

Usage:

<Icon icon="settings" size="lg" variant="primary" />

Legend​

Displays a legend with a colored dot, typically used for data visualization.

Props:

  • children (node, required): The text or content displayed next to the dot.
  • variant (string, optional): Color variant for the legend dot.
  • className (string, optional): Additional CSS classes for customization.

Usage:

<Legend variant="success">Completed</Legend>

ListItem​

A component used to display items in a list with optional icons, labels, and descriptions.

Props:

  • icon (node, optional): Icon displayed next to the list item.
  • label (node, optional): The main text of the list item.
  • sublabel (node, optional): Additional text below the label.
  • description (node, optional): Detailed description, typically used with larger list items.
  • size (string, optional): Size variant of the list item, e.g., 'sm', 'md', 'lg'.
  • selected (bool, optional): If true, the list item appears selected.
  • onClick (func, optional): Function called when the list item is clicked.

Usage:

<ListItem icon={<Icon icon="user" />} label="Profile" onClick={handleClick} />