React components for the Carbon Design System
To install @carbon/react
in your project, you will need to run the following
command using npm:
npm install -S @carbon/react
If you prefer Yarn, use the following command instead:
yarn add @carbon/react
This package requires Dart Sass in order to compile styles.
If you're new to Sass, or are wondering how to configure Sass for your project, we recommend checking out the following resources and links:
- Sass Basics
- Webpack with Sass
- Next.js with Sass
- Create React App with Sass
- Parcel with Sass
- Vite with Sass
- Snowpack with Sass
Once you get Sass up and running in your project, configure Sass to include
node_modules
in its includePaths
option. For more information, checkout the
configuration section in our Sass docs.
The @carbon/react
package provides components and icons for the Carbon Design
System.
To use a component, you can import it directly from the package:
import { Button } from '@carbon/react';
function MyComponent() {
return <Button>Example usage</Button>;
}
To include the styles for a specific component, you can either import all the styles from the project or include the styles for a specific component:
// Bring in all the styles for Carbon
@use '@carbon/react';
// Or bring in the styles for just one component
@use '@carbon/react/scss/components/button';
For a full list of components available, checkout our Storybook.
The @carbon/react
package also provides icon components that you can include
in your project. You can import these icon components from the
@carbon/react/icons
entrypoint:
import { Add } from '@carbon/react/icons';
function MyComponent() {
return <Add />;
}
For a full list of icons available, checkout our website.
If you're looking for @carbon/react
API documentation, check out:
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.