CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-carbon--react

React components for the Carbon Design System, IBM's comprehensive design system providing production-ready UI components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

Carbon React

Carbon React is IBM's comprehensive React component library providing production-ready UI components for the Carbon Design System. It offers 110+ accessible components including forms, data displays, navigation, modals, and enterprise-grade features with full TypeScript support and customizable themes.

Package Information

  • Package Name: @carbon/react
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @carbon/react

Core Imports

import { Button, TextInput, DataTable, Modal } from "@carbon/react";

For CommonJS:

const { Button, TextInput, DataTable, Modal } = require("@carbon/react");

Icon imports:

import { Add, Close, Edit } from "@carbon/react/icons";
// or
import { Add, Close, Edit } from "@carbon/icons-react";

Experimental component imports:

// Experimental components use unstable_ or unstable__ prefixes
import { 
  unstable__FluidTextInput as FluidTextInput,
  unstable_Text as Text,
  unstable__ChatButton as ChatButton,
  unstable__AILabel as AILabel,  // Legacy alias for backward compatibility
  preview__Dialog as Dialog
} from "@carbon/react";

// Feature flags
import { FeatureFlags, useFeatureFlag, useFeatureFlags } from "@carbon/react";

Basic Usage

import React, { useState } from "react";
import { Button, TextInput, Stack } from "@carbon/react";

function MyForm() {
  const [name, setName] = useState("");
  
  return (
    <Stack gap={4}>
      <TextInput
        id="name"
        labelText="Your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Button onClick={() => console.log("Hello", name)}>
        Greet
      </Button>
    </Stack>
  );
}

Architecture

Carbon React is built around several key architectural patterns:

  • Component System: Consistent design tokens and styling across all components
  • Accessibility First: WCAG compliance with ARIA support, keyboard navigation, and screen reader optimization
  • Theme Support: Comprehensive theming system with light/dark modes and custom themes
  • TypeScript Integration: Full type safety with generic components and polymorphic props
  • Skeleton States: Loading skeletons for every major component
  • Icon System: 2000+ icons integrated from @carbon/icons-react
  • Responsive Design: Built-in responsive behavior and mobile-first approach
  • Feature Flags: Runtime feature flag system for gradual rollouts
  • Component Stability: Components are marked as stable (default), unstable (unstable_), or experimental (unstable__/preview__)

Capabilities

Form Components

Complete form input library with validation, accessibility, and consistent styling. Includes text inputs, dropdowns, date pickers, file uploads, and form layout components.

// Core form components
interface Button extends React.ComponentPropsWithoutRef<"button"> {
  kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost";
  size?: "sm" | "md" | "lg" | "xl" | "2xl";
  disabled?: boolean;
  hasIconOnly?: boolean;
}

interface TextInput extends React.ComponentPropsWithoutRef<"input"> {
  labelText: string;
  helperText?: string;
  invalid?: boolean;
  invalidText?: string;
  warn?: boolean;
  warnText?: string;
  size?: "sm" | "md" | "lg";
}

Form Components

Data Display Components

Advanced data presentation components including tables with sorting/filtering/selection, lists, tags, and structured data displays.

// DataTable with advanced features
interface DataTableProps<RowType = any, ColTypes = any> {
  rows: DataTableRow<ColTypes>[];
  headers: DataTableHeader[];
  render?: (props: DataTableRenderProps<RowType, ColTypes>) => React.ReactNode;
  sortable?: boolean;
  useZebraStyles?: boolean;
  size?: "xs" | "sm" | "md" | "lg" | "xl";
}

interface DataTableRenderProps<RowType, ColTypes> {
  rows: DataTableRow<ColTypes>[];
  headers: DataTableHeader[];
  getHeaderProps: (options: any) => any;
  getRowProps: (options: any) => any;
  getTableProps: () => any;
  getSelectionProps: () => any;
  getBatchActionProps: () => any;
  selectedRows: DataTableRow<ColTypes>[];
}

Data Display Components

Layout & Navigation

Flexible layout system with CSS Grid, navigation components, and application shell elements for building complete interfaces.

// Grid system
interface GridProps {
  as?: React.ElementType;
  condensed?: boolean;
  narrow?: boolean;
  fullWidth?: boolean;
}

interface RowProps {
  as?: React.ElementType;
  condensed?: boolean;
  narrow?: boolean;
}

