Socket
Socket
Sign inDemoInstall

@carbon/react

Package Overview
Dependencies
0
Maintainers
6
Versions
173
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@carbon/react

React components for the Carbon Design System


Version published
Maintainers
6
Weekly downloads
47,191
decreased by-5.55%

Weekly downloads

Readme

Source

@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.

TypeScript

There is an ongoing project to add *.d.ts files to @carbon/react. Though not all components have yet been typed, you can still use the project successfully in a TypeScript setting, provided you amend to your tsconfig.json or equivalent configuration file. Include the skipLibCheck: true compiler option:

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

To track the progress of TypeScript adoption, check out:

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:

// 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.

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.

IBM Telemetry IBM Telemetry

This package uses IBM Telemetry to collect metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.

Keywords

FAQs

Last updated on 27 Mar 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc