Components

Name: Nayan UI
Author: Nayan UI

Components are reusable building blocks of a user interface that encapsulate a specific piece of functionality or UI design. Each component can represent a distinct part of the application, such as buttons, forms, modals, or navigation bars. Components help organize and structure code, making it easier to manage, maintain, and scale applications by allowing developers to reuse consistent elements across different parts of the project.

54
Components, each with a live demo and prop table

AccordionAn Accordion component is a UI element that allows users to expand and collapse sections of content. It is commonly used to organize information in a compact and accessible manner, displaying only the headers by default and revealing the associated content when clicked. This helps improve the readability of complex or lengthy information by reducing clutter on the page.
AlertAn Alert component is a UI element used to display important messages or notifications to users. It can convey different types of information such as success, warning, error, or informational messages, typically styled with distinct colors and icons to highlight the message's significance. Alerts are often used to grab the user's attention and provide immediate feedback on actions or events.
AvatarAn Avatar component shows a person or entity as a small image, with initials or an icon standing in when there is no picture to show. Avatars identify the author of a comment, the owner of a file or the member of a team, in a shape that stays recognisable at any size.
Avatar GroupAn Avatar Group stacks several avatars into one overlapping row and collapses the rest into a count. It answers "who is on this?" in the space of a single line, and is the usual way to show the members of a team, the people on a call or the collaborators on a document.
BadgeA Badge component is a small UI element used to display a count, status, or label associated with another element, such as an icon or button. Badges are commonly used to highlight notifications, messages, or any relevant information in a compact and visually distinct way, often appearing as small circles or rectangles with numbers or text.
BreadcrumbsA Breadcrumbs component shows where the current page sits in a hierarchy and gives a way back up it. Each entry but the last is a link to an ancestor, which makes a deep section navigable without reaching for the browser's back button.
ButtonA Button component is a fundamental UI element that allows users to trigger actions or events, such as submitting a form, opening a dialog, or navigating to another page. Buttons are interactive and typically styled to stand out, making it easy for users to identify and interact with them. They can come in various types, such as primary, secondary, or disabled, depending on their purpose or state.
Button GroupA Button Group component is a UI element that groups multiple buttons together, allowing users to select from a set of related actions or options. It helps organize buttons in a compact, cohesive layout, typically displayed in a horizontal or vertical row. Button Groups are useful for actions that are closely related or mutually exclusive, providing a clean and structured way to present multiple controls.
CalendarA Calendar component lays a month out as a grid and lets a date be picked from it. Unlike a date picker it is always open, which suits a booking screen, an availability view or anywhere the surrounding dates are part of the decision.
CardA Card component is a versatile UI element used to display content in a structured and visually appealing way. It typically contains related information, such as text, images, buttons, and other elements, within a bordered or shadowed container. Cards are often used for presenting individual items, like products, articles, or profiles, making the content easy to scan and interact with.
CheckboxA Checkbox component is a UI element that allows users to select or deselect one or more options from a list. It typically appears as a small square that can be checked (ticked) or unchecked. Checkboxes are often used in forms, settings, or filters where multiple selections are needed, and they provide a clear, binary choice for users.
Checkbox GroupA Checkbox Group ties several checkboxes to one value, so a set of independent choices is read and written as a single array. It keeps the group's label, its layout and its disabled state in one place instead of spread across the individual boxes.
ChipA Chip is a compact label for a piece of metadata — a status, a version, a category. It carries a colour and a variant so several chips in a row can be told apart at a glance, and it is deliberately quieter than a badge used for counts.
Confirm AlertA Confirm Alert component is a UI element that prompts users to confirm or cancel an action before proceeding. It typically displays a message asking for confirmation, along with "Confirm" and "Cancel" buttons, ensuring that the user consciously approves or rejects the action, often used for critical tasks like deletions or irreversible changes.
Date FieldA Date Field takes a date typed in segments — day, month, year — with no calendar attached. Each segment validates on its own and can be stepped with the arrow keys, which makes it faster than a picker for a date somebody already knows.
Date PickerA Date Picker component is a UI element that allows users to select a date from a calendar popup. It provides an intuitive interface for choosing dates with support for date ranges, min/max constraints, and various granularity levels.
Date Range PickerA Date Range Picker takes a start and an end date in one control, either typed into its segments or chosen from the calendar it opens. Reporting periods, stays and filters all need two dates that make sense together, which is what a range picker enforces.
DialogA Dialog component is a UI element that displays a pop-up window over the main content to capture user attention or request input. It is often used for tasks like confirmations, alerts, forms, or other interactions that require user feedback before proceeding. Dialogs can include buttons like "OK" or "Cancel" to confirm or dismiss actions, and typically block interaction with the underlying content until closed.
DisclosureA Disclosure is one collapsible section: a heading that opens and closes the content under it. It is the single-section counterpart to an accordion, for hiding detail that most readers will not need without sending them to another page for it.
DividerA Divider component is a simple UI element used to separate content within a layout, creating visual distinction between sections. It helps enhance the organization and readability of the interface by providing clear boundaries between different elements, such as text blocks, images, or other components. Dividers can be styled in various ways (solid, dashed, or dotted) and can vary in thickness and color to match the overall design of the application.
Empty StateAn Empty State fills a list, table or panel that has nothing in it yet, with a title, an explanation and the action that would change that. A blank area reads as a broken screen; an empty state reads as a screen waiting for its first item.
Infinite ScrollAn Infinite Scroll component is a user interface feature that automatically loads and displays additional content as the user scrolls down a page. Instead of traditional pagination, this component creates a seamless browsing experience by continuously appending new items, such as images or articles, when the user reaches the bottom of the viewport. This enhances user engagement and keeps the content flow uninterrupted, making it ideal for applications like social media feeds, product galleries, and news websites.
InputAn Input component is a user interface element that allows users to enter data, such as text, numbers, or selections. It typically includes various types, such as text fields, checkboxes, radio buttons, and dropdowns, providing flexibility for different data types. Input components are essential for forms and interactive applications, enabling users to submit information effectively and efficiently.
Input OTPAn Input OTP takes a one-time code as a row of single-character slots, moving focus along as the code is typed or pasted. It is the control used for two-factor sign-in, email verification and anything else that arrives as a short numeric code.
Keyboard KeyA Keyboard Key renders a key or a shortcut the way a keyboard shows it, so instructions can name a key without quoting it as prose. It is the small styled block you see in a shortcut list, a tooltip or an empty state that suggests a command.
LinkA Link component is a UI element that allows users to navigate from one page or section to another within a web application or website. Typically styled as underlined text or buttons, links provide a clear indication of interactivity. They can point to internal or external resources and often include features like hover effects or icons to enhance user experience and accessibility.
LinkifyA Linkify component is a UI tool that automatically detects and converts plain text URLs within a content area into clickable hyperlinks. This enhances user experience by allowing easy access to external resources without the need for manual formatting. Linkify typically recognizes various URL formats and ensures that they are presented in a visually distinct manner, making navigation seamless and intuitive.
List BoxA List Box shows a set of options as a list that can be selected with the mouse or the keyboard, one at a time or several at once. Unlike a select it stays open, which suits a picker built into a panel, a file list or a settings column.
LoadingA Loading component is a UI element that indicates to users that a process is ongoing, such as data fetching, page loading, or background tasks. It typically features visual indicators like spinners, progress bars, or animated icons to convey that the application is busy and to enhance the user experience by preventing confusion or frustration during waiting periods.
Dropdown MenuA Dropdown Menu component is a UI element that allows users to select an option from a list that appears when the user clicks or hovers over a button or link. This component helps save space on the interface by displaying additional options only when needed. Dropdown menus are commonly used for navigation, settings, or forms, enabling users to choose from multiple choices in a clean and organized manner.
MeterA Meter component is a UI element that visually represents a scalar measurement within a known range, such as disk usage, battery level, or CPU load. It provides an at-a-glance indicator of how a value compares to its min and max thresholds.
Number FieldA Number Field component is a UI element that allows users to enter and adjust numeric values using increment and decrement buttons or direct input. It supports features like min/max constraints, step values, and number formatting.
PaginationA Pagination component walks through a result set page by page, showing the current page, its neighbours and the ends of the range with an ellipsis in between. It keeps a long list navigable without loading all of it at once.
PopoverA Popover component is a UI element that displays additional information or actions when users interact with a specific trigger, such as a button or link. It typically appears as a small overlay or tooltip that provides context, tips, or options without navigating away from the current page. Popovers enhance user experience by offering relevant content in a concise format while maintaining focus on the main interface.
ProgressA Progress component visually indicates the completion status of a task or process. It typically consists of a progress bar that fills up as the task progresses, providing users with a clear and immediate understanding of how much of the task is completed and how much remains. This component is commonly used in forms, uploads, downloads, and loading states to enhance user experience by managing expectations and keeping users informed.
Progress CircleA Progress Circle shows how far along a task is as a ring rather than a bar, which fits a tile, a button or a dense row where a full-width bar would not. Left without a value it spins as an indeterminate indicator.
Radio GroupA Radio Group component is a UI element that allows users to select one option from a set of mutually exclusive choices. It typically consists of multiple radio buttons, where only one button can be selected at a time. Radio groups are commonly used in forms to gather user preferences, ensuring a clear and organized way to present options for selection. They enhance user experience by providing a straightforward interface for making single-choice decisions.
Scroll ShadowA Scroll Shadow fades the edges of a scrollable area while there is more content beyond them, so a cut-off list looks scrollable instead of finished. The shadows appear and disappear as the content is scrolled, on either axis.
SelectA Select or ComboBox component is a UI element that allows users to choose one or more options from a dropdown list. It typically displays a default value or prompt, and when clicked, it expands to show a list of available choices. Users can either select an option from the list or, in the case of a ComboBox, input custom values. This component is ideal for conserving space in forms and making it easy for users to make selections quickly.
Search FieldA Search Field component is a UI element that provides a text input specifically designed for search functionality. It includes a built-in search icon and clear button, allowing users to quickly enter, modify, and clear search queries.
SheetA Sheet component is a UI element that presents content in a sliding panel, often overlaying the main application interface. It is typically used for displaying additional information, forms, or actions without navigating away from the current view. Sheets can be swiped or tapped to expand or collapse, providing a clean and efficient way to manage user interactions and maintain focus on the main content.
SkeletonA Skeleton component is a placeholder UI element that represents the layout of content before it loads. It typically features a grey or light-colored shape mimicking the structure of the actual content (such as text blocks, images, or buttons) to indicate that loading is in progress. Skeleton components enhance user experience by providing a visual cue that content is being fetched, reducing perceived loading times and preventing layout shifts.
SliderA Slider component is a UI element that allows users to select a value from a range by sliding a handle along a track. It provides an interactive way to adjust settings, such as volume, brightness, or other continuous values, with smooth transitions. Sliders can be single or multi-valued, enabling users to make precise selections visually, enhancing the overall user experience.
SwitchA Switch component is a UI element that allows users to toggle between two states, typically representing an on/off or enabled/disabled choice. It is visually represented as a sliding toggle or checkbox and provides immediate feedback when the user interacts with it. Switch components are commonly used for settings, preferences, and feature activations in applications, enhancing user experience by simplifying the selection process.
Switch GroupA Switch Group collects several switches under one label and one value, for a screen of settings that are each on or off. Every row names its setting and carries its own switch, and the group reports the set that is currently on.
TableA Table component is a structured UI element that organizes and displays data in rows and columns, making it easy to read and compare information. Tables can include features like sorting, filtering, pagination, and inline editing, allowing users to interact with the data efficiently. They are commonly used to present datasets, such as user information, product listings, or any structured content that benefits from a grid-like layout.
Tag GroupA Tag Group component is a UI element that displays a collection of tags or labels, allowing users to select, filter, or remove tags. It supports multiple selection modes and removable tags, making it ideal for categorization, filtering, and labeling interfaces.
TabsA Tabs component is a UI element that allows users to switch between different views or sections of content within the same interface. Organized as a series of labeled tabs, this component enhances navigation by displaying only one section at a time, helping to reduce clutter and improve user experience. Users can easily access various related content or features by clicking on the respective tabs, making it ideal for dashboards, settings pages, or any multi-section layout.
TextareaA Textarea component is an input field that allows users to enter multi-line text. It provides a larger area for text input compared to a standard text input field, making it ideal for comments, feedback, or any scenario where users need to provide detailed information. Textareas can be resized, styled, and configured to support features like character limits, placeholders, and auto-resizing to enhance user experience.
Time FieldA Time Field takes a time typed in segments — hour, minute, and the period where the locale uses one. It reads and writes a time value rather than a string, so a schedule or a reminder gets a value it can compare and store.
ToastA Toast component is a transient notification that appears on the screen to provide feedback or information to users without interrupting their workflow. Typically displayed at the top or bottom of the screen, toasts are brief messages that automatically disappear after a short duration. They are commonly used to inform users about actions such as successful submissions, updates, or alerts, enhancing the overall user experience with minimal disruption.
Toggle ButtonA Toggle Button is a button that stays pressed, for a setting that belongs on a toolbar rather than in a form — bold, italic, mute, pin. It reports its state through its appearance, so a row of them reads as the current formatting.
ToolbarA Toolbar groups the controls that act on the thing below it and makes them one stop on the keyboard: arrow keys move between the controls, so a row of buttons is reached with one Tab rather than several. It can be laid out in a row or a column, joined or spaced.
TooltipA Tooltip component is a small, informative pop-up that appears when a user hovers over or focuses on an element, such as a button or icon. It provides additional context or explanations about that element without cluttering the interface. Tooltips enhance user experience by offering helpful hints, instructions, or details, ensuring that information is accessible without overwhelming the layout.