Proa UI

API Reference

Public Proa UI component contracts, common props, variants, feature gates, and data attributes.

Every public struct, enum, and feature flag. If you are starting out, the quickstart gets you rendering first.

Components render through WebRenderSync, compose inside html_sync!, and write stable data-* attributes that CSS, tests, and client handlers can target.

Feature flags

Feature	Public exports
`rsjs`	`ControlledCalendar`, `ControlledCheckbox`, `ControlledInput`, `ControlledRadioGroup`, `ControlledSelect`, `ControlledTabs`, and related option types. Enabled by default.
`markdown`	`Markdown` and `PROSE_CSS`.
`syntax-highlight`	`CodeBlock`, `CodeBlockLang`, and `SYNTAX_THEME_CSS`.
`metadata-export`	Component metadata helpers used by code generation.

Common Contract

Most components follow the same shape:

Contract	Meaning
`children: Option<C>`	Generic child content where `C: WebRenderSync<_, _>`.
`class: Option<&'static str>`	Route-specific class extension appended with `ClassList::add_opt`.
`id: Option<&'static str>`	Stable DOM ID for components that expose an ID.
typed enums	Variant dimensions such as `ButtonSize`, `BadgeVariant`, or `TabsOrientation`.
`data-*` attributes	Public hooks for styling, tests, and hydration.
`Default` or `new()`	Constructors that choose documented defaults.

Use struct literals when you need clarity:

use proa_macros::html_sync;
use crate::components::{Button, ButtonColor, ButtonSize, ButtonVariant};

html_sync! {
    {Button {
        color: Some(ButtonColor::Primary),
        variant: Some(ButtonVariant::Solid),
        size: Some(ButtonSize::Lg),
        children: Some("Create project"),
        ..Button::default()
    }}
}

Use constructor helpers when a component exposes them:

use crate::components::Button;

Button::text("Save")

Foundation

Component	Primary API
`Button<C = ()>`	`size`, `color`, `variant`, `radius`, `disabled`, `loading`, `button_type`, `id`, `class`, `children`, and optional action bindings.
`ButtonGroup<C = ()>`	Group wrapper with orientation, separators, and text parts.
`Badge<C = ()>`	`variant`, `class`, and `children`.
`Card<C = ()>`	`Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter`.
`Separator`	`orientation`, `decorative`, and `class`.
`Skeleton`, `Spinner`, `Kbd`, `Icon`, `Image`	Small display primitives for loading, shortcuts, SVG icons, and media.
`Link<'a, R = ()>`	Router-aware anchor with prefetch, scroll, replace, active-class, and fallback rendering controls.
`Script`	Script tag rendering with `ScriptStrategy`.

Button variants:

Enum	Values
`ButtonSize`	`Sm`, `Md`, `Lg`, `Icon`, `IconSm`, `IconLg`
`ButtonColor`	`Primary`, `Secondary`, `Destructive`
`ButtonVariant`	`Solid`, `Outline`, `Ghost`, `Link`
`ButtonRadius`	`None`, `Sm`, `Md`, `Lg`, `Full`
`ButtonType`	`Button`, `Submit`, `Reset`

Badge variants:

Enum	Values
`BadgeVariant`	`Default`, `Secondary`, `Destructive`, `Outline`, `Success`, `Warning`

Forms

Component	Primary API
`Input`	`size`, `input_type`, `name`, `value`, `placeholder`, `disabled`, validation attributes, `registration`, `class`, and `id`.
`Textarea`	`size`, `name`, `value`, `placeholder`, disabled/required/readonly state, rows/cols, `wrap`, validation attributes, `registration`, `class`, and `id`.
`Select`	`options`, `size`, `name`, `value`, disabled/required state, validation attributes, `registration`, `class`, and `id`.
`Checkbox`, `RadioGroup`, `Switch`, `Toggle`	Typed boolean or single-choice controls with state, size, disabled, and accessibility attributes.
`InputOTP`	Grouped one-time-code slots with grouped separators.
`Field` family	`FieldSet`, `FieldLegend`, `FieldGroup`, `Field`, `FieldLabel`, `FieldContent`, `FieldTitle`, `FieldDescription`, `FieldError`, and `FieldSeparator`.
`Calendar`	Server-rendered calendar with mode and week-start configuration.
`ColorPicker`, `EmojiPicker`	Constrained option pickers with hidden input output and optional `rsjs` behavior.

Common form enums:

Enum	Values
`InputSize`	`Sm`, `Default`, `Lg`
`InputType`	`Text`, `Email`, `Password`, `Number`, `Tel`, `Url`, `Search`, `Date`, `Time`, `DatetimeLocal`, `File`, `Hidden`
`TextareaSize`	`Sm`, `Default`, `Lg`
`TextareaWrap`	`Soft`, `Hard`, `Off`
`SelectSize`	`Sm`, `Default`, `Lg`
`CheckboxState`	`Unchecked`, `Checked`, `Indeterminate`
`RadioGroupOrientation`	`Vertical`, `Horizontal`
`SwitchSize`	`Sm`, `Default`

