How to use/install @carbon/react in react project

Question

I'm creating react project and want use @carbon/react and want to play around with grid component.

as per https://react.carbondesignsystem.com/?path=/docs/elements-grid--default#overview you can use grid like shown below.(and other components of carbon design system as well)

import { Grid, Column } from '@carbon/react';

function MyComponent() {
  return (
    <Grid>
      <Column as="article">Example content</Column>
      <Column as="article">Example content</Column>
      <Column as="article">Example content</Column>
      <Column as="article">Example content</Column>
    </Grid>
  );
}

Problem: Not able to install @carbon/react properly and somehow able to install getting many problems with it.

Tried below things.

List of Problems got while installing @carbon/react:

1. npm install @carbon/react. (when react and react-dom version are 18.2.0)

2. npm install @carbon/react. (when react and react-dom version are 17.0.1), now its installed. but ran into node-sass problem (for npm run start).

3. Then installed node-sass after that below issue occurred for npm run start.

4. Got this error too: Can't resolve 'react-dom/client' in '/home/abhijeet/ABHIJEET/Demo-Projects/React-Projects/react-carbon-grid/src'

Expected: How to use @carbon/react for Grid component. or GitHub repo where I will get the @carbon/react Grid Demo.

Answer 1

use npm install @carbon/react --force or npm install @carbon/react --legacy-peer-deps

Answer 2

1. React 18 is not yet supported. You can use --force or --legacy-peer-deps flags with npm install to get past this warning.
2. Do not use node-sass, it has been deprecated. Install sass instead.
3. & 4 should be resolved by #2

If you're wanting to just play around with things, you might find it easier to use our stackblitz template instead. It provides everything you need to get started.