Layout
Section titled “Layout”How do I organize the interface?
Widget sizing container
Grid-based widget sizing and positioning
Custom filters for different screen displays
Displays an alert for user attention.
Displays a callout for user attention.
Displays a card with header, content, and footer.
An interactive component which expands/collapses a panel.
A flip component that supports automatic, manual (gesture-based), and programmatic flipping.
A versatile component for displaying content with media, title, description, and actions.
Augments native scroll functionality for custom, cross-browser styling.
Visually or semantically separates content.
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
A draggable, resizable window inside a container.
Interaction
Section titled “Interaction”How does the user interact with it?
A modal dialog that interrupts the user with important content and expects a response.
Displays a file or image attachment with media, metadata, upload state, and actions.
Displays a button or a component that looks like a button.
A control that allows the user to toggle between checked and not checked.
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
For sighted users to preview content available behind a link.
A text input component for forms and user data entry with built-in styling and accessibility features.
Add addons, buttons, and helper content to inputs.
Renders a virtual keyboard
Renders an accessible label associated with controls.
Displays rich content in a portal, triggered by a button.
A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Star rating display for a numeric score.
Content display/hide animation
Displays a list of options for the user to pick from—triggered by a button.
Interactive slider inspired by the classic iPhone “slide to unlock” gesture.
An input where the user selects a value from within a given range.
An indicator that can be used to show a loading state.
A control that allows the user to toggle between on and off.
Displays a form textarea or a component that looks like a textarea.
Navigation
Section titled “Navigation”How does the user move through it?
A vertically stacked set of interactive headings that each reveal a section of content.
Displays the path to the current resource using a hierarchy of links.
A carousel with motion and swipe built using Embla.
Command menu for search and quick actions.
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
A collection of links for navigating websites.
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Wheel List Selection menu
Content
Section titled “Content”What does the interface show?
Animate your svg icons using motion
An image element with a fallback for representing the user.
Displays a badge or a component that looks like a badge.
A minimalist loading animation using vertical bars with staggered opacity transitions.
A calendar component that allows users to select a date or a range of dates.
Displays a country flag.
Displays a dialogue box with animated text and portrait.
Render Unicode emoji inline with text.
A markdown renderer designed with support for streaming content.
An extension of the avatar component with more details on the individual. Good for blog posts etc.
Gradient list to display scores
Use to show a placeholder while content is loading.
A background image renderer for single sprite-sheets
A canvas renderer for single sprite-sheets
A responsive table component.
Marquee animated text for long texts on tiny screens
Text stroke effects to recreate retro style game indicators
A timeline component that displays events with customizable orientation, alignment, and spacing. A visual representation of events in chronological order.
Ruler-style timeline for plotting milestones along a horizontal or vertical axis.
A Icon Component to display the Weather