The Accordion component is a collapsible UI element that allows users to toggle the visibility of content sections. It’s especially useful for organizing large amounts of content, such as FAQs, where each question can be expanded to reveal more information. By reducing clutter on the page, Accordions enhance user experience by presenting information in a structured and interactive way. Use cases include FAQ sections, feature descriptions, or terms and conditions in an e-commerce checkout process.

The AppHeader component is a customizable header designed for the top section of web applications. It typically includes branding elements like logos, primary navigation menus, and user account information. A well-designed AppHeader enhances the user experience by providing consistent and easy access to key actions and navigation. This component is ideal for application layouts where consistent navigation and brand presence are critical, such as in dashboards, content management systems, and SaaS platforms.

The AutoComplete component is an input field with predictive text functionality that suggests possible matches from a predefined list as the user types. This component significantly improves data entry efficiency by reducing the amount of typing required and minimizing errors. It's commonly used in search bars, address forms, or any scenario where users need to input known items quickly. For instance, in an e-commerce site, AutoComplete can be used in search boxes to suggest popular products or categories.

The Avatar component is a small graphical representation, often a user's profile image or initials, used in user interfaces. Avatars are typically circular and are used in various contexts, such as user profile displays, comment sections, or contact lists. They help in identifying users visually and add a personalized touch to the application. Real-life use cases include social media profiles, user dashboards, or chat applications where quick identification of users is necessary.

The BottomNavigation component is a UI element that anchors to the bottom of the screen, offering easy access to the primary sections of a mobile application. It's designed for mobile-first experiences where screen space is limited, making it crucial for keeping essential navigation at the user's fingertips. This component is ideal for apps that require constant navigation between a few core sections, such as e-commerce apps (Home, Categories, Cart, Profile) or media streaming apps (Home, Search, Library, Settings).

The BottomNavItem component represents a single item within a bottom navigation bar, which is commonly used in mobile applications. This component provides users with easy access to the most important sections of the app from any screen. Each BottomNavItem is typically accompanied by an icon and label, offering an intuitive way for users to navigate. Use cases include mobile apps like social networks, where quick access to the home feed, search, notifications, and profile is essential.

The Breadcrumb component is a navigation aid that shows the user's current location within a website or application hierarchy. It allows users to trace their path back to previous levels easily, improving navigation, especially in multi-level or nested structures. Breadcrumbs are particularly useful in e-commerce websites where users navigate through multiple categories or in content-rich sites where users drill down into deep content hierarchies, such as news portals or product catalogs.

The Button component is one of the most fundamental interactive elements in any user interface, designed to trigger actions, events, or submit forms. Buttons come in various styles, sizes, and configurations, making them adaptable to a wide range of scenarios. Whether it's a primary call-to-action on a landing page, a submit button in a form, or a secondary action in a dialog, buttons play a crucial role in guiding user interactions. Use cases include 'Submit' buttons in forms, 'Add to Cart' buttons in e-commerce sites, or 'Learn More' buttons in promotional sections.

The Carousel component is a versatile UI element used for showcasing a series of content items, such as images, product cards, or testimonials, in a rotating format. It supports various customization options like autoplay, looping, and navigation controls. Carousels are widely used in homepages to highlight featured content, in product detail pages to showcase different product angles, or in testimonial sections to display customer reviews. They help manage space efficiently while keeping content dynamic and engaging.

The Checkbox component is a form element that allows users to select one or more options from a set. It is commonly used in scenarios where multiple selections are allowed, such as filters on an e-commerce site (e.g., selecting multiple brands) or in survey forms where users can choose all applicable answers. Checkboxes are essential for creating user-friendly forms that require clear and easy selection mechanisms.

The Chip component is a compact and flexible UI element used to display information such as tags, selections, or actions. Chips can include text, icons, or even avatars, making them versatile for various scenarios. They are often used in tagging systems, such as email categorization, search filters, or multi-select fields where the user's selections need to be visually displayed. In a project management tool, for instance, chips could represent different task statuses or labels applied to tasks.

The Column component is a layout element that helps organize content into vertical stacks, which is essential for creating responsive designs. Columns are often used within grid systems to divide content into manageable sections, ensuring that the layout adjusts properly across different screen sizes. For instance, in a blog layout, columns can be used to separate the main content from the sidebar, or in a dashboard, they can arrange widgets into an organized grid.

The DatePicker component provides a user-friendly interface for selecting dates from a calendar view. It supports various customizations, including date formats, date ranges, and localization options, making it adaptable to different use cases. DatePickers are commonly used in booking systems (e.g., hotel reservations), scheduling apps (e.g., setting appointment dates), or any form where users need to input dates accurately. They help prevent user errors and ensure consistent date input formats.

