@mui-treasury

Accordion styled with the MUI Treasury theme — install the theme alongside.

Interactive AI action components

A container component for displaying artifacts with header, actions, and content areas

A ai-branch item.

Component for displaying AI reasoning steps with collapsible content

A ai-code-block item.

A ai-context item.

A ai-conversation item.

All AI Elements from MUI Treasury

A ai-image item.

A ai-inline-citation item.

A ai-loader item.

A ai-message item.

A ai-open-in-chat item.

A ai-prompt-input item.

A ai-reasoning item.

A ai-response item.

A ai-sources item.

A ai-suggestion item.

A ai-task item.

A ai-tool item.

A ai-web-preview item.

Alert styled with the MUI Treasury theme — install the theme alongside.

A app-analytics item.

App Bar styled with the MUI Treasury theme — install the theme alongside.

A responsive footer component with logo, social media links, and multi-column navigation

A app-messenger item.

A app-react-legacy item.

A app-shopping-cart item.

Autocomplete styled with the MUI Treasury theme — install the theme alongside.

Avatar styled with the MUI Treasury theme — install the theme alongside.

Badge styled with the MUI Treasury theme — install the theme alongside.

Breadcrumbs styled with the MUI Treasury theme — install the theme alongside.

Button Group styled with the MUI Treasury theme — install the theme alongside.

Button styled with the MUI Treasury theme — install the theme alongside.

A call-volume-trends block.

Card with full-bleed background, heading text overlay, and floating circular add button in bottom-right corner with hover scale effect

Card with branded icon, large heading, description text, and floating circular add button with customizable props

Blog card with image featuring gradient overlay, Info components for eyebrow/title/subtitle, and gradient CTA button

Card with landscape image, Info title/subtitle, and AvatarGroup footer showing participant avatars

Card with full-height background image, bottom gradient overlay, and white text Info components positioned at bottom

Card with game branding, cover image, gradient overlay, logo avatar with hover scale, and date badge

Compact horizontal card with avatar, user name, location info, and progress slider showing completion status

Music card with rounded album artwork and Info components displaying artist/title/description using N04 styles

News card with image, Info components using N01 styles, and 'Find Out More' button with hover scale effect

Full-bleed image card with centered white text heading and explore label, positioned absolutely over background

News card with image overlay, gradient backdrop, fashion tag badge, author info with avatar, and layered shadow effect on hover

Promotional card with cyan background, decorative bow image, circular background elements, and 'Learn more' button

Social post card with clipped polygon image, positioned avatar overlay, Info title/subtitle, and share/like action buttons

Preview card using Base UI PreviewCard with hover popup displaying content preview and Material UI styling

Profile card with centered avatar, name/location info, and followers/following stats displayed in divided columns

Project card with brand logo, time indicator, and Info components using Blog styles for title/subtitle

Review card with image, star rating, location info, and avatar group showing reviewers

Magazine-style review card with image, star rating, content excerpt, and comment/view/share metrics

Purple gradient reward card with trophy image, contest title, date range, and 'Enter Now' button

Social connection card with avatar, user name, mutual friends count, and follow button

Game cards with solid color backgrounds, logo images, game titles, and hover shadow/scale animations

Program enrollment card with Thai content, Info components, and dual 'Learn more' / 'Apply now' buttons

Decorative tag-shaped card with hole punch cutout design for menu items or categories

Team group cards with cover images, avatar groups, member counts, and join/leave action buttons with gradient styling

Compact profile card with avatar, name/title info, and action button using Open Sans typography

Horizontal scrollable carousel with CSS scroll snap

Checkbox styled with the MUI Treasury theme — install the theme alongside.

Chip styled with the MUI Treasury theme — install the theme alongside.

CSS-only collapsible components using a hidden checkbox to toggle content visibility

A collapsible-icon demo.

A TextField-based color picker built on react-colorful

Basic select component for switching color schemes

Icon-based select component for switching color schemes

Minimal select component for switching color schemes

Tab-based component for switching color schemes

A command-search-ui block.

A dashboard card displaying customer metrics with growth percentage and trend chart

A vertical navigation sidebar for dashboard applications with user profile, search, and expandable menu items

A data-metrics block.

A database-metrics-card block.

Dialog styled with the MUI Treasury theme — install the theme alongside.

Drag and drop file upload zone using react-dropzone

A file input component based on TextField with dynamic icons for different file types.

A chat interface for analyzing images using Firebase Gemini with multimodal input support

Client-side ChatTransport implementation for Firebase AI Logic (Gemini) with multi-turn streaming, tool calling, and Google Search grounding

Simple text generation component using Firebase AI (Gemini) with streaming support

A Firebase chat demo with Google Search grounding for real-time information

A chat interface for generating images using Firebase Gemini with interleaved text and image output

A chat interface for creating illustrated stories with interleaved text and image generation

A chat interface showcasing AI reasoning with Firebase Gemini thinking model

A chat interface demonstrating Firebase AI tool calling with weather and time tools

Info variant with bold Ubuntu typography and custom purple/gray color scheme

Basic info component with title, subtitle, caption, and eyebrow text slots for displaying structured content

Info variant with Spartan font family and coral accent color for eyebrow text

Blog-style info component with date eyebrow and article preview layout

Chat-themed info component with Inter font and modern messaging aesthetics

Info variant with custom typography and styling option 1

Info variant with custom typography and styling option 2

Info variant with custom typography and styling option 3

Info variant with custom typography and styling option 4

Mechanical keyboard keycap-style button with pressed state, works with text and icons.

Core layout primitives (Root, Header, Content, Footer, EdgeSidebar, InsetSidebar) for building app shells with CSS Grid.

