or run

tessl search

Version

Workspace: tessl
Visibility: Public
Created: 1 day ago
Last updated: 1 day ago
Describes: pkg:npm/@chakra-ui/react@3.27.x

docs

data-display-components.md disclosure-components.md feedback-components.md form-components.md hooks.md index.md layout-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

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

Overlay Components

Overlay components provide layered UI elements including modals, drawers, popovers, tooltips, and menus that appear above the main content.

Capabilities

Dialog Component

Modal dialog component for focused interactions.

import { Dialog, useDialog, useDialogContext } from "@chakra-ui/react";

interface DialogRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  modal?: boolean;
  closeOnEscape?: boolean;
  closeOnInteractOutside?: boolean;
  preventScroll?: boolean;
  role?: "dialog" | "alertdialog";
  onOpenChange?: (details: { open: boolean }) => void;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onInteractOutside?: (event: Event) => void;
  children?: React.ReactNode;
}

namespace Dialog {
  export const Root: React.FC<DialogRootProps>;
  export const RootProvider: React.FC<DialogRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Backdrop: ChakraComponent<"div">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  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">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const ActionTrigger: ChakraComponent<"button">;
}

function useDialog(props: UseDialogProps): UseDialogReturn;
function useDialogContext(): DialogContext;

Usage:

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Header>
        <Dialog.Title>Dialog Title</Dialog.Title>
      </Dialog.Header>
      <Dialog.Body>Dialog content goes here</Dialog.Body>
      <Dialog.Footer>
        <Dialog.CloseTrigger>Cancel</Dialog.CloseTrigger>
        <Dialog.ActionTrigger>Confirm</Dialog.ActionTrigger>
      </Dialog.Footer>
      <Dialog.CloseTrigger />
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Drawer Component

Side panel drawer component.

import { Drawer, useDrawer, useDrawerContext } from "@chakra-ui/react";

interface DrawerRootProps extends DialogRootProps {
  placement?: "start" | "end" | "top" | "bottom";
}

namespace Drawer {
  export const Root: React.FC<DrawerRootProps>;
  export const RootProvider: React.FC<DrawerRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Backdrop: ChakraComponent<"div">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  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">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const ActionTrigger: ChakraComponent<"button">;
}

function useDrawer(props: UseDialogProps): UseDialogReturn;
function useDrawerContext(): DialogContext;

Popover Component

Popover overlay component for contextual information.

import { Popover, usePopover, usePopoverContext } from "@chakra-ui/react";

interface PopoverRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  autoFocus?: boolean;
  modal?: boolean;
  closeOnEscape?: boolean;
  closeOnInteractOutside?: boolean;
  portalled?: boolean;
  positioning?: PositioningOptions;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Popover {
  export const Root: React.FC<PopoverRootProps>;
  export const RootProvider: React.FC<PopoverRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Anchor: ChakraComponent<"div">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    portalled?: boolean;
  }>;
  export const Header: ChakraComponent<"div">;
  export const Body: ChakraComponent<"div">;
  export const Footer: ChakraComponent<"div">;
  export const Title: ChakraComponent<"h3">;
  export const Description: ChakraComponent<"p">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function usePopover(props: UsePopoverProps): UsePopoverReturn;
function usePopoverContext(): PopoverContext;

Tooltip Component

Tooltip overlay for additional context on hover.

import { Tooltip, useTooltip, useTooltipContext } from "@chakra-ui/react";

interface TooltipRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  openDelay?: number;
  closeDelay?: number;
  closeOnEscape?: boolean;
  closeOnPointerDown?: boolean;
  interactive?: boolean;
  disabled?: boolean;
  positioning?: PositioningOptions;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Tooltip {
  export const Root: React.FC<TooltipRootProps>;
  export const RootProvider: React.FC<TooltipRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    portalled?: boolean;
  }>;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function useTooltip(props: UseTooltipProps): UseTooltipReturn;
function useTooltipContext(): TooltipContext;

Usage:

<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>Tooltip content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Menu Component

Dropdown menu component for actions and navigation.

import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@chakra-ui/react";

interface MenuRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  closeOnSelect?: boolean;
  loop?: boolean;
  positioning?: PositioningOptions;
  onSelect?: (details: { value: string }) => void;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Menu {
  export const Root: React.FC<MenuRootProps>;
  export const RootProvider: React.FC<MenuRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const TriggerItem: ChakraComponent<"div">;
  export const ContextTrigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    portalled?: boolean;
  }>;
  export const Item: ChakraComponent<"div", {
    value?: string;
    disabled?: boolean;
    closeOnSelect?: boolean;
  }>;
  export const ItemText: ChakraComponent<"div">;
  export const ItemCommand: ChakraComponent<"div">;
  export const ItemIndicator: ChakraComponent<"div">;
  export const ItemGroup: ChakraComponent<"div">;
  export const ItemGroupLabel: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"hr">;
  export const CheckboxItem: ChakraComponent<"div", {
    value: string;
    checked?: boolean;
    onCheckedChange?: (details: { checked: boolean }) => void;
  }>;
  export const RadioItemGroup: React.FC<{
    value?: string;
    onValueChange?: (details: { value: string }) => void;
    children?: React.ReactNode;
  }>;
  export const RadioItem: ChakraComponent<"div", { value: string }>;
  export const Indicator: ChakraComponent<"div">;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function useMenu(props: UseMenuProps): UseMenuReturn;
function useMenuContext(): MenuContext;
function useMenuItemContext(): MenuItemContext;

HoverCard Component

Hover-triggered card overlay for rich content.

import { HoverCard, useHoverCard, useHoverCardContext } from "@chakra-ui/react";

interface HoverCardRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  openDelay?: number;
  closeDelay?: number;
  positioning?: PositioningOptions;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace HoverCard {
  export const Root: React.FC<HoverCardRootProps>;
  export const RootProvider: React.FC<HoverCardRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function useHoverCard(props: UseHoverCardProps): UseHoverCardReturn;
function useHoverCardContext(): HoverCardContext;

ActionBar Component

Floating action bar for contextual actions.

import { ActionBar, useActionBar, useActionBarContext } from "@chakra-ui/react";

interface ActionBarRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace ActionBar {
  export const Root: React.FC<ActionBarRootProps>;
  export const RootProvider: React.FC<ActionBarRootProps>;
  export const SelectionTrigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"div">;
  export const CloseTrigger: ChakraComponent<"button">;
}

function useActionBar(props: any): any;
function useActionBarContext(): any;

Portal Component

Renders children into a portal (document.body by default).

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

interface PortalProps {
  children: React.ReactNode;
  container?: HTMLElement;
  disabled?: boolean;
}

const Portal: React.FC<PortalProps>;

Types

interface UseDialogProps {
  open?: boolean;
  defaultOpen?: boolean;
  modal?: boolean;
  onOpenChange?: (details: { open: boolean }) => void;
}

interface UseDialogReturn {
  open: boolean;
  setOpen: (open: boolean) => void;
  getTriggerProps: () => any;
  getBackdropProps: () => any;
  getContentProps: () => any;
  getCloseTriggerProps: () => any;
}

interface DialogContext extends UseDialogReturn {}

interface PositioningOptions {
  placement?: Placement;
  strategy?: "absolute" | "fixed";
  offset?: { mainAxis?: number; crossAxis?: number };
  flip?: boolean;
  slide?: boolean;
  overlap?: boolean;
  sameWidth?: boolean;
  fitViewport?: boolean;
}

type Placement =
  | "top"
  | "top-start"
  | "top-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end"
  | "right"
  | "right-start"
  | "right-end";

Version

tessl/npm-chakra-ui--react