or run

tessl search
Log in

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@chakra-ui/react@3.27.x

docs

data-display-components.mddisclosure-components.mdfeedback-components.mdform-components.mdhooks.mdindex.mdlayout-components.mdnavigation-components.mdoverlay-components.mdspecialized-components.mdstyling-system.mdtheme-system.mdtypes.mdtypography-components.md
tile.json

tessl/npm-chakra-ui--react

tessl install tessl/npm-chakra-ui--react@3.27.2

Comprehensive React component library for building accessible, responsive user interfaces with 109+ pre-built components, design tokens, and type-safe styling system

specialized-components.mddocs/

Specialized Components

Specialized components provide focused functionality for specific use cases including avatars, color pickers, file uploads, ratings, and more.

Capabilities

Avatar Component

User avatar component with image, fallback, and grouping support.

import { Avatar, useAvatar, useAvatarContext } from "@chakra-ui/react";

namespace Avatar {
  export const Root: React.FC<{
    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
    variant?: "solid" | "subtle" | "outline";
    colorPalette?: string;
    children?: React.ReactNode;
  }>;
  export const RootProvider: React.FC<any>;
  export const Image: ChakraComponent<"img", {
    src?: string;
    loading?: "eager" | "lazy";
  }>;
  export const Fallback: ChakraComponent<"div", {
    name?: string;
  }>;
  export const Icon: ChakraComponent<"svg">;
  export const Group: ChakraComponent<"div">;
}

function useAvatar(props: UseAvatarProps): UseAvatarReturn;
function useAvatarContext(): AvatarContext;

ColorPicker Component

Comprehensive color picker component with multiple input methods.

import { ColorPicker, useColorPicker, useColorPickerContext, parseColor, getColorChannels } from "@chakra-ui/react";

interface ColorPickerRootProps {
  value?: string;
  defaultValue?: string;
  format?: "rgba" | "hsla" | "hsba";
  disabled?: boolean;
  readOnly?: boolean;
  closeOnSelect?: boolean;
  onValueChange?: (details: { value: string; valueAsString: string }) => void;
  onFormatChange?: (details: { format: string }) => void;
  children?: React.ReactNode;
}

namespace ColorPicker {
  export const Root: React.FC<ColorPickerRootProps>;
  export const RootProvider: React.FC<ColorPickerRootProps>;
  export const Label: ChakraComponent<"label">;
  export const Control: ChakraComponent<"div">;
  export const Trigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Area: ChakraComponent<"div">;
  export const AreaBackground: ChakraComponent<"div">;
  export const AreaThumb: ChakraComponent<"div">;
  export const ChannelInput: ChakraComponent<"input", { channel: string }>;
  export const ChannelSlider: React.FC<{ channel: string; children?: React.ReactNode }>;
  export const ChannelSliderLabel: ChakraComponent<"label">;
  export const ChannelSliderTrack: ChakraComponent<"div">;
  export const ChannelSliderThumb: ChakraComponent<"div">;
  export const ChannelSliderValueText: ChakraComponent<"div">;
  export const ValueText: ChakraComponent<"div">;
  export const ValueSwatch: ChakraComponent<"div">;
  export const View: ChakraComponent<"div">;
  export const EyeDropperTrigger: ChakraComponent<"button">;
  export const FormatTrigger: ChakraComponent<"button">;
  export const FormatSelect: ChakraComponent<"select">;
  export const SwatchGroup: ChakraComponent<"div">;
  export const Swatch: ChakraComponent<"button", { value: string }>;
  export const SwatchTrigger: ChakraComponent<"button", { value: string }>;
  export const SwatchIndicator: ChakraComponent<"div">;
  export const TransparencyGrid: ChakraComponent<"div">;
  export const HiddenInput: React.FC;
}

function parseColor(value: string): Color;
function getColorChannels(format: string): string[];

function useColorPicker(props: UseColorPickerProps): UseColorPickerReturn;
function useColorPickerContext(): ColorPickerContext;

ColorSwatch Component

Simple color swatch display component.

import { ColorSwatch, ColorSwatchMix, ColorSwatchPropsProvider } from "@chakra-ui/react";

interface ColorSwatchProps extends HTMLChakraProps<"div"> {
  value: string;
}

