or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display.mdform-controls.mdhooks-utilities.mdindex.mdlayout-positioning.mdselection-navigation.md
tile.json

tessl/npm-mui--base

Library of headless React components and low-level hooks for building accessible user interfaces

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mui/base@7.0.x

To install, run

npx @tessl/cli install tessl/npm-mui--base@7.0.0

index.mddocs/

MUI Base

MUI Base is a library of headless (unstyled) React components and low-level hooks that provides complete control over your app's CSS and accessibility features. It offers foundational UI components like buttons, inputs, modals, menus, and navigation elements without any default styling, allowing for maximum customization while maintaining accessibility standards and semantic HTML structure.

Package Information

  • Package Name: @mui/base
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @mui/base

Core Imports

import { Button, Input, Select, Menu, Modal } from "@mui/base";

For specific components:

import { Button } from "@mui/base/Button";
import { useButton } from "@mui/base/useButton";

CommonJS:

const { Button, Input, Select } = require("@mui/base");

Basic Usage

import { Button, Input, FormControl } from "@mui/base";

function App() {
  return (
    <div>
      {/* Headless button - bring your own styles */}
      <Button className="my-button" onClick={() => alert("Clicked!")}>
        Click me
      </Button>

      {/* Form control with input */}
      <FormControl>
        <Input 
          placeholder="Enter text"
          className="my-input"
          slotProps={{
            input: { className: "my-input-element" }
          }}
        />
      </FormControl>
    </div>
  );
}

Architecture

MUI Base is built around several key architectural patterns:

  • Headless Components: No default styling, complete CSS control
  • Slot-based Architecture: Each component exposes customizable "slots" (sub-elements) via the slots and slotProps props, with advanced prop merging via mergeSlotProps for complete customization control
  • Polymorphic Components: Components can render as different HTML elements via the component prop
  • Hook-based Logic: Each component has a corresponding hook (e.g., useButton) that can be used standalone
  • Accessibility First: Built-in ARIA attributes, keyboard navigation, and focus management
  • TypeScript Integration: Full type safety with generic support for polymorphic behavior
  • CSS Class System: Each component exports a *Classes object (e.g., buttonClasses) for consistent styling with utility class generation

Capabilities

Form Controls

Core form elements including buttons, inputs, switches, and sliders with full accessibility support and customizable styling.

// Button component with polymorphic support
function Button<RootComponentType extends React.ElementType = "button">(
  props: ButtonProps<RootComponentType>
): JSX.Element;

// Input component with form control integration
function Input<RootComponentType extends React.ElementType = "div">(
  props: InputProps<RootComponentType>
): JSX.Element;

// Switch toggle component
function Switch<RootComponentType extends React.ElementType = "span">(
  props: SwitchProps<RootComponentType>
): JSX.Element;

Form Controls

Selection & Navigation

Components for user selection including dropdowns, menus, and tabs with keyboard navigation and accessibility features.

// Select dropdown component
function Select<OptionValue, Multiple extends boolean = false>(
  props: SelectProps<OptionValue, Multiple>
): JSX.Element;

// Menu component for contextual actions
function Menu<RootComponentType extends React.ElementType = "div">(
  props: MenuProps<RootComponentType>
): JSX.Element;

// Tab navigation components
function Tabs<RootComponentType extends React.ElementType = "div">(
  props: TabsProps<RootComponentType>
): JSX.Element;

Selection & Navigation

Layout & Positioning

Components for popups, modals, overlays, and transitions with advanced positioning using Floating UI.

// Modal dialog component
function Modal(props: ModalProps): JSX.Element;

// Floating popup component
function Unstable_Popup(props: PopupProps): JSX.Element;

// Portal component for rendering outside DOM tree
function Portal(props: PortalProps): JSX.Element;

// CSS transition wrapper component
function CssTransition(props: CssTransitionProps): JSX.Element;

// CSS animation wrapper component
function CssAnimation(props: CssAnimationProps): JSX.Element;

Layout & Positioning

Data Display

Components for displaying data including tables, badges, and notifications.

// Badge component for status indicators
function Badge<RootComponentType extends React.ElementType = "span">(
  props: BadgeProps<RootComponentType>
): JSX.Element;

// Table pagination controls
function TablePagination<RootComponentType extends React.ElementType = "div">(
  props: TablePaginationProps<RootComponentType>
): JSX.Element;

// Snackbar notification component
function Snackbar<RootComponentType extends React.ElementType = "div">(
  props: SnackbarProps<RootComponentType>
): JSX.Element;

Data Display

Hooks & Utilities

React hooks and utility functions for building custom components with MUI Base behavior, including slot management and CSS class composition.

// Button behavior hook
function useButton(parameters: UseButtonParameters): UseButtonReturnValue;

// Autocomplete functionality hook
function useAutocomplete<Value, Multiple, DisableClearable, FreeSolo>(
  props: UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>
): UseAutocompleteReturnValue<Value, Multiple, DisableClearable, FreeSolo>;

// CSS class generation utility
function generateUtilityClass(componentName: string, slot: string): string;

// Slot prop merging utility
function mergeSlotProps<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>(
  parameters: MergeSlotPropsParameters<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>
): MergeSlotPropsResult<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>;

// CSS class composition utility
declare const unstable_composeClasses: <T extends string>(
  slots: Record<T, readonly string[]>,
  getUtilityClass: (slot: string) => string,
  classes?: Partial<Record<T, string>>
) => Record<T, string>;

Hooks & Utilities

Core Types

// Polymorphic component support
interface PolymorphicProps<TypeMap extends PolymorphicTypeMap, RootComponentType extends React.ElementType> {
  component?: RootComponentType;
}

// Slot-based component props
interface SlotComponentProps<
  ElementType extends React.ElementType,
  SlotPropsOverrides,
  OwnerState
> {
  className?: string;
  children?: React.ReactNode;
}

// Common slot props pattern
interface ComponentSlots {
  root?: React.ElementType;
  [key: string]: React.ElementType | undefined;
}

interface ComponentSlotProps<Slots extends ComponentSlots> {
  [K in keyof Slots]?: SlotComponentProps<
    NonNullable<Slots[K]>,
    {},
    any
  >;
}