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

Feedback Components

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

Feedback components provide visual feedback to users including alerts, toasts, progress indicators, and loading states.

Capabilities

Alert Component

Alert message component for important information.

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

namespace Alert {
  export const Root: ChakraComponent<"div", {
    status?: "info" | "warning" | "success" | "error";
    variant?: "solid" | "subtle" | "outline" | "surface";
  }>;
  export const Content: ChakraComponent<"div">;
  export const Indicator: ChakraComponent<"div">;
  export const Title: ChakraComponent<"h4">;
  export const Description: ChakraComponent<"p">;
}

Toast Component

Toast notification system for temporary messages.

import { createToaster, Toaster, Toast, useToastStyles } from "@chakra-ui/react";

interface CreateToasterProps {
  placement?:
    | "top-start"
    | "top"
    | "top-end"
    | "bottom-start"
    | "bottom"
    | "bottom-end";
  duration?: number;
  max?: number;
  overlap?: boolean;
  gap?: string | number;
  pauseOnPageIdle?: boolean;
  pauseOnInteraction?: boolean;
}

interface CreateToasterReturn {
  (options: ToastOptions): void;
  success: (options: Omit<ToastOptions, "status">) => void;
  error: (options: Omit<ToastOptions, "status">) => void;
  warning: (options: Omit<ToastOptions, "status">) => void;
  info: (options: Omit<ToastOptions, "status">) => void;
  loading: (options: Omit<ToastOptions, "status">) => void;
  promise: <T>(promise: Promise<T>, options: PromiseToastOptions) => void;
  dismiss: (id?: string) => void;
  dismissAll: () => void;
  update: (id: string, options: ToastOptions) => void;
  isActive: (id: string) => boolean;
}

function createToaster(props?: CreateToasterProps): CreateToasterReturn;

interface ToasterProps {
  toaster: CreateToasterReturn;
  insetInline?: ConditionalValue<string | number>;
  children?: (toast: any) => React.ReactNode;
}

const Toaster: React.FC<ToasterProps>;

namespace Toast {
  export const Root: ChakraComponent<"div", {
    status?: "info" | "warning" | "success" | "error" | "loading";
  }>;
  export const Title: ChakraComponent<"div">;
  export const Description: ChakraComponent<"div">;
  export const Indicator: ChakraComponent<"div">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const ActionTrigger: ChakraComponent<"button">;
}

interface ToastOptions {
  id?: string;
  title?: React.ReactNode;
  description?: React.ReactNode;
  status?: "info" | "warning" | "success" | "error" | "loading";
  duration?: number;
  isClosable?: boolean;
  onClose?: () => void;
  action?: {
    label: string;
    onClick: () => void;
  };
  meta?: {
    closable?: boolean;
  };
}

interface PromiseToastOptions {
  loading: Omit<ToastOptions, "status">;
  success: Omit<ToastOptions, "status">;
  error: Omit<ToastOptions, "status">;
}

// Hook for accessing resolved toast styles
function useToastStyles(): {
  root: SystemStyleObject;
  title: SystemStyleObject;
  description: SystemStyleObject;
  indicator: SystemStyleObject;
  closeTrigger: SystemStyleObject;
  actionTrigger: SystemStyleObject;
};

Usage:

import { createToaster, Toaster, Toast } from "@chakra-ui/react";

const toaster = createToaster({
  placement: "bottom-end",
  duration: 3000,
});

// In your app root
<Toaster toaster={toaster}>
  {(toast) => (
    <Toast.Root>
      <Toast.Title>{toast.title}</Toast.Title>
      <Toast.Description>{toast.description}</Toast.Description>
      <Toast.CloseTrigger />
    </Toast.Root>
  )}
</Toaster>

// Trigger toasts
toaster.success({ title: "Success!", description: "Operation completed" });
toaster.error({ title: "Error!", description: "Something went wrong" });

Progress Component

Linear progress bar indicator.

import { Progress, useProgress, useProgressContext } from "@chakra-ui/react";

interface ProgressRootProps {
  value?: number;
  min?: number;
  max?: number;
  orientation?: "horizontal" | "vertical";
  variant?: "outline" | "subtle";
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  colorPalette?: string;
  striped?: boolean;
  animated?: boolean;
  children?: React.ReactNode;
}

namespace Progress {
  export const Root: React.FC<ProgressRootProps>;
  export const RootProvider: React.FC<ProgressRootProps>;
  export const Label: ChakraComponent<"label">;
  export const Track: ChakraComponent<"div">;
  export const Range: ChakraComponent<"div">;
  export const ValueText: ChakraComponent<"div">;
}

function useProgress(props: UseProgressProps): UseProgressReturn;
function useProgressContext(): ProgressContext;

ProgressCircle Component

Circular progress indicator.

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

interface ProgressCircleRootProps {
  value?: number;
  min?: number;
  max?: number;
  size?: "xs" | "sm" | "md" | "lg";
  thickness?: string | number;
  colorPalette?: string;
  children?: React.ReactNode;
}

namespace ProgressCircle {
  export const Root: React.FC<ProgressCircleRootProps>;
  export const RootProvider: React.FC<ProgressCircleRootProps>;
  export const Label: ChakraComponent<"label">;
  export const Circle: ChakraComponent<"svg">;
  export const Track: ChakraComponent<"circle">;
  export const Range: ChakraComponent<"circle">;
  export const ValueText: ChakraComponent<"div">;
}

Spinner Component

Loading spinner indicator.

import { Spinner, SpinnerPropsProvider } from "@chakra-ui/react";

interface SpinnerProps extends HTMLChakraProps<"div"> {
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  colorPalette?: string;
  borderWidth?: string | number;
}

const Spinner: ChakraComponent<"div", SpinnerProps>;
const SpinnerPropsProvider: React.FC<{ value: SpinnerProps; children: React.ReactNode }>;

Loader Component

Loading indicator with overlay option.

import { Loader, LoaderOverlay } from "@chakra-ui/react";

interface LoaderProps extends HTMLChakraProps<"div"> {
  colorPalette?: string;
}

const Loader: ChakraComponent<"div", LoaderProps>;

interface LoaderOverlayProps extends HTMLChakraProps<"div"> {
  children?: React.ReactNode;
}

const LoaderOverlay: ChakraComponent<"div", LoaderOverlayProps>;

Skeleton Component

Content placeholder skeleton for loading states.

import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";

interface SkeletonProps extends HTMLChakraProps<"div"> {
  loading?: boolean;
  fadeDuration?: number;
  speed?: number;
  startColor?: string;
  endColor?: string;
}

const Skeleton: ChakraComponent<"div", SkeletonProps>;
const SkeletonPropsProvider: React.FC<{ value: SkeletonProps; children: React.ReactNode }>;

interface SkeletonCircleProps extends SkeletonProps {
  size?: ConditionalValue<string | number>;
}

const SkeletonCircle: ChakraComponent<"div", SkeletonCircleProps>;

interface SkeletonTextProps extends SkeletonProps {
  noOfLines?: number;
  spacing?: ConditionalValue<string | number>;
  skeletonHeight?: ConditionalValue<string | number>;
}

const SkeletonText: ChakraComponent<"div", SkeletonTextProps>;

Usage:

<Skeleton loading={isLoading} height="20px">
  <Text>Content that will be shown when loaded</Text>
</Skeleton>

Types

interface UseProgressProps {
  value?: number;
  min?: number;
  max?: number;
}

interface UseProgressReturn {
  value: number;
  percent: number;
  isIndeterminate: boolean;
  isComplete: boolean;
}

interface ProgressContext extends UseProgressReturn {}

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