@project44-manifest/react
v3.28.1
Published
Manifest Design System react components
Downloads
504
Maintainers
Readme
@project44-manifest/react
A react library consisting of components, patterns and a styling engine that implement the design principles of the Manifest Design System by project44.
Installation
yarn add @project44-manifest/react react react-dom
Usage
The @project44-manifest/react
library includes everything you need to build experiences leveraging
the Manifest Design System.
To start using the library start by wrapper you application with the Provider
.
import { Provider } from '@project44-manifest/react';
function MyApp({ children }) {
return <Provider>{children}</Provider>;
}
This provider will initialize our SSRProvider
, which ensures that our auto-generated id's are
consistent between the server and client. It also initializes the OverlayProvider
that manages
overlay elements ensuring that they properly hidden from screen readers.
Font
Manifest Design System was designed using Inter as its font. Please be sure to include the font type in the of your application's HTML.
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
rel="stylesheet"
/>
Icons
Currently Manifest Design System uses material design icons. Please be sure to include the font type in the of your application's HTML.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Accessibility
Manifest is built with accessibility in mind, each component will assign the correct events and aria attributes needed to meet the WAI-ARIA guidelines. We rely heavily on react-aria for provide accessible UI primitives.
Polymorphism
All Manifest components are polymorphic, meaning that each component can be rendered using a
different element or node using the as
prop.
import { Button } from '@project44-manifest/react';
<Button as="span" />;
This should be used sparingly though, as Manifest automatically appends all the necessary aria-attributes to an element.
Styling
Each component is built to the specification of the design system and generally should not need styles overridden. Overriding component styles create visual discrepancies across our products as well as makes it harder to maintain components when changes are made at the system level.
If you find yourself needing to override the component's styles, it is best to use the css prop as it’s like the style attribute, but it supports tokens, media queries, nesting, and token-aware values.
Checkout the @project44-manifest/react-styles
library for
usage guidelines.
Composing components
If you are composing a new component you have two options: the Box
component, or the styled
api.
Box
The Box component functions like any other component in the system, supporting the css prop and the polymorphic as prop. We suggest composing components this way purely from a consistency standpoint. Manifest components with style overrides should use the css prop, so new components composed with the Box component will also use the css prop. This make code scanning easier as engineers and tools can all look for that prop to infer the styling.
import { Box } from '@project44-manifest/react';
function MyComponent() {
return (
<Box as="span" css={{ color: '$palette-grey-100' }}>
{' '}
Hello World
</Box>
);
}
Styled
If you prefer the styled component syntax, you can use the provided styled
api.
import { styled } from '@project44-manifest/react-styles';
const Button = styled('button', {
backgroundColor: '$palette-blue-500',
borderRadius: '$full',
color: '$palette-white',
});
<Button>Hello World</Button>;
The styled api support usage of theme tokens just like the css prop.
If you need to compose your own components utilizing the design system in react we recommend using
the polymorphic Box
component. The Box
component ships with support for the css
and as
props, allowing you to quickly and easily build custom components that follow Manifest Design
System.
import { Box } from '@project44-manifest/react';
function MyComponent() {
return (
<Box as="span" css={{ color: '$palette-grey-100' }}>
Hello World
</Box>
);
}
Along with the Box
, Manifest provides a robust set of layout primitives that can be used to
control layout and composing components.
These primitives include a Container
, Flex
, Grid
, and Stack
component.
Please refer the the documentation website for usage information and best practices.
Contributing
Contributions are always welcome!! Please review our Contribution Guide to get started.
License
Licensed under the MIT.