@carbon/react
React components for the Carbon Design System
Getting started
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, we recommend checking out the following resources and
links:
For info on how to configure Sass for your project, here are some common
framework's documentation worth reviewing:
Or if you're just using a bundler:
Or anything else not listed above:
Once you get Sass up and running in your project, you may need to configure Sass
to include node_modules
in its includePaths
option. For more information,
checkout the configuration section in
our Sass docs.
Usage
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:
@use '@carbon/react';
@use '@carbon/react/scss/components/button';
For a full list of components available, checkout our
Storybook.
Icons
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.
📖 API Documentation
If you're looking for @carbon/react
API documentation, check out:
🙌 Contributing
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! 👀
📝 License
Licensed under the Apache 2.0 License.