Prop	Type	Default	Description
`id`	`Option<String>`	`None`	Unique identifier for the component
`class`	`Option<String>`	`None`	Additional CSS classes
`style`	`Option<Style>`	`None`	Inline styles

Accessibility Props

Prop	Type	Default	Description
`aria_label`	`Option<String>`	`None`	Accessible name for screen readers
`aria_describedby`	`Option<String>`	`None`	ID of element describing this component
`aria_labelledby`	`Option<String>`	`None`	ID of element labeling this component
`role`	`Option<String>`	`None`	ARIA role override

State Props

Prop	Type	Default	Description
`disabled`	`Signal<bool>`	`false`	Disable component interaction
`readonly`	`Option<bool>`	`false`	Make component read-only

Variant System

Components support multiple visual variants:

Button Variants

pub enum ButtonVariant {
    Default,
    Destructive,
    Outline,
    Secondary,
    Ghost,
    Link,
}

Button Sizes

pub enum ButtonSize {
    Default,
    Sm,
    Lg,
    Icon,
}

Theme Support

All components support two theme variants:

Default Theme - Standard shadcn/ui styling
New York Theme - Alternative design system

// Import Default theme
use shadcn_ui_leptos_button::Button;

// Import New York theme
use shadcn_ui_leptos_button::ButtonNewYork;

Signal-Managed Components

Many components offer signal-managed variants with enhanced reactivity:

use shadcn_ui_leptos_button::SignalManagedButton;

// Provides built-in state management
let button_state = SignalManagedButtonState::new();

TypeScript Definitions

TypeScript definitions are available for JavaScript/TypeScript interoperability:

import { Button } from '@leptos-shadcn-ui/button';

interface ButtonProps {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';
  disabled?: boolean;
  onClick?: () => void;
  children?: React.ReactNode;
}

Examples

See the Example Usage Guide for comprehensive examples of all components.

Accessibility

All components follow WCAG 2.1 AA standards. See the Accessibility Guide for details.

Last Updated: January 2026 Version: 0.7.0

7.5 KiB Raw Blame History

Leptos Shadcn UI - Component API Reference

Table of Contents

Form Components

Button | Input | Label | Checkbox | Switch | Radio Group | Select | Textarea | Form | Combobox | Command | Input OTP

Layout Components

Card | Separator | Tabs | Accordion | Collapsible | Scroll Area | Aspect Ratio | Resizable

Navigation Components

Breadcrumb | Navigation Menu | Context Menu | Dropdown Menu | Menubar

Overlay Components

Dialog | Popover | Tooltip | Alert Dialog | Sheet | Drawer | Hover Card

Data Display & Feedback Components

Alert | Badge | Skeleton | Progress | Toast | Table | Calendar | Date Picker | Pagination

Interactive Components

Slider | Toggle | Carousel | Avatar

Utility Components

Error Boundary | Lazy Loading | Registry

Detailed Component Documentation

Common Props Reference

Core Props