Component

Alert

Description

The Alert component is used to display important messages to the user. It can be configured to show different types of alerts, such as success, warning, or error. It also supports icons, titles, descriptions, and actions, making it highly customizable for various use cases.

Use Case

This component is suitable for displaying notifications, warnings, errors, or any important information that requires the user's attention. It can be integrated into various parts of an application where user feedback or system messages need to be conveyed effectively.

Props Table

Prop Name	Type	Description	Default Value	Required
type	"flat" | "outlined" | "default"	Defines the style of the alert.	"default"	No
status	"success" | "warning" | "error"	Defines the status of the alert which dictates its color scheme.	undefined	No
showIcon	boolean	Whether to show an icon in the alert.	false	No
icon	React.FC<AssetProps>	The icon to be displayed in the alert.	LmCkAdd	No
showCloseIcon	boolean	Whether to show a close icon in the alert.	undefined	No
onClose	() => void	Callback function to be called when the close icon is clicked.	undefined	No
title	string	The title of the alert message.	"Alert Message Title"	No
description	string	The description or detailed message of the alert.	undefined	No
actionBtn	boolean	Whether to show an action button in the alert.	false	No
actionBtnLabel	string	The label for the action button if actionBtn is true.	undefined	No
actionBtnOnPress	() => void	Callback function to be called when the action button is pressed.	undefined	No

Badge

Description

The Badge component is a highly customizable UI element used to display labels, counts, or statuses. It supports different shapes (round and square) and styles (filled or outlined). The component can be configured with various colors for both text and background, making it suitable for a wide range of use cases.

Use Case

The Badge component is ideal for displaying:

• Notification counts (e.g., unread messages).
• Status indicators (e.g., online/offline status).
• Labels or tags for categorization.
• Any other brief, prominent information that needs to be highlighted.

Props Table

Prop Name	Type	Description	Default Value	Required
type	"round" | "square-fill" | "square-outlined"	Defines the shape and style of the badge.	"square-fill"	No
label	number | string	The content to be displayed inside the badge.	undefined	Yes
color	string	The color of the text inside the badge.	globalColor?.foreground	No
backgroundColor	string	The background color of the badge.	globalColor?.accent100	No

Example Use Case

Round Badge:

• To display a count of unread notifications, use a round badge with a numeric label. If the count exceeds 9, it will display "9+".

Square Badge:

• To display a status label like "New" or "Sale", use a square badge with a string label. This can be filled or outlined based on the type.

Component Props

Prop Name	Type	Description	Default Value	Required
type	"round" | "square-fill" | "square-outlined"	Defines the shape and style of the badge.	"square-fill"	No
label	number | string	The content to be displayed inside the badge.	undefined	Yes
color	string	The color of the text inside the badge.	globalColor?.foreground	No
backgroundColor	string	The background color of the badge.	globalColor?.accent100	No

Usage Example

Round Badge:

<Badge type="round" label={5} />

Button

Description

The Button component is a versatile UI element used to trigger actions or events in an application. It supports different styles, icons, and labels, making it highly customizable for various use cases. The component is designed to be easily integrated and styled to match the application's design system.

Use Case

The Button component is ideal for:

• Triggering form submissions.
• Initiating navigation to different parts of an application.
• Performing in-app actions like saving data, opening modals, etc.
• Displaying buttons with icons for enhanced visual appeal.

Props Table

Prop Name	Type	Description	Default Value	Required
type	"fill" | "outlined" | "label"	Defines the style of the button.	"fill"	No
textCase	"none" | "capitalize" | "uppercase" | "lowercase" | "initial" | "inherit"	Defines the text case transformation for the label.	"uppercase"	No
icon	React.FC<AssetProps>	The icon to be displayed in the button.	undefined	No
iconAtEnd	boolean	Whether to display the icon at the end of the button.	false	No
label	string	The text label to be displayed inside the button.	undefined	No
color	string	The color of the text and icon inside the button.	globalColor.foreground	No
backgroundColor	string	The background color of the button.	globalColor.accent100	No
borderColor	string	The border color of the button.	globalColor?.border100	No
borderRadius	number	The border radius of the button.	0.3	No
iconSize	number	The size of the icon inside the button.	0.8	No