const ColorSwatch: ChakraComponent<"div", ColorSwatchProps>;
const ColorSwatchPropsProvider: React.FC<{ value: ColorSwatchProps; children: React.ReactNode }>;

interface ColorSwatchMixProps extends HTMLChakraProps<"div"> {
  items: string[];
}

const ColorSwatchMix: ChakraComponent<"div", ColorSwatchMixProps>;

Combobox Component

Autocomplete combo box component.

import { Combobox, useCombobox, useComboboxContext, useComboboxItemContext } from "@chakra-ui/react";

interface ComboboxRootProps<T = any> {
  value?: string[];
  defaultValue?: string[];
  inputValue?: string;
  defaultInputValue?: string;
  multiple?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  invalid?: boolean;
  allowCustomValue?: boolean;
  closeOnSelect?: boolean;
  openOnClick?: boolean;
  positioning?: PositioningOptions;
  onValueChange?: (details: { value: string[]; items: T[] }) => void;
  onInputValueChange?: (details: { inputValue: string }) => void;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Combobox {
  export const Root: React.FC<ComboboxRootProps>;
  export const RootProvider: React.FC<ComboboxRootProps>;
  export const Label: ChakraComponent<"label">;
  export const Control: ChakraComponent<"div">;
  export const Input: ChakraComponent<"input">;
  export const Trigger: ChakraComponent<"button">;
  export const ClearTrigger: ChakraComponent<"button">;
  export const IndicatorGroup: ChakraComponent<"div">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const ItemGroup: ChakraComponent<"div">;
  export const ItemGroupLabel: ChakraComponent<"div">;
  export const Item: React.FC<{ value: string; disabled?: boolean; children?: React.ReactNode }>;
  export const ItemText: ChakraComponent<"span">;
  export const ItemIndicator: ChakraComponent<"div">;
  export const Empty: ChakraComponent<"div">;
}

function useCombobox(props: UseComboboxProps): UseComboboxReturn;
function useComboboxContext(): ComboboxContext;
function useComboboxItemContext(): ComboboxItemContext;

Listbox Component

List box selection component for keyboard-accessible selection lists.

import {
  Listbox,
  useListbox,
  useListboxContext,
  useListboxItemContext,
  useListboxStyles,
} from "@chakra-ui/react";

import type {
  ListboxRootProps,
  ListboxRootProviderProps,
  ListboxLabelProps,
  ListboxContentProps,
  ListboxItemGroupProps,
  ListboxItemGroupLabelProps,
  ListboxItemProps,
  ListboxItemTextProps,
  ListboxItemIndicatorProps,
  ListboxValueTextProps,
  ListboxEmptyProps,
  ListboxInputProps,
  UseListboxProps,
  UseListboxReturn,
} from "@chakra-ui/react";

namespace Listbox {
  export const Root: React.FC<ListboxRootProps>;
  export const RootProvider: React.FC<ListboxRootProviderProps>;
  export const PropsProvider: React.FC<{ value: ListboxRootProps; children: React.ReactNode }>;
  export const Label: React.FC<ListboxLabelProps>;
  export const Content: React.FC<ListboxContentProps>;
  export const ItemGroup: React.FC<ListboxItemGroupProps>;
  export const ItemGroupLabel: React.FC<ListboxItemGroupLabelProps>;
  export const Item: React.FC<ListboxItemProps>;
  export const ItemText: React.FC<ListboxItemTextProps>;
  export const ItemIndicator: React.FC<ListboxItemIndicatorProps>;
  export const ValueText: React.FC<ListboxValueTextProps>;
  export const Empty: React.FC<ListboxEmptyProps>;
  export const Input: React.FC<ListboxInputProps>;
  export const Context: React.Context<any>;
}

interface ListboxRootProps extends HTMLChakraProps<"div">, UseListboxProps {}

function useListbox(props: UseListboxProps): UseListboxReturn;
function useListboxContext(): any;
function useListboxItemContext(): any;
function useListboxStyles(): Record<string, SystemStyleObject>;

RatingGroup Component

Star rating component for reviews.

import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@chakra-ui/react";

interface RatingGroupRootProps {
  name?: string;
  value?: number;
  defaultValue?: number;
  count?: number;
  disabled?: boolean;
  readOnly?: boolean;
  allowHalf?: boolean;
  autoFocus?: boolean;
  onValueChange?: (details: { value: number }) => void;
  onHoverChange?: (details: { value: number }) => void;
  children?: React.ReactNode;
}

namespace RatingGroup {
  export const Root: React.FC<RatingGroupRootProps>;
  export const RootProvider: React.FC<RatingGroupRootProps>;
  export const Label: ChakraComponent<"label">;
  export const Control: ChakraComponent<"div", {
    size?: "sm" | "md" | "lg";
    colorPalette?: string;
  }>;
  export const Item: React.FC<{ index: number; children?: React.ReactNode }>;
  export const ItemIndicator: ChakraComponent<"div">;
  export const Items: React.FC<{ count?: number; children?: React.ReactNode }>;
  export const HiddenInput: React.FC;
}

function useRatingGroup(props: UseRatingGroupProps): UseRatingGroupReturn;
function useRatingGroupContext(): RatingGroupContext;
function useRatingGroupItemContext(): RatingGroupItemContext;

SegmentGroup Component

Segmented control component for exclusive selection.

import { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "@chakra-ui/react";

interface SegmentGroupRootProps {
  value?: string;
  defaultValue?: string;
  name?: string;
  disabled?: boolean;
  orientation?: "horizontal" | "vertical";
  onValueChange?: (details: { value: string }) => void;
  children?: React.ReactNode;
}

namespace SegmentGroup {
  export const Root: React.FC<SegmentGroupRootProps>;
  export const RootProvider: React.FC<SegmentGroupRootProps>;
  export const Items: ChakraComponent<"div", {
    variant?: "outline" | "subtle";
    size?: "sm" | "md" | "lg";
  }>;
  export const Item: React.FC<{ value: string; disabled?: boolean; children?: React.ReactNode }>;
  export const ItemText: ChakraComponent<"span">;
  export const Indicator: ChakraComponent<"div">;
  export const ItemHiddenInput: React.FC;
}

function useSegmentGroup(props: UseSegmentGroupProps): UseSegmentGroupReturn;
function useSegmentGroupContext(): SegmentGroupContext;
function useSegmentGroupItemContext(): SegmentGroupItemContext;

ScrollArea Component

Custom scrollable area with styled scrollbars.

import { ScrollArea, useScrollArea, useScrollAreaContext } from "@chakra-ui/react";

interface ScrollAreaRootProps {
  type?: "hover" | "scroll" | "always" | "auto";
  scrollHideDelay?: number;
  dir?: "ltr" | "rtl";
  children?: React.ReactNode;
}

namespace ScrollArea {
  export const Root: React.FC<ScrollAreaRootProps>;
  export const RootProvider: React.FC<ScrollAreaRootProps>;
  export const Viewport: ChakraComponent<"div", {
    size?: "sm" | "md" | "lg";
  }>;
  export const Content: ChakraComponent<"div">;
  export const Scrollbar: ChakraComponent<"div", {
    orientation?: "horizontal" | "vertical";
  }>;
  export const Thumb: ChakraComponent<"div">;
  export const Corner: ChakraComponent<"div">;
}

function useScrollArea(props: UseScrollAreaProps): UseScrollAreaReturn;
function useScrollAreaContext(): ScrollAreaContext;

TreeView Component

Tree view component for hierarchical data.

import { TreeView, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "@chakra-ui/react";

interface TreeViewRootProps {
  selectedValue?: string[];
  defaultSelectedValue?: string[];
  expandedValue?: string[];
  defaultExpandedValue?: string[];
  focusedValue?: string;
  selectionMode?: "single" | "multiple";
  expandOnClick?: boolean;
  onSelectedChange?: (details: { selectedValue: string[] }) => void;
  onExpandedChange?: (details: { expandedValue: string[] }) => void;
  onFocusChange?: (details: { focusedValue: string | null }) => void;
  children?: React.ReactNode;
}

namespace TreeView {
  export const Root: React.FC<TreeViewRootProps>;
  export const RootProvider: React.FC<TreeViewRootProps>;
  export const Label: ChakraComponent<"div">;
  export const Tree: ChakraComponent<"ul">;
  export const Branch: React.FC<{ value: string; children?: React.ReactNode }>;
  export const BranchControl: ChakraComponent<"div">;
  export const BranchTrigger: ChakraComponent<"button">;
  export const BranchIndicator: ChakraComponent<"div">;
  export const BranchText: ChakraComponent<"span">;
  export const BranchContent: ChakraComponent<"ul">;
  export const BranchIndentGuide: ChakraComponent<"div">;
  export const Item: ChakraComponent<"li", { value: string }>;
  export const ItemText: ChakraComponent<"span">;
  export const ItemIndicator: ChakraComponent<"div">;
  export const Node: React.FC<{ value: string; children?: React.ReactNode }>;
  export const NodeCheckbox: ChakraComponent<"input">;
  export const NodeCheckboxIndicator: ChakraComponent<"div">;
}

function useTreeView(props: UseTreeViewProps): UseTreeViewReturn;
function useTreeViewContext(): TreeViewContext;
function useTreeViewNodeContext(): TreeViewNodeContext;

Toggle Component

Toggle button component.

import { Toggle, useToggle, useToggleContext } from "@chakra-ui/react";

interface ToggleRootProps {
  pressed?: boolean;
  defaultPressed?: boolean;
  disabled?: boolean;
  onPressedChange?: (details: { pressed: boolean }) => void;
  children?: React.ReactNode;
}

namespace Toggle {
  export const Root: ChakraComponent<"button", ToggleRootProps>;
  export const Indicator: ChakraComponent<"div">;
}

function useToggle(props: UseToggleProps): UseToggleReturn;
function useToggleContext(): ToggleContext;

Clipboard Component

Clipboard copy component with feedback.

import { Clipboard, useClipboard, useClipboardContext } from "@chakra-ui/react";

interface ClipboardRootProps {
  value: string;
  timeout?: number;
  onStatusChange?: (details: { copied: boolean }) => void;
  children?: React.ReactNode;
}

namespace Clipboard {
  export const Root: React.FC<ClipboardRootProps>;
  export const RootProvider: React.FC<ClipboardRootProps>;
  export const Label: ChakraComponent<"label">;
  export const Control: ChakraComponent<"div">;
  export const Trigger: ChakraComponent<"button">;
  export const Indicator: ChakraComponent<"div">;
  export const Input: ChakraComponent<"input">;
  export const ValueText: ChakraComponent<"div">;
  export const CopyText: ChakraComponent<"div">;
}

function useClipboard(props: UseClipboardProps): UseClipboardReturn;
function useClipboardContext(): ClipboardContext;

Icon Component

Icon wrapper component with factory function.

import { Icon, createIcon, IconPropsProvider } from "@chakra-ui/react";

interface IconProps extends HTMLChakraProps<"svg"> {
  viewBox?: string;
}

const Icon: ChakraComponent<"svg", IconProps>;
const IconPropsProvider: React.FC<{ value: IconProps; children: React.ReactNode }>;

function createIcon(options: {
  displayName: string;
  viewBox?: string;
  d?: string;
  path?: React.ReactElement | React.ReactElement[];
  defaultProps?: IconProps;
}): React.FC<IconProps>;

Usage:

const CustomIcon = createIcon({
  displayName: "CustomIcon",
  viewBox: "0 0 24 24",
  d: "M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z",
});

Checkmark and Radiomark Components

Icon components for checkbox and radio indicators.

import { Checkmark, Radiomark } from "@chakra-ui/react";

interface CheckmarkProps extends HTMLChakraProps<"svg"> {
  checked?: boolean;
  indeterminate?: boolean;
}

const Checkmark: ChakraComponent<"svg", CheckmarkProps>;

interface RadiomarkProps extends HTMLChakraProps<"svg"> {
  checked?: boolean;
}

const Radiomark: ChakraComponent<"svg", RadiomarkProps>;

Format Components

Number and byte formatting components.

import { FormatNumber, FormatByte } from "@chakra-ui/react";

interface FormatNumberProps {
  value: number;
  locale?: string;
  style?: "decimal" | "currency" | "percent" | "unit";
  currency?: string;
  unit?: string;
  notation?: "standard" | "scientific" | "engineering" | "compact";
  minimumFractionDigits?: number;
  maximumFractionDigits?: number;
}

const FormatNumber: React.FC<FormatNumberProps>;

interface FormatByteProps {
  value: number;
  locale?: string;
  unit?: "bit" | "byte";
  unitDisplay?: "short" | "long";
}

const FormatByte: React.FC<FormatByteProps>;

Separator Component

Visual separator/divider component.

import { Separator, SeparatorPropsProvider } from "@chakra-ui/react";

interface SeparatorProps extends HTMLChakraProps<"hr"> {
  orientation?: "horizontal" | "vertical";
  variant?: "solid" | "dashed" | "dotted";
}

const Separator: ChakraComponent<"hr", SeparatorProps>;
const SeparatorPropsProvider: React.FC<{ value: SeparatorProps; children: React.ReactNode }>;

DownloadTrigger Component

File download trigger component that enables downloading data or files.

import { DownloadTrigger } from "@chakra-ui/react";

interface DownloadTriggerProps extends HTMLChakraProps<"a"> {
  filename: string;
  data: string | (() => string) | (() => Promise<string>);
}

const DownloadTrigger: ChakraComponent<"a", DownloadTriggerProps>;

FocusTrap Component

Focus trap wrapper for modals and overlays.

import { FocusTrap } from "@chakra-ui/react";

interface FocusTrapProps {
  disabled?: boolean;
  children: React.ReactNode;
}

const FocusTrap: React.FC<FocusTrapProps>;

Presence Component

Presence detection for enter/exit animations.

import { Presence } from "@chakra-ui/react";

interface PresenceProps {
  present: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  onExitComplete?: () => void;
  children: React.ReactNode;
}

const Presence: React.FC<PresenceProps>;

VisuallyHidden Component

Screen reader only content.

import { VisuallyHidden, visuallyHiddenStyle } from "@chakra-ui/react";

interface VisuallyHiddenProps extends HTMLChakraProps<"span"> {}

const VisuallyHidden: ChakraComponent<"span", VisuallyHiddenProps>;

const visuallyHiddenStyle: SystemStyleObject;

Theme Component

Container component for applying theme appearance (light/dark mode) to a section of the UI.

import { Theme } from "@chakra-ui/react";

interface ThemeProps extends HTMLChakraProps<"div"> {
  appearance?: "light" | "dark";
  hasBackground?: boolean;
}

const Theme: ChakraComponent<"div", ThemeProps>;

Usage:

// Apply dark theme to a section
<Theme appearance="dark">
  <Box p="4">This content uses dark theme</Box>
</Theme>

// Apply light theme without background
<Theme appearance="light" hasBackground={false}>
  <Text>Light themed text without background</Text>
</Theme>

Utility Components

Helper components for conditional rendering and list iteration.

import { For, Show, ClientOnly } from "@chakra-ui/react";

// For component
interface ForProps<T> {
  each: T[];
  fallback?: React.ReactNode;
  children: (item: T, index: number) => React.ReactNode;
}

function For<T>(props: ForProps<T>): React.ReactElement;

// Show component
interface ShowProps {
  when: boolean;
  fallback?: React.ReactNode;
  children: React.ReactNode;
}

const Show: React.FC<ShowProps>;

// ClientOnly component
interface ClientOnlyProps {
  fallback?: React.ReactNode;
  children: React.ReactNode;
}

const ClientOnly: React.FC<ClientOnlyProps>;

Environment and Locale

Context providers for environment and localization.

import { EnvironmentProvider, LocaleProvider, useEnvironmentContext, useLocaleContext } from "@chakra-ui/react";

interface EnvironmentProviderProps {
  value: EnvironmentContext;
  children: React.ReactNode;
}

interface EnvironmentContext {
  window: Window;
  document: Document;
  getRootNode?: () => Document | ShadowRoot;
}

const EnvironmentProvider: React.FC<EnvironmentProviderProps>;
function useEnvironmentContext(): EnvironmentContext;

interface LocaleProviderProps {
  locale?: string;
  dir?: "ltr" | "rtl";
  children: React.ReactNode;
}

const LocaleProvider: React.FC<LocaleProviderProps>;
function useLocaleContext(): { locale: string; dir: "ltr" | "rtl" };

Types

interface Color {
  toString(): string;
  toHex(): string;
  toRgb(): { r: number; g: number; b: number; a: number };
  toHsl(): { h: number; s: number; l: number; a: number };
}

interface UseClipboardProps {
  value: string;
  timeout?: number;
}

interface UseClipboardReturn {
  value: string;
  copied: boolean;
  copy: () => void;
  setValue: (value: string) => void;
}