Components
Data display
Accordion
The Accordion component is a list of expandable items that allow users to reveal or hide content by clicking on headers. It helps keep interfaces clean and organized by displaying information in collapsible sections.
Avatar
The Avatar component displays a user's profile picture or initials in a circular or square format. It helps create a personalized and recognizable interface element, representing users visually across different parts of the application.
Badge
The Badge component displays small, supplementary information such as notifications, status indicators, or counts. It helps draw attention to important elements and provides users with context at a glance.
Card
The Card component is a versatile container used to group related information in a visually distinct way. It often includes elements like a header, body, and footer, providing a cohesive layout for displaying content such as text, images, and actions. Cards enhance the user experience by organizing information into manageable sections.
Swiper
The Swiper component is an interactive UI element that allows users to navigate through a series of content panels or images by swiping left or right. It provides a smooth and responsive experience for browsing content, making it ideal for image galleries, slideshows, and mobile interfaces. This component enhances user engagement by enabling intuitive and fluid navigation.
Table
The Table component is a structured layout element used to display data in rows and columns. It provides a clear and organized way to present large amounts of information, supporting features like sorting, filtering, and pagination. This component is essential for applications that require the display of tabular data, enhancing readability and usability.
Tag
The Tag component is a small, interactive UI element used to label, categorize, or filter content. It can display text or icons and often supports actions like deletion or selection. Tags enhance user experience by providing a clear and concise way to organize information, highlight key attributes, or manage items dynamically.
Feedback
Alert
The Alert component is used to provide users with important messages or feedback. It ensures that critical information is conveyed in a clear and visually distinct manner. This component can be customized to fit various contexts and uses within the application.
Toast
The Toast component is a transient, non-blocking notification that appears briefly to provide feedback to the user. It is typically used to display messages such as success, error, warning, or informational alerts. Toasts appear at a designated area of the screen, often at the bottom or top, and automatically disappear after a few seconds, ensuring a smooth and unobtrusive user experience.
Layout
AspectRatio
The Aspect Ratio component ensures that elements maintain a consistent width-to-height ratio across different screen sizes. It helps keep interfaces visually balanced and prevents distortion of content by preserving the specified aspect ratio.
Box
The Box component is the most basic component of Welcome UI — all other components make use of it for styling. By default, it’s a div element. It provides a flexible and consistent foundation for building and styling other UI elements, ensuring uniformity and ease of customization across the application.
Flex
The Flex component is a layout element that arranges its child components in a flexible and responsive manner using CSS Flexbox. It simplifies the creation of complex, adaptive layouts by controlling the alignment, distribution, and spacing of items within a container. This component is fundamental for building responsive and cohesive designs that adapt seamlessly to different screen sizes and orientations.
Grid
The Grid component is a layout element that creates a structured, responsive grid system for arranging content in rows and columns. It provides a flexible framework for designing complex layouts, ensuring consistent spacing and alignment. This component is essential for building organized, adaptive interfaces that maintain their structure across various screen sizes and devices.
Loader
The Loader component is a visual indicator used to show that a process or operation is in progress. It provides feedback to users, signaling that the application is busy and they should wait for the task to complete. This component is essential for improving user experience by managing expectations during loading times and ensuring users are informed about ongoing activities.
Shape
The Shape component is a versatile UI element used to create and display geometric shapes such as circles, squares, rectangles, and more with an overflow on child elements.
Slider
The Stack component is a layout element that arranges child components in a vertical or horizontal stack with consistent spacing. It simplifies the creation of flexible and responsive layouts by managing the alignment, spacing, and distribution of its children. This component is ideal for organizing content in a structured and visually appealing manner.
Navigation
Breadcrumb
The Breadcrumb component provides a trail of links to help users understand their location within the application's hierarchy and navigate back to previous pages. It enhances user experience by improving navigation and context within complex interfaces.
DropdownMenu
The Dropdown Menu component is a navigational element that reveals a list of options or actions when triggered by a user interaction, such as clicking a button. It provides a compact and efficient way to present multiple choices without cluttering the interface. Dropdown menus enhance usability by organizing related items in a hierarchical structure, making it easier for users to find and select options.
Link
The Link component is a navigational element that allows users to navigate to different pages or resources within or outside the application. It is typically styled as clickable text or an icon and can include attributes for accessibility and behavior customization. This component is essential for creating an intuitive and interconnected user experience.
Pagination
The Pagination component is a navigational element that divides content into discrete pages, allowing users to navigate through large sets of data or content efficiently. It provides controls to move between pages, such as next, previous, and specific page numbers. This component is essential for enhancing user experience by making large amounts of information more manageable and accessible.
Tabs
The Tabs component is a navigational element that allows users to switch between different views or sections of content within the same page. Each tab is associated with a content panel, and clicking a tab displays the corresponding panel while hiding others. This component helps organize content efficiently and improves user experience by providing easy access to different sections without leaving the current page.
Forms
Button
The Button component is an interactive element used to trigger actions or events within an application. It provides a consistent and accessible way for users to interact with the interface, featuring customizable styles and states (e.g., default, hover, active, disabled).
ButtonGroup
The Button Group component arranges multiple buttons in a horizontal or vertical stack, allowing users to group related actions together. It provides a cohesive and organized way to present multiple buttons, ensuring consistent spacing and alignment.
Checkbox
The Checkbox component allows users to select multiple options from a set of choices. It consists of a small box that, when clicked, toggles between checked and unchecked states. Checkboxes are commonly used in forms and lists to enable users to make multiple selections efficiently.
DatePicker
The Datepicker component is a user interface element that enables users to select dates from a calendar interface. It provides an intuitive way to input dates, offering a dropdown or popup calendar for selecting days, months, and years. Datepickers are essential for forms and applications requiring date inputs, ensuring accurate and user-friendly date selection.
DateTimePicker
The DateTimePicker component is a user interface element that allows users to select both dates and times from a single interface. It provides a calendar view for selecting dates and a dropdown or input fields for specifying times. This component is essential for applications that require precise scheduling or event management, offering a seamless way to input both date and time information.
Field
The Field component is a versatile UI element used to create input areas in forms. It typically includes a label and optional helper text or validation messages. This component ensures consistency and accessibility in form design, providing a structured and user-friendly way to capture user input.
FileDrop
The FileDrop component allows users to upload files by dragging and dropping them into a designated area or by clicking to select files from their device. It simplifies the file upload process with an intuitive, user-friendly interface, providing visual feedback and handling multiple files. This component is ideal for applications that require easy and efficient file uploads, improving overall user experience.
FileUpload
The File Upload component enables users to select and upload files from their device. It supports both drag-and-drop and traditional file selection methods, providing a straightforward way to manage file uploads. This component is essential for applications that require users to submit documents, images, or other file types, ensuring a smooth and efficient upload experience.
Hint
The Hint component provides contextual help or additional information to users, typically displayed as a small tooltip or inline text. It enhances user experience by offering guidance, clarifications, or suggestions without cluttering the main interface. This component is ideal for forms, instructional content, and any area where users might need extra assistance.
InputText
The InputText component is a fundamental UI element that allows users to enter and edit text. It is commonly used in forms, search fields, and data entry interfaces. This component ensures efficient user input handling, offering features like placeholder text, validation, and various input types.
Label
The Label component is a UI element that provides a textual description or identifier for a corresponding form element, such as an input field, checkbox, or radio button. It enhances accessibility and usability by clearly indicating the purpose of the associated form element, ensuring users understand what information is required or what action is to be taken.
PasswordInput
The Password Input component is a specialized input field designed for securely capturing user passwords. It masks the entered text to protect sensitive information from being seen by onlookers. This component often includes additional features such as visibility toggles, strength indicators, and validation rules to enhance security and usability.
Picker
The Picker component is an interactive UI element that allows users to select a value from a predefined set of options. It can be used for various types of selections. This component enhances user experience by providing an intuitive and efficient way to make selections from a limited set of choices.
RadioGroup
The RadioGroup component is a collection of radio buttons that allows users to select one option from a set of mutually exclusive choices. It ensures that only one option can be selected at a time, providing a clear and accessible way to present multiple-choice options. This component is essential for forms and settings where a single selection is required.
RadioTab
The RadioTab component is a collection of radio tab that allows users to select one option from a set of mutually exclusive choices. It ensures that only one option can be selected at a time, providing a clear and accessible way to present multiple-choice options. This component is essential for forms and settings where a single selection is required.
Search
The Search component is an input field designed for querying and retrieving information from a dataset or database. It typically includes features such as autocomplete, suggestions, and filters to enhance the search experience. This component helps users quickly find specific content or data within an application, improving overall usability and efficiency.
Select
The Select component is a dropdown menu that allows users to choose one or multiple options from a list of predefined choices. It provides a compact and efficient way to present a large set of options, enhancing user experience by simplifying selection tasks. This component is commonly used in forms, filters, and settings.
Slider
The Slider component is an interactive UI element that allows users to select a value from a continuous range. It typically consists of a track, thumb (or handle), and optional labels for indicating minimum and maximum values. Sliders are used for settings, adjustments, and filtering where users need to choose from a range of values. They enhance user experience by providing a visual and intuitive way to adjust parameters or make selections.
Textarea
The Textarea component is a multi-line input field that allows users to enter and edit larger blocks of text. It is commonly used in forms and applications where more extensive text input is required, such as comments, descriptions, or messages. This component provides features like resizing, placeholder text, and validation, enhancing the user experience by accommodating detailed text entry.
TimePicker
The Time Picker component is an interactive UI element that allows users to select a specific time from a predefined format. It typically includes options for hours, minutes, and sometimes seconds, often presented in a dropdown or clock interface. This component is essential for applications requiring precise time input, such as scheduling events, setting alarms, or booking appointments, providing a user-friendly and accurate way to select times.
Toggle
The Toggle component is an interactive UI element that allows users to switch between two states, such as on/off or enabled/disabled. It is commonly used for settings and preferences where a binary choice is required. This component provides a clear and intuitive way for users to make selections, enhancing usability and interaction within an application.
Overlay
Drawer
The Drawer component is a versatile UI element that slides in from the edge of the screen to reveal additional content or options without navigating away from the current page. It provides a space-efficient way to present temporary or contextual information, such as menus, settings, or notifications. Drawers enhance user experience by maintaining focus on the main content while offering quick access to supplementary features.
Modal
The Modal component is a versatile UI element that displays content in a layer above the main application interface, requiring user interaction before returning to the main view. It is used for critical information, forms, confirmations, and other interactive tasks. Modals help focus user attention on specific content or actions, improving the overall user experience by preventing background interactions.
Popover
The Popover component is a small overlay that displays additional content or information when triggered by a user action, such as clicking or hovering over an element. It provides contextual information or interactive elements without navigating away from the current page. This component enhances user experience by delivering relevant content in a non-intrusive, easily accessible manner.
Tooltip
The Tooltip component is a small, interactive UI element that provides contextual information or descriptions when users hover over an element or focus on it. It enhances user experience by offering additional guidance or clarifications without cluttering the main interface. Tooltips are commonly used for icons, buttons, links, and other interactive elements to improve accessibility and usability.
Icons
Icons
The Icon component displays a graphical symbol to represent actions, objects, or concepts within the application. It enhances visual communication and user experience by providing intuitive and recognizable imagery. Icons are versatile and can be used in buttons, menus, toolbars, and more, ensuring a consistent and visually appealing interface.
IconFont
The IconFont component uses a font-based approach to display scalable icons. It provides a collection of icons that can be styled with CSS, just like text, ensuring consistency and flexibility in size, color, and other properties. This component is ideal for adding visually appealing and responsive icons to your application, enhancing user interface and experience.