Example Use Case

Example 1: Primary Button

A primary button that triggers a form submission.

<Button
  type="fill"
  label="Submit"
  color="#fff"
  backgroundColor="#007bff"
/>

Checkbox

Description

The Checkbox component is a customizable UI element used to capture user input in the form of a boolean value. It supports indeterminate states, custom labels, and callback functions for change events. The component is designed to be easily integrated into forms and other interactive parts of an application.

Use Case

The Checkbox component is ideal for:

• Capturing user agreement (e.g., terms and conditions).
• Toggling settings on or off.
• Selecting multiple items from a list.
• Displaying an indeterminate state for partially selected groups.

Props Table

Prop Name	Type	Description	Default Value	Required
label	string	The text label to be displayed next to the checkbox.	undefined	No
showIndeterminate	boolean	Whether to display the checkbox in an indeterminate state.	false	No
onUpdate	(value: boolean) => void	Callback function to be called when the checkbox state changes.	undefined	No
value	boolean	The initial checked state of the checkbox.	false	No
disabled	boolean	Whether the checkbox is disabled.	undefined	No

Example Use Case

Example 1: Simple Checkbox

A simple checkbox to accept terms and conditions.

<Checkbox
  label="I agree to the terms and conditions"
  onUpdate={(value) => console.log(value)}
/>

Code

Description

The Code component is a flexible and customizable UI element for displaying code snippets in various programming languages. It supports syntax highlighting, formatting, and can be editable or non-editable based on the requirements. This component can be used in blogs, documentation sites, or any application that needs to present code to users.

Use Case

The Code component is ideal for:

• Displaying code snippets in different programming languages with syntax highlighting.
• Allowing users to edit and format code in real-time.
• Embedding formatted code within articles, tutorials, or documentation.

Props Table

Prop Name	Type	Description	Default Value	Required
code	string	The code snippet to be displayed.	undefined	Yes
language	'html' | 'css' | 'JS' | 'js' | 'jsx' | 'javascript' | 'rust' | 'sql' | 'php' | 'python' | 'auto'	The programming language of the code for syntax highlighting.	'auto'	No
editable	boolean	Whether the code is editable by the user.	false	No
codeClassName	string	Additional class name for the code element.	undefined	No
babel	boolean	Whether to use Babel for formatting the code.	false	No
span	boolean	Whether to render the code inside a span element.	false	No

Example Use Case

Example 1: Displaying HTML Code

A non-editable code snippet displaying HTML code.

<Code
  code="<div>Hello, World!</div>"
  language="html"
/>

Dialogue

Description

The Dialogue component is a modal dialog box used to display important information and actions to the user. It supports customizable titles, descriptions, buttons, and icons. The component can be aligned in different ways and is suitable for various use cases such as confirmations, alerts, or detailed messages.

Use Case

The Dialogue component is ideal for:

• Displaying confirmation dialogs for user actions.
• Showing alerts or error messages.
• Providing detailed information with optional actions.
• Any scenario where a modal dialog is required to capture user attention and interaction.

Props Table

Prop Name	Type	Description	Default Value	Required
visible	boolean	Whether the dialogue is visible.	false	No
actionBtnType	'primary' | 'secondary' | 'both' | 'none'	The type of action buttons to display.	'none'	No
contentAlign	'left' | 'center' | 'right'	The alignment of the content inside the dialogue.	'left'	No
primaryBtnOnPress	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback function for primary button press event.	undefined	No
secondaryBtnOnPress	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback function for secondary button press event.	undefined	No
primaryBtnLabel	string	Label for the primary button.	'Submit'	No
secondaryBtnLabel	string	Label for the secondary button.	'Cancel'	No
primaryIcon	React.FC<AssetProps>	Icon for the primary button.	LmCkCheckCircle	No
secondaryIcon	React.FC<AssetProps>	Icon for the secondary button.	LmCkClose	No
title	string	The title of the dialogue.	undefined	No
description	string	The description or detailed message of the dialogue.	undefined	No
closeIcon	boolean	Whether to show a close icon in the dialogue.	false	No
onClose	() => void	Callback function to be called when the dialogue is closed.	undefined	No

