Components
Every component Atlas ships, with its variants rendered live and the Blade that produces each one.
Typography
Description
A small, muted block of supporting text. No props — it exists so secondary copy is styled the same everywhere.
3 examples
Heading
Headings that keep the document outline and the type scale independent, and throw rather than render something wrong.
5 examples
List
Bulleted, numbered, icon and inline lists, built either from an array of strings or from item children.
5 examples
Text link
An inline anchor with an animated underline and optional icons that slide outwards on hover.
5 examples
Actions
Badge
Short status labels in three sizes and weights. Renders as a span, or as a button or link when it needs to be actionable.
5 examples
Button
Buttons and link buttons, with sizes, variants, colors and icons that follow the attributes you set.
7 examples
Pill filter
A toggleable filter chip. Outlined when off, filled with a remove icon when on.
6 examples
Forms
Field
The wrapper that binds a label, a control and an error message into one form row.
5 examples
Checkbox
A checkbox with a styled indicator, an optional description and a card-like grouped layout.
5 examples
Error
The message that explains why a control was rejected, with a warning icon in front of it.
4 examples
Fieldset
A vertical stack that gathers related fields into one group.
3 examples
Input
A single-line text control, styled for every input type the browser offers.
5 examples
Label
The name of a form control, with an optional required marker.
4 examples
Legend
The heading that names a fieldset.
3 examples
Radio
A native radio button with a styled indicator, plus a group wrapper for the set it belongs to.
4 examples
Select
A native select styled with Atlas input tokens, with a disabled placeholder option built in.
5 examples
Textarea
A multi-line text control that shares the input styling, with a resize handle you can lock down.
5 examples
Toggle
A switch that turns something on or off immediately, implementing the full ARIA switch pattern in Alpine over a hidden checkbox.
4 examples
Navigation
Accordion
Stacked sections that expand and collapse, animated with Alpine's x-collapse plugin.
4 examples
Hamburger
An animated menu button wrapping hamburgers.css, with seventeen animations and an open state you can bind with x-model.
5 examples
Tabs
Panels that share one region, switched by a list of tabs. State lives in Alpine on the root and is matched by value.
4 examples
Content
Card
A linked content card: cropped image, badges, heading, meta list and subtitle, with the whole card acting as one link.
6 examples
Contact list
An address block of email and telephone links, each behind its own icon.
4 examples
Employee card
A person: portrait, name, role, and the ways to reach them. Contact details can sit under the name or appear on hover over the portrait.
5 examples
Social list
A row of brand icons linking out to social profiles, labelled for screen readers.
3 examples
Media
Icon
Renders an Atlas component icon or a Font Awesome icon, inline and sized against the surrounding text.
6 examples
Image
One img tag, rendered by whichever driver fits the source: a URL, a WordPress attachment id, or nothing at all.
4 examples
Swiper
A carousel built on Swiper 14: a track of slides with keyboard support, arrows and pagination, configured entirely from Blade props.
7 examples
Video
A self-hosted video player and an iframe wrapper for embedded ones, both cropped to a fixed aspect ratio.
6 examples