ActiveFeaturedDesign system2,442
@mui-treasury
Design system · data updated 2026-09-05
MUI Treasury is a collection of hand-crafted, extended UI patterns and components built on top of Material UI (MUI v5/v6), addressing design gaps left by the core MUI library — refined shadows, monochromatic palettes, pure-black dark mode, icon variants, and elevated header/navigation patterns. It provides an optional CLI for adding components. Built around MUI's CSS variable theming, Emotion, and Material Design tokens rather than Tailwind. Open source. Use for: MUI-based React apps that need polished, opinionated extensions to the default Material Design system without switching to a Tailwind-first stack.
accessibilityaestheticaianimationaudioblocksbuttonscardscmscomponentsdashboarddesign-systeme-commerceformsgamingiconsloadersmedianavigationoverlaystheming
Install
npx shadcn@latest add https://mui-treasury.com/r/registry.jsonHealth
StatusActive
Last commit3 months ago
License—
Open issues39
ArchivedNo
Stars2,442
Components (192)
accordion-mui-treasuryai-actionsai-artifactai-branchai-chain-of-thoughtai-code-blockai-contextai-conversationai-elementsai-imageai-inline-citationai-loaderai-messageai-open-in-chatai-prompt-inputai-reasoningai-responseai-sourcesai-suggestionai-taskai-toolai-web-previewalert-mui-treasuryapp-analyticsapp-bar-mui-treasuryapp-footer-01app-messengerapp-react-legacyapp-shopping-cartautocomplete-mui-treasuryavatar-mui-treasurybadge-mui-treasurybreadcrumbs-mui-treasurybutton-group-mui-treasurybutton-mui-treasurycall-volume-trendscard-action-01card-action-02card-blogcard-engagementcard-galaxycard-highlightcard-kanbancard-musiccard-newscard-news2card-news3card-offercard-postcard-preview-01card-profilecard-projectcard-reviewcard-review2card-rewardcard-socialcard-solid-gamecard-sysicard-tagcard-team
Components: accordion-mui-treasury, ai-actions, ai-artifact, ai-branch, ai-chain-of-thought, ai-code-block, ai-context, ai-conversation, ai-elements, ai-image, ai-inline-citation, ai-loader, ai-message, ai-open-in-chat, ai-prompt-input, ai-reasoning, ai-response, ai-sources, ai-suggestion, ai-task, ai-tool, ai-web-preview, alert-mui-treasury, app-analytics, app-bar-mui-treasury, app-footer-01, app-messenger, app-react-legacy, app-shopping-cart, autocomplete-mui-treasury, avatar-mui-treasury, badge-mui-treasury, breadcrumbs-mui-treasury, button-group-mui-treasury, button-mui-treasury, call-volume-trends, card-action-01, card-action-02, card-blog, card-engagement, card-galaxy, card-highlight, card-kanban, card-music, card-news, card-news2, card-news3, card-offer, card-post, card-preview-01, card-profile, card-project, card-review, card-review2, card-reward, card-social, card-solid-game, card-sysi, card-tag, card-team, card-tutor, carousel-css-01, checkbox-mui-treasury, chip-mui-treasury, collapsible, collapsible-icon, color-picker-field, color-scheme-select-basic, color-scheme-select-icon, color-scheme-select-minimal, color-scheme-tabs-basic, command-search-ui, customer-metrics-card, dashboard-sidebar, data-metrics, database-metrics-card, dialog-mui-treasury, dropzone-01, file-upload-field, firebase-analyze-image, firebase-chat-transport, firebase-generate-text, firebase-google-search, firebase-image-generation, firebase-story-telling, firebase-thinking-model, firebase-tool-calling, info-apex, info-basic, info-beats, info-blog, info-chatz, info-n01, info-n02, info-n03, info-n04, keycap-01, layout-core, layout-docs-edge-sidebar, layout-docs-footer, layout-docs-header, layout-docs-inset-sidebar, layout-docs-root, layout-edge-sidebar-auto-collapse, layout-edge-sidebar-collapse, layout-edge-sidebar-drawer, layout-edge-sidebar-drawer-without-overlay, layout-edge-sidebar-hover-uncollapse, layout-edge-sidebar-responsive, layout-edge-sidebar-right, layout-edge-sidebar-visibility, layout-edge-sidebar-width, layout-footer-inset-avoiding, layout-header-clip, layout-header-height, layout-inset-sidebar-absolute, layout-inset-sidebar-sticky, layout-inset-sidebar-width, layout-root-disable-transition, layout-root-height, layout-root-standalone, list-item-01, list-item-02, list-mui-treasury, login-form, login-form-split, members-metric, menu-mui-treasury, menubar-01, meter-01, mui-treasury, nav-menu-01, nav-menu-02, number-field-01, number-field-02, number-input, pagination-mui-treasury, payment-history-chart, payment-overview-card, payroll-summary-card, popup-menu, portfolio-value-chart, preference-settings, product-card, product-card2, progress-mui-treasury, project-invite-modal, radio-card-01, radio-color-01, radio-mui-treasury, radio-segment-01, rating-mui-treasury, select-inset-01, select-mui-treasury, shared, sidebar, sidebar-group, sidebar-menus, sidebar-navigation, sidebar-text, sidebar-tooltip, sla-performance-card, slider-mui-treasury, snackbar-mui-treasury, sonner, sonner2, space-login, stepper-mui-treasury, switch-mui-treasury, table-mui-treasury, tabs-01, tabs-02, tabs-apple, tabs-chip-01, tabs-chrome, tabs-contained, tabs-elevated, tabs-firebase, tabs-inside-triangle, tabs-instagram, tabs-mui-treasury, tabs-pill, tabs-plain, tabs-serrated, tabs-twitter, text-field-mui-treasury, ticket-status-card, toggle-button-mui-treasury, tooltip-mui-treasury, transaction-history-list, typography-mui-treasury, use-number-inputPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@mui-treasury · accordion-mui-treasury
npx shadcn@latest add https://mui-treasury.com/r/accordion-mui-treasury.jsonView source