High-quality web components

Elix is an open collection of high-quality web components for common user interface patterns such as lists, menus, dialogs, carousels, and so on. The modular nature of web components let you easily incorporate them into your web apps, and their standard definition ensures good results across all mainstream browsers. Read the Elix project vision.

Elix on GitHub

Elements

AlertDialog
Asks a single question the user can answer with a set of choices
AutosizeTextarea
Text area that grows to accommodate its content
Carousel
Carousel with a sliding effect and navigation controls
CarouselSlideshow
Slideshow with carousel controls
CarouselWithThumbnails
Carousel showing a thumbnail for each image
CenteredStrip
Horizontal strip of items with selected item centered
CenteredStripHighlight
Centered strip showing selected item with a highlight color
CenteredStripOpacity
Centered strip showing unselected items with partial opacity
Dialog
Basic modal overlay
Drawer
Modal panel that slides in from the side of the page
DropdownList
Shows a single choice made from a pop-up list of choices
ExpandablePanel
Expands/collapses in place with an animated transition
HamburgerMenuButton
Button that invokes a mobile navigation menu
ListBox
Single-selection list box
ModalBackdrop
Semi-transparent backdrop for a modal overlay
Menu
A menu of choices or commands
MenuButton
A button that invokes a menu
MenuItem
A choice in a menu
MenuSeparator
Inactive item that helps group related menu items
Modes
Shows a single panel at a time
Overlay
An element that appears over other page elements
Popup
Lightweight form of modeless overlay
PopupSource
Positions a popup with respect to a source element
ReactiveElement
General-purpose component base class
Slideshow
Slideshow with a simple crossfade transition
SlideshowWithPlayControls
Slideshow with buttons for controlling playback
SlidingPages
Primitive carousel supporting multiple input modes but no UI of its own
SlidingStage
Slides between selected items on a horizontal axis
TabButton
Generic tab button with a text label
Tabs
Basic tabs structure for navigation and configuration
TabStrip
Strip of tab buttons
Toast
Lightweight popup intended to display a short, non-critical message
WrappedStandardElement
Wraps a standard HTML element so its behavior can be extended