Explore UI Components
Browse, filter, and discover frontend UI components and animations. Use the filters below to narrow down by category and tags.
Showing 39 components
Hamburger Menu
An icon composed of three stacked horizontal lines that expands to reveal a navigation menu when clicked. Commonly used in mobile interfaces to save space.
Navbar
A horizontal bar typically placed at the top of a page containing navigation links, site branding, and sometimes search functionality.
Stepper
A component that displays progress through a sequence of logical and numbered steps, often used for multi-step forms or checkout processes.
Tabs
Interactive elements styled as physical tabs allowing users to switch between different content views within the same context.
Breadcrumbs
A secondary navigation showing the user's current location within the site hierarchy and the path taken to reach it.
Pagination
A navigation component that provides a series of links to navigate through multiple pages of content, typically used for search results, tables, or content lists.
Toolbar
A container for a set of related actions or controls, providing quick access to frequently used functions.
Button
A clickable UI element that triggers an action when activated. Serves as a primary interaction point for user input.
Slider
An interactive control allowing users to select a value or range by dragging a handle along a track.
Date Picker
A specialized input control that allows users to select a date from a calendar interface.
Text Input
A field that allows users to enter and edit text. Can be single-line or multi-line (textarea).
Quantity Stepper
A quantity input control that allows users to increment or decrement a value with plus and minus buttons.
Dropdown Select
A form control that presents a menu of options when clicked. Allows users to make a single selection from multiple choices.
Toggle Switch
A visual control that allows users to toggle between two states, typically on/off, with a sliding action.
Color Picker
A specialized input control allowing users to select a color value visually. Provides various interfaces for color selection including sliders, swatches, and hex input.
File Upload
A component for selecting and uploading files, supporting both button-based selection and drag-and-drop functionality.
Search Field
A specialized input component designed for search functionality, featuring a search icon, clear button, and optimized for search interactions.
Rating
An interactive component that allows users to provide a rating on a numeric scale, often visualized as stars, hearts, or other symbols.
Alert
A contextual message that provides important information to the user. Typically used to highlight success, errors, warnings, or information.
Badge
A small visual indicator used to highlight information, counts, or status.
Popover
A floating content panel that appears when a user interacts with a trigger element. Used for contextual information, controls, or detailed content.
Banner
A full-width message that appears at the top, bottom, or within a page to communicate important information or announcements.
Toast Notification
A small, non-intrusive notification that appears temporarily, typically at the edge of the interface, to provide feedback for an action.
Progress Bar
A visual indicator that displays the completion progress of an operation, task, or workflow.
Tooltip
A small informational popup that appears when hovering over or focusing on an element, providing additional context or explanation.
Modal Dialog
A window that appears on top of the main content, requiring user interaction before returning to the parent application.
Card
A flexible container that groups related content and actions, often with visual separation from surrounding elements.
Bento Grid
A modern layout structure that arranges content in an asymmetrical grid pattern, similar to Japanese bento lunch boxes. Used for dashboards, homepages, and content showcases.
Accordion
A vertically stacked list of items where each item can be expanded or collapsed to reveal or hide content associated with that item.
Carousel
A slideshow component for cycling through elements, images or slides of content.
Divider
A visual separation element used to divide content into sections or groups, typically represented as a horizontal or vertical line.
Table
A structured grid of rows and columns for organizing and displaying structured data.
Timeline
A visual representation of a sequence of events or milestones arranged chronologically, used to display historical events, project phases, or processes.
Hover Effect
Visual changes triggered when a user's mouse cursor hovers over an interactive element, providing feedback and indicating interactivity.
Fade Transition
A smooth transition where an element gradually changes opacity to appear or disappear.
Pulse Animation
A visual effect where an element rhythmically expands and contracts to draw attention.
Scroll Animation
Animations triggered as elements enter the viewport during scrolling, creating a dynamic and engaging user experience.
Parallax Effect
Creates an illusion of depth by moving background and foreground layers at different speeds during scrolling.
Card Flip
A 3D animation effect where a card rotates to reveal content on its reverse side, creating the illusion of flipping a physical card.