// Navigation components
interface BreadcrumbProps {
  children: React.ReactNode;
  noTrailingSlash?: boolean;
}

interface UIShellHeaderProps {
  "aria-label"?: string;
  "aria-labelledby"?: string;
  children?: React.ReactNode;
}

Layout & Navigation

Modal & Overlay Components

Modal systems, tooltips, popovers, and overlay components for interactive content and contextual information.

// Modal components
interface ModalProps {
  open: boolean;
  onRequestClose?: () => void;
  modalHeading?: string;
  modalLabel?: string;
  primaryButtonText?: string;
  secondaryButtonText?: string;
  size?: "xs" | "sm" | "md" | "lg";
  danger?: boolean;
}

interface TooltipProps {
  children: React.ReactNode;
  label: string;
  align?: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
  description?: string;
}

Modal & Overlay Components

AI & Advanced Features

Modern AI-enhanced components, experimental features, and advanced interaction patterns for next-generation interfaces.

// AI components
interface AILabelProps {
  children?: React.ReactNode;
  className?: string;
  kind?: "default" | "inline";
  size?: "mini" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
  textLabel?: string;
}

interface ChatButtonProps {
  children?: React.ReactNode;
  disabled?: boolean;
  kind?: "primary" | "secondary" | "tertiary" | "ghost";
  size?: "sm" | "md" | "lg";
}

AI & Advanced Components

Tiles & Layout Components

Flexible content containers and layout utilities for organizing information and building structured interfaces.

// Core tile components
interface TileProps {
  children: React.ReactNode;
  light?: boolean;
  decorator?: React.ReactNode;
  hasRoundedCorners?: boolean;
}

interface ClickableTileProps extends TileProps {
  href?: string;
  onClick?: () => void;
}

interface AspectRatioProps {
  as?: React.ElementType;
  ratio?: "16x9" | "9x16" | "2x1" | "1x2" | "4x3" | "3x4" | "1x1";
  children: React.ReactNode;
}

Tiles & Layout Components

Input & Selection Components

Specialized input controls for advanced user interactions including binary toggles, range inputs, file uploads, and expandable search.

// Specialized input components
interface ToggleProps {
  id: string;
  labelA?: string;
  labelB?: string;
  labelText?: string;
  size?: "sm" | "md";
  onToggle?: (checked: boolean) => void;
}

interface SliderProps {
  max: number;
  min: number;
  step?: number;
  value: number;
  onChange?: (value: { value: number }) => void;
}

interface FileUploaderProps {
  labelTitle?: string;
  labelDescription?: string;
  buttonLabel?: string;
  filenameStatus?: "edit" | "complete" | "uploading";
  accept?: string[];
  multiple?: boolean;
}

Input & Selection Components

Loading & Progress Components

Loading states, progress indicators, and skeleton components for providing feedback during asynchronous operations.

// Loading components
interface LoadingProps {
  active?: boolean;
  small?: boolean;
  withOverlay?: boolean;
  description?: string;
}

interface ProgressIndicatorProps {
  currentIndex?: number;
  onChange?: (index: number) => void;
  vertical?: boolean;
  spaceEqually?: boolean;
}

interface ProgressBarProps {
  value?: number;
  max?: number;
  status?: "active" | "finished" | "error";
  size?: "sm" | "md" | "lg";
}

Loading & Progress Components

Theming & Customization

Theme provider, CSS-in-JS integration, and customization utilities for adapting Carbon components to your brand and design requirements.

// Theme system
interface ThemeProps {
  theme?: "white" | "g10" | "g90" | "g100" | string;
  children: React.ReactNode;
}

interface LayerProps {
  children: React.ReactNode;
  level?: number;
}

// Utility hooks
function usePrefix(): string;
function useIdPrefix(): string;

Theming & Customization

Common Types

// Size variants used across components
type ComponentSize = "sm" | "md" | "lg" | "xl";
type ComponentSizeExtended = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

// Common props for polymorphic components
interface PolymorphicProps<T extends React.ElementType> {
  as?: T;
}

// Event handler types
type ClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
type ChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => void;

// Feature flag types
interface FeatureFlagsProps {
  children: React.ReactNode;
  flags: Record<string, boolean>;
}

Install with Tessl CLI

npx tessl i tessl/npm-carbon--react
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@carbon/react@1.90.x
Publish Source
CLI
Badge
tessl/npm-carbon--react badge