Modules
Accessible, themeable Phoenix LiveView components inspired by Radix UI Themes.
Entrypoint for all EssenceUI components.
Themed alert dialog with overlay, content, and action subcomponents.
Themed aspect ratio wrapper that preserves layout proportions.
Wraps EssenceUI.Primitives.AspectRatio.
The Avatar component displays a user profile picture, initials, or fallback icon.
A Badge component that displays a small piece of information or status with support for various sizes, variants, colors, and styling options.
Themed block quotation.
The Box component is a low-level layout primitive for building UI structure.
Themed button component with sizes, variants, and accent colors.
Callout component for displaying informational messages with icons.
A Card component that groups related content and actions with support for various sizes, variants, and styling options. Cards are container elements that provide visual separation and hierarchy for content sections.
A simple, accessible Checkbox component for toggling between checked, unchecked, and indeterminate states with support for various sizes, variants, and colors. The checkbox provides visual feedback for user selections and can be used in forms, settings panels, and interactive lists.
A checkbox group component that displays checkboxes as interactive cards, with support for various sizes, variants, and colors.
A group of checkboxes with support for various sizes, variants,
and colors. Wraps EssenceUI.Primitives.CheckboxGroup.
The Code component marks text to signify a short fragment of computer code.
Module for Container component.
Themed context menu with trigger, content, and item subcomponents.
A component for displaying a list of key-value pairs.
Themed dialog with overlay, content, and compound subcomponents.
Themed dropdown menu with trigger, content, and item subcomponents.
Themed emphasis text.
The Flex component is a low-level layout primitive for flexbox layouts.
The Grid component is a low-level layout primitive for building grid layouts.
Themed heading with size and weight options.
A HoverCard component for sighted users to preview content available behind a link.
Themed icon button with sizes, variants, and accent colors.
Keyboard key label for shortcuts and key hints.
Themed link with size, weight, and underline options.
A Popover component for displaying rich floating content, triggered by a button.
A Progress component that displays the completion progress of a task.
Themed inline quotation.
A simple, accessible Radio component for single selection within a group with support for various sizes, variants,
and colors. This is a styled native <input type="radio">
(not a wrap of Primitives.RadioGroup — use radio_group for the compound API).
A radio group component that displays radios as interactive cards, with support for various sizes, variants, and colors.
Themed radio group with sizes, variants, and accent colors.
A component for custom scrollbars.
Themed section container with layout and spacing props.
A SegmentedControl for selecting one option from a group of related options.
Wraps EssenceUI.Primitives.ToggleGroup (single, non-deselectable), matching
Radix Themes.
Themed select with trigger, content, and item subcomponents.
A Separator component that renders a visual divider between content sections.
A loading placeholder component that replaces content with a same-shape placeholder.
A Slider component for selecting values from a range.
A Spinner component that displays a loading animation.
Themed strong text.
A Switch component for toggling between on/off states with support for various sizes, variants, and colors. The switch provides visual feedback for boolean state changes and can be used in forms, settings panels, and interactive controls.
A set of links for navigating between different views.
A semantic table component for presenting tabular data.
A set of content sections to be displayed one at a time.
The Text component is a foundational text primitive.
Themed text area with sizes, variants, and accent colors.
Themed text field with sizes, variants, and accent colors.
Theme root for Essence UI — applies accent, gray, radius, scaling, and appearance.
Dev-oriented theme controls (accent, gray, appearance, radius, scaling).
A Tooltip component that displays contextual information when hovering or focusing on an element.
Select primitive for choosing a value from a list of options.
Prop definition for as_child (composes the component into its immediate child instead of rendering its own HTML element).
Color prop definitions for Box and other components. Theme color props for Essence UI.
Prop definitions for gap, column_gap, and row_gap utilities (for flex/grid layouts). Theme gap props for flex and grid layouts.
Height prop definitions for Box and other components. Theme spacing props for Essence UI.
Prop definition for high_contrast (increases color contrast with the background).
Layout prop definitions for Box, Flex, Grid, and other layout components. Theme layout props for Essence UI.
Prop definition for trim (leading trim for text).
Margin prop definitions for Box and other components. Theme spacing props for Essence UI.
Padding prop definitions for Box and other components. Theme spacing props for Essence UI.
Radius prop definitions for Box, Flex, and other layout components. Theme radius props for Essence UI.
Prop definition for align (text alignment).
Prop definition for wrap (text wrapping).
Prop definition for truncate (truncate text with ellipsis).
Prop definition for weight (font weight).
Width prop definitions for Box and other components. Theme spacing props for Essence UI.
A wrapper for icons that provides a label for screen readers.
A utility for applying negative margins to elements so they "bleed" into their container.
A component that resets the styles of its children.
A component for prop composition.
Hides content from the screen but keeps it accessible to screen readers.