Example Use Case

Example 1: Confirmation Dialogue

A confirmation dialogue with primary and secondary buttons.

<Dialogue
  visible={true}
  title="Delete Item"
  description="Are you sure you want to delete this item?"
  actionBtnType="both"
  primaryBtnLabel="Delete"
  secondaryBtnLabel="Cancel"
  primaryBtnOnPress={() => console.log('Item deleted')}
  secondaryBtnOnPress={() => console.log('Action cancelled')}
  onClose={() => console.log('Dialogue closed')}
  closeIcon={true}
/>

HorizontalModal

Description

The ModalHorizontalIn component is a customizable slide-in modal dialog that appears from either the left or right side of the screen. It supports visibility toggling, customizable direction, and an optional close function triggered when clicking outside the modal.

Use Case

The ModalHorizontalIn component is ideal for:

• Displaying off-canvas menus or side panels.
• Implementing slide-in dialogs for notifications or additional content.
• Creating interactive interfaces where modal dialogs need to appear from the sides of the screen.

Props Table

Prop Name	Type	Description	Default Value	Required
visible	boolean	Whether the modal is visible.	false	No
direction	'left' | 'right'	The direction from which the modal slides in.	'left'	No
closeIcon	boolean	Whether to show a close icon in the modal.	false	No
onClose	() => void	Callback function to be called when the modal is closed.	undefined	No

Example Use Case

Example 1: Left Slide-In Modal

A modal that slides in from the left side of the screen.

<ModalHorizontalIn
  visible={true}
  direction="left"
  onClose={() => console.log('Modal closed')}
>
  <p>This is a left slide-in modal.</p>
</ModalHorizontalIn>

Link

Description

The Link component is a customizable anchor element used for navigation. It extends the native HTML anchor element, allowing you to use all the default anchor attributes while providing additional styling and functionality as needed. This component can be used for both internal and external navigation in your application.

Use Case

The Link component is ideal for:

• Navigating to different pages within your application.
• Linking to external websites or resources.
• Creating styled hyperlinks that match the design system of your application.

Props Table

Prop Name	Type	Description	Default Value	Required
href	string	The URL that the hyperlink points to.	undefined	Yes
target	"_self" | "_blank" | "_parent" | "_top"	Specifies where to open the linked document.	"_self"	No
rel	string	Specifies the relationship between the current document and the linked document.	undefined	No
children	React.ReactNode	The content inside the link.	undefined	Yes

Example Use Case

Example 1: Basic Link

A basic link to an external website.

<Link href="https://www.example.com">
  Visit Example
</Link>

listComponent

Description

The ListComponent is a flexible and customizable component for rendering nested lists. It supports both ordered and unordered lists and can handle multiple levels of nesting. This component is ideal for displaying hierarchical data or creating structured content.

Use Case

The ListComponent is ideal for:

• Displaying hierarchical data such as organizational structures or file directories.
• Creating structured content with nested lists.
• Generating lists with different bullet or numbering styles for each level.

Props Table

Prop Name	Type	Description	Default Value	Required
items	ListItem[]	Array of list items to be rendered. Each item can have nested children.	[]	Yes
type	'ordered-list' | 'unordered-List'	Defines whether the list is ordered or unordered.	'unordered-List'	No

ListItem Interface

Prop Name	Type	Description	Default Value	Required
text	string	The text content of the list item.	undefined	Yes
level	number	The level of the list item (used for styling nested lists).	1	Yes
children	ListItem[]	Array of child list items for creating nested lists.	undefined	No

