tessl/npm-chakra-ui--react

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Data Display Components

Name: tessl/npm-chakra-ui--react
Author: tessl

Data display components provide visual representations of information including badges, cards, tables, stats, and more.

Capabilities

Badge Component

Small status indicator or label.

import { Badge, BadgePropsProvider } from "@chakra-ui/react";

interface BadgeProps extends HTMLChakraProps<"span"> {
  variant?: "solid" | "subtle" | "outline" | "surface";
  size?: "sm" | "md" | "lg";
  colorPalette?: string;
}

const Badge: ChakraComponent<"span", BadgeProps>;
const BadgePropsProvider: React.FC<{ value: BadgeProps; children: React.ReactNode }>;

Avatar Component

Multi-part component for displaying user avatars with images, fallbacks, and status indicators.

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

interface AvatarRootProviderBaseProps
  extends Assign<ArkAvatar.RootProviderBaseProps, SlotRecipeProps<"avatar">>,
    UnstyledProp {}

interface AvatarRootProviderProps
  extends HTMLChakraProps<"div", AvatarRootProviderBaseProps> {}

const AvatarRootProvider: ChakraComponent<"div", AvatarRootProviderProps>;

interface AvatarRootBaseProps
  extends Assign<ArkAvatar.RootBaseProps, SlotRecipeProps<"avatar">>,
    UnstyledProp {}

interface AvatarRootProps extends HTMLChakraProps<"div", AvatarRootBaseProps> {}

const AvatarRoot: ChakraComponent<"div", AvatarRootProps>;

const AvatarPropsProvider: React.Provider<AvatarRootBaseProps>;

interface AvatarFallbackProps extends HTMLChakraProps<"div", ArkAvatar.FallbackProps> {
  name?: string;
}

const AvatarFallback: ChakraComponent<"div", AvatarFallbackProps>;

interface AvatarImageProps
  extends HTMLChakraProps<"img", ArkAvatar.ImageProps>,
    UnstyledProp {}

const AvatarImage: ChakraComponent<"img", AvatarImageProps>;

interface AvatarIconProps extends HTMLChakraProps<"svg"> {}

const AvatarIcon: ChakraComponent<"svg", AvatarIconProps>;

const AvatarContext: React.Context<ArkAvatar.UseAvatarReturn>;

interface AvatarStatusChangeDetails extends ArkAvatar.StatusChangeDetails {}

interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}

const AvatarGroup: ChakraComponent<"div", AvatarGroupProps>;

function useAvatarStyles(): Record<string, SystemStyleObject>;

Usage:

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

// Basic avatar with image
<Avatar.Root>
  <Avatar.Image src="/path/to/image.jpg" alt="User Name" />
  <Avatar.Fallback name="User Name" />
</Avatar.Root>

// Avatar with name-based fallback (shows initials)
<Avatar.Root>
  <Avatar.Fallback name="Jane Doe" />
</Avatar.Root>

// Avatar group
<Avatar.Group>
  <Avatar.Root>
    <Avatar.Image src="/user1.jpg" alt="User 1" />
    <Avatar.Fallback name="User 1" />
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="/user2.jpg" alt="User 2" />
    <Avatar.Fallback name="User 2" />
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="/user3.jpg" alt="User 3" />
    <Avatar.Fallback name="User 3" />
  </Avatar.Root>
</Avatar.Group>

// With variants
<Avatar.Root size="lg" variant="subtle" colorPalette="blue">
  <Avatar.Fallback name="John Smith" />
</Avatar.Root>

Card Component

Container for grouping related content.

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

namespace Card {
  export const Root: ChakraComponent<"div", {
    variant?: "elevated" | "outline" | "subtle";
    size?: "sm" | "md" | "lg";
  }>;
  export const Header: ChakraComponent<"div">;
  export const Body: ChakraComponent<"div">;
  export const Footer: ChakraComponent<"div">;
  export const Title: ChakraComponent<"h2">;
  export const Description: ChakraComponent<"p">;
}

Tag Component

Tag component for labels, categories, and removable items.

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

namespace Tag {
  export const Root: ChakraComponent<"span", {
    variant?: "solid" | "subtle" | "outline" | "surface";
    size?: "sm" | "md" | "lg";
    colorPalette?: string;
  }>;
  export const Label: ChakraComponent<"span">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const StartElement: ChakraComponent<"span">;
  export const EndElement: ChakraComponent<"span">;
}

Image Component

Image component with lazy loading and fallback support.

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

