API Reference Sutra UI v#0.4.0

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

A vertically stacked set of interactive headings that reveal content.

Shows visible progress for agent work, jobs, and multi-step background tasks.

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.

A monthly calendar grid for date selection.

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 right-click and keyboard-accessible context menu.

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 drag-and-drop file upload component built on Phoenix LiveView uploads.

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.

A rich preview card that appears on hover or keyboard focus.

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

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

One-time password and PIN input with individual digit slots.

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 CSS-only scrolling banner for announcements, logo strips, and repeating inline content.

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.

Renders model responses as plain text or streamed Markdown.

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

Visually or semantically separates content with a themed one-pixel rule.

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 progress indicator for multi-step workflows.

A composable wizard shell for multi-step forms and flows.

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

Routed tab-style navigation with responsive mobile collapse.

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.

A vertical list of chronological events with dot markers and connector lines.

Toast notification component for displaying temporary messages.

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

A hierarchical tree for nested navigation, file browsers, or category structures.

Installs Sutra UI into your Phoenix application.

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