Example Use Case

Example 1: Unordered List

A basic unordered list with nested items.

const items = [
  {
    text: 'Item 1',
    level: 1,
    children: [
      {
        text: 'Item 1.1',
        level: 2,
      },
      {
        text: 'Item 1.2',
        level: 2,
        children: [
          {
            text: 'Item 1.2.1',
            level: 3,
          },
        ],
      },
    ],
  },
  {
    text: 'Item 2',
    level: 1,
  },
];

<ListComponent items={items} type="unordered-List" />

Modal

Description

The Modal component is a customizable dialog box used to display important information and actions to the user. It supports customizable titles, descriptions, primary and secondary buttons, and icons. The component is suitable for various use cases such as confirmations, alerts, or detailed messages.

Use Case

The Modal component is ideal for:

• Displaying confirmation dialogs for user actions.
• Showing alerts or error messages.
• Providing detailed information with optional actions.
• Any scenario where a modal dialog is required to capture user attention and interaction.

Props Table

Prop Name	Type	Description	Default Value	Required
visible	boolean	Whether the modal is visible.	false	No
actionBtnType	'primary' | 'secondary' | 'both' | 'none'	The type of action buttons to display.	'none'	No
actionBtnAlign	'left' | 'center' | 'right'	The alignment of the action buttons.	'left'	No
primaryBtnOnPress	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback function for primary button press event.	undefined	No
secondaryBtnOnPress	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback function for secondary button press event.	undefined	No
primaryBtnLabel	string	Label for the primary button.	'Submit'	No
secondaryBtnLabel	string	Label for the secondary button.	'Cancel'	No
primaryIcon	React.FC<AssetProps>	Icon for the primary button.	LmCkCheckCircle	No
secondaryIcon	React.FC<AssetProps>	Icon for the secondary button.	LmCkClose	No
title	string	The title of the modal.	undefined	No
description	string	The description or detailed message of the modal.	undefined	No
closeIcon	boolean	Whether to show a close icon in the modal.	false	No
onClose	() => void	Callback function to be called when the modal is closed.	undefined	No

Example Use Case

Example 1: Confirmation Modal

A confirmation modal with primary and secondary buttons.

<Modal
  visible={true}
  title="Delete Item"
  description="Are you sure you want to delete this item?"
  actionBtnType="both"
  actionBtnAlign="right"
  primaryBtnLabel="Delete"
  secondaryBtnLabel="Cancel"
  primaryBtnOnPress={() => console.log('Item deleted')}
  secondaryBtnOnPress={() => console.log('Action cancelled')}
  onClose={() => console.log('Modal closed')}
  closeIcon={true}
/>

Pagination

Description

The Pagination component is a versatile and customizable UI element used for navigating through paginated content. It supports displaying page numbers, next and previous buttons, and ellipsis for a compact representation of large page ranges. This component is ideal for applications with paginated data or content that needs easy navigation.

Use Case

The Pagination component is ideal for:

• Navigating through paginated data such as tables, lists, or galleries.
• Providing users with an intuitive way to jump to specific pages.
• Displaying a compact pagination interface for large sets of pages.

Props Table

Prop Name	Type	Description	Default Value	Required
pageNumber	number	The current page number.	undefined	Yes
totalPages	number	The total number of pages.	undefined	Yes
onPressNext	() => void	Callback function to be called when the next button is pressed.	undefined	Yes
onPressPrevious	() => void	Callback function to be called when the previous button is pressed.	undefined	Yes
onPressPageNumber	(page: number) => void	Callback function to be called when a page number is pressed.	undefined	Yes

Example Use Case

Example 1: Basic Pagination

A basic pagination component for navigating through 10 pages.

<Pagination
  pageNumber={1}
  totalPages={10}
  onPressNext={() => console.log("Next page")}
  onPressPrevious={() => console.log("Previous page")}
  onPressPageNumber={(page) => console.log(`Page ${page}`)}
/>