interface ImageProps extends HTMLChakraProps<"img"> {
  src: string;
  srcSet?: string;
  sizes?: string;
  alt?: string;
  loading?: "eager" | "lazy";
  crossOrigin?: "anonymous" | "use-credentials";
  onLoad?: () => void;
  onError?: () => void;
  fallbackSrc?: string;
  fallback?: React.ReactElement;
  ignoreFallback?: boolean;
}

const Image: ChakraComponent<"img", ImageProps>;

Table Component

Multi-part table component for tabular data.

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

namespace Table {
  export const Root: ChakraComponent<"table", {
    variant?: "line" | "outline" | "plain";
    size?: "sm" | "md" | "lg";
    showColumnBorder?: boolean;
    stickyHeader?: boolean;
    interactive?: boolean;
  }>;
  export const Header: ChakraComponent<"thead">;
  export const Body: ChakraComponent<"tbody">;
  export const Footer: ChakraComponent<"tfoot">;
  export const Row: ChakraComponent<"tr">;
  export const Cell: ChakraComponent<"td">;
  export const ColumnHeader: ChakraComponent<"th">;
  export const Caption: ChakraComponent<"caption">;
  export const ScrollArea: ChakraComponent<"div">;
  export const ColumnGroup: ChakraComponent<"colgroup">;
  export const Column: ChakraComponent<"col">;
}

DataList Component

Key-value data list for displaying structured information.

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

namespace DataList {
  export const Root: ChakraComponent<"dl", {
    orientation?: "horizontal" | "vertical";
  }>;
  export const Item: ChakraComponent<"div">;
  export const ItemLabel: ChakraComponent<"dt">;
  export const ItemValue: ChakraComponent<"dd">;
}

Stat Component

Display statistics with indicators and trends.

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

namespace Stat {
  export const Root: ChakraComponent<"div", {
    size?: "sm" | "md" | "lg";
  }>;
  export const Label: ChakraComponent<"dt">;
  export const ValueText: ChakraComponent<"dd">;
  export const ValueUnit: ChakraComponent<"span">;
  export const HelpText: ChakraComponent<"div">;
  export const UpIndicator: ChakraComponent<"div">;
  export const DownIndicator: ChakraComponent<"div">;
  export const Group: ChakraComponent<"div">;
}

Status Component

Status indicator with dot and label.

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

namespace Status {
  export const Root: ChakraComponent<"div", {
    colorPalette?: "success" | "error" | "warning" | "info";
    size?: "sm" | "md" | "lg";
  }>;
  export const Indicator: ChakraComponent<"div">;
}

Timeline Component

Timeline display for chronological events.

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

namespace Timeline {
  export const Root: ChakraComponent<"div", {
    variant?: "solid" | "subtle" | "outline";
    orientation?: "vertical" | "horizontal";
  }>;
  export const Item: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"div">;
  export const Indicator: ChakraComponent<"div">;
  export const Connector: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Title: ChakraComponent<"div">;
  export const Description: ChakraComponent<"div">;
}

EmptyState Component

Placeholder for empty states and no-data scenarios.

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

namespace EmptyState {
  export const Root: ChakraComponent<"div", {
    size?: "sm" | "md" | "lg";
  }>;
  export const Content: ChakraComponent<"div">;
  export const Indicator: ChakraComponent<"div">;
  export const Title: ChakraComponent<"h3">;
  export const Description: ChakraComponent<"p">;
}

QrCode Component

QR code generator component.

import { QrCode, useQrCode, useQrCodeContext } from "@chakra-ui/react";

interface QrCodeRootProps {
  value: string;
  encoding?: {
    ecc?: "L" | "M" | "Q" | "H";
    mode?: "numeric" | "alphanumeric" | "byte" | "kanji";
    mask?: number;
  };
  children?: React.ReactNode;
}

namespace QrCode {
  export const Root: React.FC<QrCodeRootProps>;
  export const RootProvider: React.FC<QrCodeRootProps>;
  export const Frame: ChakraComponent<"svg">;
  export const Pattern: ChakraComponent<"path">;
  export const Overlay: ChakraComponent<"div">;
}

function useQrCode(props: { value: string; encoding?: any }): UseQrCodeReturn;
function useQrCodeContext(): QrCodeContext;

Types

interface UseQrCodeReturn {
  value: string;
  dataURL: string;
}

interface QrCodeContext {
  value: string;
  dataURL: string;
}

Install with Tessl CLI

npx tessl i tessl/npm-chakra-ui--react@3.27.3

docs

data-display-components.md

disclosure-components.md

feedback-components.md

overlay-components.md

specialized-components.md

styling-system.md

theme-system.md

types.md

typography-components.md

tile.json

tessl/npm-chakra-ui--react