API Reference Sutra UI v#0.3.0

Sutra UI - We define the rules, so you don't have to.

A vertically stacked set of interactive headings that reveal content.

Displays a callout for user attention.

An image element with a fallback for representing the user.

A small status indicator component.

Displays the path to the current resource using a hierarchy of links.

A versatile button component with multiple variants, sizes, and navigation support.

Displays a card with header, content, and footer.

A carousel component using scroll-snap for smooth navigation.

A control that allows the user to toggle between checked and not checked.

A command palette component for fast keyboard-driven navigation and actions.

A modal dialog component using div-based overlay (screen share compatible).

A collapsible drawer navigation component with mobile toggle support.

A dropdown menu component that displays a list of actions or options.

Display empty states with icons, titles, descriptions, and actions.

A filter bar component for index pages with consistent styling and layout.

Flash notification component for displaying temporary messages.

A header component for page titles and actions.

Renders form input elements with label, description, and error handling.

Display additional information or actions attached to an input or textarea.

A versatile list item component for displaying content with icons, avatars, and actions.

Displays keyboard input that triggers an action.

Renders an accessible label for form controls.

A searchable selection component with single, tags, and quick_tags modes.

A reusable loading state component for displaying loading indicators.

A responsive navigation pills component that displays pills on desktop and converts to a dropdown on mobile.

Pagination with page navigation, next and previous links.

A floating content panel that appears on click or keyboard interaction.

Displays an indicator showing the completion progress of a task.

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

A dual-handle range slider for selecting a range of values.

A custom select component with search/filter capabilities (combobox pattern).

Simple form wrapper component for non-LiveView forms with automatic styling.

Used to show a placeholder while content is loading.

An input where the user selects a value from within a given range.

A loading indicator component.

A toggle control that allows the user to switch between checked and not checked.

Visual tab navigation component for server-side routed tabs.

Responsive table components for displaying structured data.

A tabbed interface component for organizing content into separate views.

Displays a multi-line text input field.

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

Toast notification component for displaying temporary messages.

A popup that displays information related to an element when hovered.

Installs Sutra UI into your Phoenix application.

Runs format, compile (warnings-as-errors), and test checks.