Documentation for EdgeSidebar covering width, visibility, collapse, drawer, responsive modes, and right sidebar.

Documentation for the Footer layout component covering basic usage and inset avoiding view.

A documentation-style header layout with logo, navigation links, and action buttons. Suitable for documentation sites with a fixed top header containing brandi…

Documentation for InsetSidebar covering width, sticky behavior, and absolute positioning.

Documentation for the Root layout component covering height, standalone mode, and transition control.

Sidebar automatically collapses below a specified breakpoint.

Collapsible sidebar with a toggle button using EdgeSidebarCollapser.

Drawer mode sidebar that opens as an overlay with a trigger button.

Drawer mode without the overlay backdrop.

Collapsed sidebar expands on hover without shifting the content.

Drawer on mobile, permanent on desktop using breakpoint-based variant.

Right-aligned edge sidebar using EdgeSidebarRight.

Hide the sidebar by default and show it at a specific breakpoint.

Customize the width of the edge sidebar via variant config.

Use InsetAvoidingView inside Footer to prevent overlap from an absolute InsetSidebar.

Control whether the Header spans over the left/right EdgeSidebar.

Customize header height with a fixed value or responsive breakpoints.

Absolute inset sidebar for standalone apps, spanning from header to bottom with InsetAvoidingView in footer.

Default sticky behavior — sidebar sticks under the header on scroll.

Customize the width of the inset sidebar with fixed or responsive values.

Remove all layout transition animations with the disableTransition prop.

Customize root layout height with a fixed value or responsive breakpoints.

Standalone mode fits the layout to its height, useful for POS or chat apps.

A list-item-01 item.

LinkedIn-style notification list item with avatar, content preview, and engagement stats

List styled with the MUI Treasury theme — install the theme alongside.

Clean and accessible login form with email/password authentication and Google OAuth option

Two-column login form with email/password authentication and social login option

A metric card displaying member count with trend indicator and sparkline chart

Menu styled with the MUI Treasury theme — install the theme alongside.

Application menubar with nested submenu support using Base UI and Material UI styling

A minimal meter component using Base UI Meter with Material UI styling

A minimal theme with monochromatic palette and system fonts

Horizontal navigation menu with dropdown menus for Products and Resources sections

Horizontal navigation menu with animated dropdown transitions and arrow indicators

Base UI Number Field for numeric values with increment/decrement buttons

Integrated Base UI Number Field with increment/decrement buttons, label, helper text, and error states. Full keyboard and screen reader accessibility.

A number input component with various features and customization options.

Pagination styled with the MUI Treasury theme — install the theme alongside.

A payment-history-chart block.

A payment-overview-card block.

A payroll-summary-card block.

Menu items that open a popup submenu on hover or click.

A portfolio-value-chart block.

A clean settings panel with various preference options including selects and toggles

Product card with gradient background header, centered image, and floating heart icon. Features product title, attribute chips, description text, and bottom ro…

Mobile product card with centered image, floating heart icon, and product name with badge. Features circular color swatches with checkmarks, size selection but…

Progress styled with the MUI Treasury theme — install the theme alongside.

A project-invite-modal block.

Radio card component for selecting options with detailed information

A customizable radio group component with color swatches as selection options

Radio styled with the MUI Treasury theme — install the theme alongside.

A segmented control component for selecting between options with radio buttons

Rating styled with the MUI Treasury theme — install the theme alongside.

A select dropdown with label displayed inside the container above the selected value

Select styled with the MUI Treasury theme — install the theme alongside.

Shared TypeScript types for overridable component patterns.

A complete sidebar component system with collapsible container, menu items, groups, icons, text, tooltips, and rail

Organize menu items into labeled sections with optional actions.

Flat, nested, and action menu patterns with active states.

Modern vertical navigation sidebar with expandable menu items, storage usage indicator, and user profile section

Primary and secondary text styles for menu items with truncation support.

Tooltips for icon-only collapsed sidebar items.

A sla-performance-card block.

Slider styled with the MUI Treasury theme — install the theme alongside.

Snackbar styled with the MUI Treasury theme — install the theme alongside.

Toast notification component using Sonner with MUI theming

Toast notification with severity-colored icon, action button, and close button

Split-screen login form with space theme and social authentication options

Stepper styled with the MUI Treasury theme — install the theme alongside.

Switch styled with the MUI Treasury theme — install the theme alongside.

Table styled with the MUI Treasury theme — install the theme alongside.

A clean tabs component with AI and signup options, includes help link

A modern tab component with mix-blend-mode for automatic text color inversion when the indicator slides beneath tabs

Apple-style tabs with rounded container and sliding indicator

Horizontal tab navigation styled as chip-like buttons

Chrome browser-style tabs with separator lines and smooth hover effects

Contained tabs with separator lines and secondary color for selected state

Elevated tabs with gradient background and translucent indicator

Firebase-style tabs with thick top indicator and hover backdrop

Tabs with diagonal triangle shadow effect using CSS transform

Instagram-style tabs with top indicator, icons, and uppercase labels

Tabs styled with the MUI Treasury theme — install the theme alongside.

Pill-shaped tabs with rounded corners, elevation shadow on selection

Plain bordered tabs with subtle background and white selection

Serrated tabs with skewed transform and diagonal shadow gradient

Twitter-style tabs with bold text, hover effects, and bottom border

Text Field styled with the MUI Treasury theme — install the theme alongside.

A ticket-status-card block.

Toggle Button styled with the MUI Treasury theme — install the theme alongside.

Tooltip styled with the MUI Treasury theme — install the theme alongside.

A transaction-history-list block.

Typography styled with the MUI Treasury theme — install the theme alongside.

A hook for managing state and behavior in number input components.