The Dialog component is a modal window that overlays the main content to capture the user’s attention. It’s used for interactions that require user input, confirmations, or to display important messages that must be addressed before continuing. Dialogs are often employed in scenarios like confirming the deletion of data, filling out forms, or showing alerts. For example, when a user tries to delete a file, a dialog can prompt for confirmation, ensuring that the action is intentional.

The FloatingButton component is a circular button that floats above the content and is typically used for primary or quick actions within an application. It remains visible as users scroll, making it ideal for actions that should be readily accessible, such as adding a new item, creating a new document, or launching a chat window. This component is especially popular in mobile and web apps where space is limited, and quick access to a key function is necessary.

The FloatingMenu component is an expandable menu that hovers over the content, providing quick access to a set of related actions or options. It’s useful in scenarios where screen space is limited, or where users need to access secondary actions without navigating away from the main content. For instance, in a text editor, a floating menu could provide formatting options when a user highlights text, or in a mapping application, it could offer tools for drawing or measuring directly on the map.

The InputField component is a fundamental form element that captures user input. It supports various input types, including text, number, password, and more, making it versatile for different data entry needs. InputFields are essential in virtually all forms, from login pages to checkout processes. They ensure that data is collected in a structured and consistent manner, providing users with clear prompts for the information required.

The Link component is a navigational element that redirects users to other pages, sections, or external resources. It is typically styled to stand out within content, often underlined or colored to indicate interactivity. Links are crucial in guiding users through a website or application, making them essential in navigation menus, call-to-action buttons, or in-text references. For example, in a blog post, links can direct readers to related articles, enhancing the overall user journey.

The MenuDropdown component is a UI element that reveals a list of options or actions when triggered, typically by clicking or hovering. Dropdown menus are crucial for keeping interfaces clean and uncluttered by hiding less frequently used options until needed. They are commonly used in navigation bars, settings menus, or selection fields in forms. For example, in an e-commerce site, a MenuDropdown could be used to display different categories or account settings.

The MenuItem component represents a single selectable option within a Menu or MenuDropdown. It can include text, icons, or even nested submenus, making it a flexible building block for creating complex navigational structures. MenuItems are used in scenarios where users need to choose from a list of actions or navigate to different sections of an application. For instance, in a file management system, MenuItems might include options like 'Open', 'Rename', or 'Delete'.

The NextToastProvider component is a context provider that manages the display of toast notifications across your application. Toasts are brief, non-intrusive messages that appear temporarily, often used to inform users of the success or failure of an action, such as saving data or completing a task. By centralizing the management of toasts, the NextToastProvider ensures that notifications are consistent and easy to control throughout the app. Use cases include displaying success messages after form submissions, error notifications during data processing, or informational updates in real-time applications.

The useToast hook is a custom React hook that provides a simple interface for triggering toast notifications from anywhere within your application. By using this hook, developers can easily show success, error, or informational messages in response to user actions. This is particularly useful in forms, data submissions, or real-time applications where immediate feedback is necessary. For instance, in an e-commerce site, useToast can be used to show a confirmation message when a product is added to the cart or an error message when a payment fails.

The Progress component visually represents the completion status of a task or process, typically using a progress bar or circular indicator. It's commonly used in scenarios where users need to track the progress of long-running tasks, such as file uploads, form submissions, or installation processes. By providing real-time feedback, the Progress component enhances the user experience by keeping users informed about the status of their actions.

The RadioButton component is a form element that allows users to select a single option from a set of mutually exclusive choices. Unlike checkboxes, radio buttons enforce a single selection, making them ideal for scenarios like choosing a payment method, selecting a gender, or picking a preferred shipping option. Radio buttons are essential in forms where a clear and definitive choice is required from the user.

The RangeSlider component is a UI control that allows users to select a range of values by sliding a handle along a track. It's particularly useful for filtering options within a range, such as setting price limits in an e-commerce site, adjusting volume or brightness in media applications, or selecting a date range in a calendar app. The visual and interactive nature of the RangeSlider makes it a user-friendly alternative to traditional input fields for numerical ranges.

The ResizablePanel component is a layout element that allows users to adjust the size of a panel or container by dragging its edges. This component is particularly useful in applications where users need to manage the layout dynamically, such as in split-screen views, file explorers, or design tools. For example, in a code editor with a split view, a ResizablePanel can allow users to resize the editor and preview areas according to their preference.

The SelectDropDown component is a form element that allows users to select one or more options from a dropdown list. It’s highly customizable and can support single or multiple selections, searchable options, and grouped items. SelectDropDowns are commonly used in forms where users need to choose from a predefined set of options, such as selecting a country in an address form, picking a category in a content management system, or filtering products by attributes in an e-commerce site.