Input, Textarea, Select, and RadioGroup can accept form registration data from proa_forms. Registered fields emit data-field, data-rules, and data-validate-on attributes for client validation.

use crate::components::{Input, InputType};

Input {
    input_type: InputType::Email,
    name: Some("email"),
    placeholder: Some("[email protected]"),
    required: true,
    ..Input::new()
}

Component	Primary API
`Accordion`, `AccordionCSSOnly`	Disclosure roots, items, triggers, and content. Use CSS-only when no client state is required.
`Collapsible`	Root, trigger, and content parts with `data-state`.
`Tabs`	`Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent` with orientation and activation mode.
`Breadcrumb`	`Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, and `BreadcrumbEllipsis`.
`DropdownMenu`, `Menubar`	Trigger, content, group, item, label, separator, shortcut, sub-menu, checkbox item, and radio item parts.
`Dialog`, `AlertDialog`	Root, trigger, content, title, description, footer, action, cancel, close, and overlay parts.
`Popover`, `Tooltip`	Trigger/content overlays with side, align, and delay options.
`Sheet`, `Drawer`	Dialog-backed and drawer-backed edge overlays with side/direction and size variants.
`Carousel`	Content, item, previous, and next controls.
`Sidebar`	Provider, sidebar, rail, inset, header, content, footer, groups, menu items, menu buttons, actions, badges, skeletons, and nested menu parts.

Common overlay enums:

Enum	Values
`DialogSize`	dialog content size variants.
`SheetSide`	`Top`, `Right`, `Bottom`, `Left`
`DrawerDirection`	drawer edge direction variants.
`DrawerSize`	drawer size variants.
`DropdownMenuSide`, `PopoverSide`, `TooltipSide`	side placement variants.
`DropdownMenuAlign`, `PopoverAlign`, `TooltipAlign`	alignment variants.
`TabsOrientation`	`Horizontal`, `Vertical`
`TabsActivationMode`	automatic or manual tab activation.

Dialog-like components render SSR-safe markup first. Client handlers hydrate behavior from attributes such as data-dialog-root, data-dialog-trigger, data-dialog-portal, data-dialog-overlay, and close attributes.

Data, Media, And Application Shells

Component	Primary API
`Table` family	`Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, and `TableCaption`.
`DataTable` family	`DataTable`, sortable `DataTableColumnHeader`, and `DataTablePagination`.
`Progress`	Accessible progressbar with value, label, and indicator output.
`ScrollArea`	Root viewport and optional scrollbar orientation.
`ResizablePanelGroup`	Panel group, panels, and keyboard-focusable resize handle.
charts	`AreaChart`, `BarChart`, `LineChart`, `DonutChart`, `StackedBarChart`, `Boxplot`, and `SankeyChart`.
`LeafletMap`	Server-rendered map shell with JSON-backed point and client payload attributes.
chat	`ChatContainer`, `ChatBubble`, `ChatInput`, and `ChatTypingIndicator`.
`Toaster`	Toast container configured with `ToastPosition` and `ToastVariant`.

Data Attributes

Treat data-* names as part of the public component contract:

Component family	Stable hooks
Button and badge	`data-button`, `data-badge`, `data-variant`, `data-bind-disabled`, `data-bind-loading`
Forms	`data-input`, `data-textarea`, `data-select`, `data-field`, `data-rules`, `data-validate-on`, `data-bind-aria-invalid`
Cards and tables	`data-card`, `data-card-header`, `data-card-title`, `data-table`, `data-table-row`, `data-table-cell`
Disclosure	`data-accordion-root`, `data-accordion-item`, `data-accordion-trigger`, `data-accordion-content`, `data-collapsible-root`, `data-collapsible-trigger`, `data-collapsible-content`, `data-state`
Menus	`data-dropdown-menu`, `data-dropdown-root`, `data-dropdown-trigger`, `data-dropdown-content`, `data-dropdown-item`, `data-menubar-*`, `data-value`, `data-checked`, `data-disabled`
Overlays	`data-dialog-root`, `data-dialog-trigger`, `data-dialog-portal`, `data-dialog-overlay`, `data-dialog-content`, `data-dialog-close`
Sheet and drawer	`data-sheet-content`, `data-side`, `data-drawer-*`, `data-direction`
Layout/data	`data-scroll-area`, `data-scroll-area-viewport`, `data-progress`, `data-progress-indicator`, `data-data-table`

Prefer data attributes for tests and behavior. Prefer class for route-local styling. Do not parse Tailwind class strings as application state.

Performance Rules

Use WebRenderSync components in html_sync! for normal page rendering.
Keep variant logic in recipe enums and ClassList helpers.
Pass route-specific classes with class, not by rebuilding recipe strings.
Use controlled rsjs components only when the control needs client-side state.
Keep feature gates off unless the page imports those components.