Profile

Description

The Profile component is a flexible and customizable UI element used to display profile information. It supports displaying an avatar, title, subtitle, and an optional action icon. This component is ideal for use in user profile cards, contact lists, or any interface requiring a compact representation of a user's profile.

Use Case

The Profile component is ideal for:

• Displaying user profile information in a card format.
• Presenting contact information in lists.
• Creating profile sections in dashboards or user interfaces.

Props Table

Prop Name	Type	Description	Default Value	Required
title	string	The main title or name to be displayed in the profile.	undefined	No
subtitle	string	The subtitle or additional information to be displayed.	undefined	No
actionIcon	React.FC<AssetProps>	An optional icon for actions, such as settings or editing.	undefined	No
avatar	string	The URL of the avatar image to be displayed in the profile.	undefined	No

Example Use Case

Example 1: Basic Profile

A basic profile displaying an avatar, title, and subtitle.

<Profile
  title="John Doe"
  subtitle="Software Engineer"
  avatar="https://example.com/avatar.jpg"
/>

Radio

Description

The Radio component is a customizable UI element used for single selection from multiple options. It supports labels, checked state, and can be disabled. This component is ideal for forms or any other input scenarios where users need to select one option from a set.

Use Case

The Radio component is ideal for:

• Creating single-select options in forms.
• Implementing radio button groups for surveys or questionnaires.
• Any scenario where a user needs to select one option from multiple choices.

Props Table

Prop Name	Type	Description	Default Value	Required
label	string	The label to be displayed next to the radio button.	undefined	No
disabled	boolean	Whether the radio button is disabled.	false	No
checked	boolean	Whether the radio button is checked.	false	No

Example Use Case

Example 1: Basic Radio Button

A basic radio button with a label.

<Radio
  label="Option 1"
  checked={true}
  onChange={(e) => console.log(e.target.checked)}
/>

Switch

Description

The Switch component is a customizable toggle switch used for enabling or disabling options. It supports labels, active and inactive colors, and can handle state changes through a toggle function. This component is ideal for settings or any scenario where a binary choice needs to be made.

Use Case

The Switch component is ideal for:

• Toggling settings or preferences on or off.
• Creating binary choices in forms.
• Implementing on/off switches for features.

Props Table

Prop Name	Type	Description	Default Value	Required
label	string	The label to be displayed next to the switch.	undefined	No
activeColor	string	The color of the switch when it is active.	color.accent100	No
inactiveColor	string	The color of the switch when it is inactive.	color.foregroundInverse300	No
value	boolean	The current value of the switch.	false	Yes
onToggle	(value: boolean) => void	Callback function to be called when the switch value changes.	undefined	No

Example Use Case

Example 1: Basic Switch

A basic switch with a label.

<Switch
  label="Enable Notifications"
  value={true}
  onToggle={(newValue) => console.log("Switch toggled:", newValue)}
/>

Ticker

Description

The Ticker component is a customizable scrolling ticker used to display continuous information, such as news headlines or stock prices. It supports various settings like speed, direction, delay, background color, and whether the ticker should stop on hover. This component is ideal for applications requiring a scrolling text or marquee effect.

Use Case

The Ticker component is ideal for:

• Displaying continuous news headlines or updates.
• Showing stock prices or financial data.
• Any scenario where a scrolling text effect is needed.

Props Table

Prop Name	Type	Description	Default Value	Required
stopOnHover	boolean	Whether the ticker should stop scrolling when hovered over.	false	No
backgroundColor	string	The background color of the ticker.	hexToRGBA(color.foreground, 0)	No
speed	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | 40 | 50	The speed of the scrolling text.	10	No
delay	number	The delay before the ticker starts scrolling.	0	No
direction	"normal" | "reverse" | "alternate" | "alternate-reverse"	The direction of the scrolling text.	"normal"	No
loop	boolean	Whether the ticker should loop continuously.	true	No

Example Use Case

Example 1: Basic Ticker