The SideBar component is a versatile UI element that provides a vertical panel typically placed at the side of the screen. It serves as a navigation hub or a space for displaying additional content, such as menus, filters, or tools, that complements the main content area. The SideBar can be fixed, collapsible, or toggleable, offering flexibility in how it's used across different applications. SideBars are commonly found in dashboards, content management systems, or web applications where users need quick access to navigation links, filters, or settings. Their ability to house various interactive elements makes them ideal for enhancing user workflows, especially in data-heavy or multi-functional interfaces.

The TabSelect component is a tab-based navigation element that allows users to switch between different views or sections within an application. It’s ideal for situations where content is divided into categories or steps, such as in multi-step forms, settings panels, or data dashboards. TabSelect enhances the user experience by making it easy to navigate through different parts of the interface without reloading the page or losing context.

The Tabs component is a navigation element that allows users to switch between different sections of content within the same page. Tabs are typically used to organize content into categories or steps, providing a cleaner and more organized interface. Use cases for Tabs include settings pages where different configurations are grouped under separate tabs, or in content-heavy applications where different types of information (e.g., description, reviews, Q&A) are displayed in an organized manner.

The TabCard component is a UI element that combines tabs with a card layout, allowing users to switch between different sections of content within the same interface. This component is particularly useful in scenarios where you need to present related content in a compact and organized manner, such as in user profiles, settings pages, or product details. For instance, in an e-commerce product page, TabCards could be used to display the product description, specifications, and reviews in separate tabs.

The Tag component is a small, labeled UI element used to categorize or highlight information. Tags are often used in content management systems, social media platforms, or e-commerce sites to label items, posts, or products with relevant keywords or attributes. They are particularly useful for organizing content, making it easier for users to filter and search. For example, in a blogging platform, tags can be used to label posts with relevant topics, improving content discoverability.

The Text component is a basic UI element that displays text content in a stylized manner. It supports various formatting options such as size, weight, color, and alignment, making it a versatile component for displaying content across your application. Whether it's a heading, paragraph, or label, the Text component is essential for conveying information clearly and consistently. Real-life use cases include titles in card components, descriptions in product listings, or labels in forms.

The TextArea component is a multiline input field that allows users to enter large amounts of text. Unlike a standard input field, which is typically single-line, the TextArea is designed for scenarios where users need to provide detailed information or lengthy responses. It's commonly used in forms, comment sections, and messaging interfaces where users may need to write paragraphs of text. The TextArea can be configured with features like character limits, resizable edges, and placeholder text, making it a flexible tool for capturing user input in applications like feedback forms, content creation platforms, or customer support interfaces.

The ThemeProvider component is a context provider that manages and applies the overall theme of your application. It allows for dynamic theming, enabling users to switch between predefined themes like light or dark mode, or even custom themes provided by the user. This component is crucial for maintaining a consistent look and feel across the application while also giving users the flexibility to choose their preferred theme. It's especially useful in applications where user personalization and accessibility are key, such as in productivity tools or content-heavy websites.

The useTheme hook is a custom React hook that provides access to the current theme context, allowing components to easily consume theme-related properties like colors, fonts, and spacing. This hook is essential for creating theme-aware components that adapt their styles dynamically based on the selected theme. It's particularly useful in design systems or large-scale applications where consistent theming is crucial. For example, in a dashboard app, useTheme can be used to adjust the styling of charts and widgets based on the active theme.

The ToastProvider component is a context provider that manages the display of toast notifications across your application. Toasts are brief, non-intrusive messages that appear temporarily, often used to inform users of the success or failure of an action, such as saving data or completing a task. By centralizing the management of toasts, the ToastProvider ensures that notifications are consistent and easy to control throughout the app. Use cases include displaying success messages after form submissions, error notifications during data processing, or informational updates in real-time applications.

The ToggleInput component is a form element that allows users to switch between two states, typically representing a binary choice such as 'on' or 'off'. It’s commonly used in settings panels, feature switches, or anywhere a simple, clear toggle is needed. For example, in a user settings page, ToggleInputs could be used to enable or disable notifications, switch between different modes, or activate specific features.

The ToggleSwitch component is an interactive UI element that allows users to switch between two states, usually 'on' or 'off'. It’s a more visual and often more user-friendly alternative to checkboxes for binary settings. ToggleSwitches are commonly found in settings pages, where they control features like dark mode, notifications, or privacy options. Their intuitive design makes them ideal for quick, on-the-fly adjustments in user preferences.

The Tooltip component is a small, informational popup that appears when a user hovers over or focuses on a UI element. Tooltips are used to provide additional context or information about an element without cluttering the interface. They are especially useful in complex applications where users might need extra guidance or clarification, such as in form fields, icon buttons, or data visualization dashboards. For instance, in a data-rich environment like a financial app, tooltips can offer explanations of complex metrics or icons.

Lumina Design

Tooltip

Code