@mui/base

What is @mui/base?

The @mui/base package is a collection of foundational components and utilities that are meant to be used as the building blocks for creating more complex Material-UI components. It provides low-level components with minimal styling that can be extended and customized for various use cases.

What are @mui/base's main functionalities?

Unstyled components

Provides unstyled versions of Material-UI components that can be used as a starting point for custom styling.

import { SliderUnstyled } from '@mui/base';

function MySlider() {
  return <SliderUnstyled defaultValue={30} />;
}

Hooks

Offers a set of hooks for managing component state and behavior, such as button states and focus management.

import { useButton } from '@mui/base/ButtonUnstyled';

function MyButton(props) {
  const { active, focusVisible, setFocusVisible, getRootProps } = useButton(props);
  return <button {...getRootProps()}>My Unstyled Button</button>;
}

Utilities

Includes utilities for handling owner state, component slots, and other low-level concerns in component development.

import { appendOwnerState } from '@mui/base';

function MyComponent(props) {
  const ownerState = { variant: 'contained' };
  const newProps = appendOwnerState(MyComponent, props, ownerState);
  return <div {...newProps} />;
}

Other packages similar to @mui/base

react-bootstrap

React Bootstrap provides Bootstrap components built with React. It offers a set of accessible and reusable front-end components, which are more styled and opinionated compared to the minimalistic approach of @mui/base.

reactstrap

reactstrap is another library that offers easy-to-use Bootstrap 4 components for React apps. Similar to react-bootstrap, it provides more pre-styled components compared to the foundational nature of @mui/base.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It's a complete set of components that are more feature-rich and come with Semantic's theming and styling, unlike the bare-bones approach of @mui/base.

README

@mui/base

This package hosts unstyled React components and hooks that can be used for creating custom design systems.

Installation

Install the package in your project directory with:

// with npm
npm install @mui/base

// with yarn
yarn add @mui/base

Documentation

The documentation