or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ai-advanced.mddata-display.mdform-components.mdindex.mdinput-selection.mdlayout-navigation.mdloading-progress.mdmodal-overlay.mdtheming-customization.mdtiles-layout.md
tile.json

tessl/npm-carbon--react

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@carbon/react@1.90.x

To install, run

npx @tessl/cli install tessl/npm-carbon--react@1.90.0

index.mddocs/

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>;
}