Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@mui/base
Advanced tools
Unstyled React components with which to implement custom design systems.
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.
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} />;
}
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 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 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.
This package hosts unstyled React components that can be used for creating custom design systems.
Install the package in your project directory with:
// with npm
npm install @mui/base
// with yarn
yarn add @mui/base
@mui/base@5.0.0-alpha.55
<!-- 27 -->[core] Rename mui/core to mui/base (#29585) @michaldudak
Based on the results of the poll and our internal discussions, we decided to rename the @mui/core
package to @mui/base
. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a base to build on.
-import { useSwitch } from '@mui/core/SwitchUnstyled';
+import { useSwitch } from '@mui/base/SwitchUnstyled';
FAQs
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
The npm package @mui/base receives a total of 3,407,742 weekly downloads. As such, @mui/base popularity was classified as popular.
We found that @mui/base demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.