A basic ticker displaying continuous text.

<Ticker>
  Breaking News: This is an example of a basic ticker.
</Ticker>

Disclosure

Accordion

Description

The Accordion component is a collapsible UI element used to hide and show content. It supports customizable headers and can be used to organize information in a compact and user-friendly way. This component can be integrated into various parts of an application where content needs to be expandable and collapsible.

Use Case

The Accordion component is ideal for:

• Displaying FAQs where each question can be expanded to reveal the answer.
• Organizing content in a compact manner where sections can be expanded and collapsed.
• Providing a navigable list of items or options where details are hidden until needed.

Props Table

Prop Name	Type	Description	Default Value	Required
headerText	string	The text to be displayed in the header of the accordion.	""	Yes
children	React.ReactNode	The content to be displayed inside the accordion body.	undefined	No
hidden	boolean	Whether the accordion content is initially hidden.	false	No

Example Use Case

Example 1: Simple Accordion

A simple accordion to display additional information.

<Accordion
  headerText="More Information"
>
  <p>This is the hidden content that is revealed when the accordion is expanded.</p>
</Accordion>

Card

Description

The Card component is a versatile and customizable UI element used to display information in a concise and visually appealing manner. It supports different styles, optional images, titles, descriptions, and additional interactive elements such as switches and action buttons. This component can be used to present various types of content in a structured format.

Use Case

The Card component is ideal for:

• Displaying product information with images, titles, and descriptions.
• Showing user profiles or contact information.
• Presenting articles or blog post summaries.
• Providing an interactive element like a switch for toggling states.

Props Table

Prop Name	Type	Description	Default Value	Required
type	"default" | "fill" | "outlined"	Defines the style of the card.	"default"	No
image	string	The URL of the image to be displayed in the card.	undefined	No
title	string	The title of the card.	undefined	Yes
description	string	The description or detailed message of the card.	undefined	Yes
displaySwitch	boolean	Whether to display a switch in the card.	undefined	No
toggleValue	boolean	The initial value of the switch.	false	No
onToggle	(value: boolean) => void	Callback function to be called when the switch value changes.	undefined	No
actionElement	React.ReactNode	Additional interactive element to be displayed in the card.	undefined	No
width	string	The width of the card.	"22rem"	No

Tabs

Description

The Tabs component is a versatile UI element used for navigation or switching between different views or content sections. It supports horizontal and vertical orientations, custom icons, labels, and different selection styles. This component can be used to enhance the user experience by organizing content in a structured and easily accessible manner.

Use Case

The Tabs component is ideal for:

• Navigating between different sections of a single-page application.
• Switching between various views or data sets within a page.
• Creating a tabbed interface for content that needs to be categorized or segmented.

Props Table

Prop Name	Type	Description	Default Value	Required
direction	"horizontal" | "vertical"	Defines the direction of the tabs.	"horizontal"	No
selectType	"select-100" | "select-200" | "select-300"	Defines the selection style of the tabs.	"select-100"	No
label	string	The text label to be displayed inside the tab.	undefined	No
icon	React.FC<AssetProps>	The icon to be displayed inside the tab.	undefined	No
selected	boolean	Whether the tab is currently selected.	false	No
color	string	The color of the text and icon inside the tab.	undefined	No
iconSize	number	The size of the icon inside the tab.	0.7	No
disabled	boolean	Whether the tab is disabled.	false	No
onClick	() => void	Callback function to be called when the tab is clicked.	undefined	No

Example Use Case

Example 1: Horizontal Tabs

A set of horizontal tabs for navigating between different sections.

<Tabs
  label="Home"
  icon={HomeIcon}
  selected={true}
  onClick={() => console.log('Home clicked')}
/>
<Tabs
  label="Profile"
  icon={ProfileIcon}
  onClick={() => console.log('Profile clicked')}
/>
<Tabs
  label="Settings"
  icon={SettingsIcon}
  onClick={() => console.log('Settings clicked')}
/>

Input