Components

Browse all 26 available Alpine.js components. Each one is free to use and comes with copy-paste ready code.

Accordion

Toggle between content exclusively. Perfect for FAQs.

Banner

A lightweight, configurable component for displaying important messages or alerts to users.

Color Picker

A component that allows users to select a color from a palette or input a custom color value.

Command Palette

Provide users with quick access to commands and actions within an application.

Copy to Clipboard

new

A component that allows users to copy text to the clipboard.

Countdown

A customizable countdown timer for events or deadlines.

Dark Mode Toggle

new

A component that allows users to toggle between light and dark mode.

Dropdown

A customizable menu that allows users to select an option from a list.

Image Gallery

new

A grid-based image gallery with a fullscreen lightbox for viewing images.

Image Slider

Display a sequence of images with navigation controls and optional autoplay functionality.

Marquee

A component that creates an infinite scrolling animation for any type of content.

Modal

An element that displays content on top of the current page.

Notification

A small stackable element that presents information on top of the main content.

Offcanvas

A sleek, hidden sidebar that slides into view from the edge of the screen.

Popover

A small overlay window that appears on top of the main content.

Password Strength

A component that displays the strength of a password.

Pricing Switch

A switch that lets you toggle between monthly and annual pricing.

Progress Bar

A visual indicator that displays the completion status of a task or process.

Rating

A component that allows users to rate an item with stars.

Select Menu

Provide users with a more flexible and visually appealing way to choose from a list of options.

Side Navigation

A component that allows users to navigate through a side navigation menu.

Skeleton Loader

A component that displays a loading skeleton while content is being loaded.

Table Sorting

A component that allows users to sort a table by clicking on the table headers.

Tabs

Navigate between different sections or views within the same page.

Tooltip

A small element that provides additional information without cluttering the main interface.

Two Factor

Authentication form with six-digit code input.