@magnolia/mgnl-ds-react
v4.7.3
Published
Magnolia CMS Design System package for React
Maintainers
magnoliaReadme
@magnolia/mgnl-ds-react
Magnolia Design System for React — ready-to-use, accessible UI components plus helper components and hooks for libraries such as react-hook-form and @tanstack/react-table.
Installation
pnpm add @magnolia/mgnl-ds-reactPeer dependencies
react^18.2.0 || ^19.0.0react-dom^18.2.0 || ^19.0.0
Usage
Import the stylesheet once in your app's entry point (e.g. main.tsx or App.tsx), then use the components:
import { Button } from '@magnolia/mgnl-ds-react';
import '@magnolia/mgnl-ds-react/style.css';
const App = () => {
return (
<Button.Root onClick={() => console.log('Clicked!')}>Click me</Button.Root>
);
};
export default App;Add the .mgnl-ds-body class to your <body> element to activate global design system styles (reset, base typography, etc.):
<body class="mgnl-ds-body"></body>Documentation
For the full setup walkthrough — including optional library integrations for react-hook-form and @tanstack/react-table — see the Get started guide.
For detailed component documentation, props, and live examples, see the Storybook.
Changelog
See CHANGELOG.md for release history.
License
See [LICENSE.md]