tessl/npm-chakra-ui--accordion

A simple and accessible accordion component for React & Chakra UI

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Chakra UI Accordion

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

Chakra UI Accordion is a React component library that provides accessible, vertically stacked interactive content sections with expandable/collapsible functionality. Built following WAI-ARIA practices, it offers comprehensive keyboard navigation support and seamless integration with the Chakra UI design system.

Package Information

Package Name: @chakra-ui/accordion
Package Type: npm
Language: TypeScript/React
Installation: npm install @chakra-ui/accordion

Core Imports

import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from "@chakra-ui/accordion";

For hook-based and advanced usage:

import {
  useAccordion,
  useAccordionItem,
  useAccordionContext,
  useAccordionItemState,
  useAccordionStyles,
  AccordionProvider,
} from "@chakra-ui/accordion";

Basic Usage

import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from "@chakra-ui/accordion";

function BasicAccordion() {
  return (
    <Accordion>
      <AccordionItem>
        <h2>
          <AccordionButton>
            <div style={{ flex: 1, textAlign: "left" }}>
              Section 1 title
            </div>
            <AccordionIcon />
          </AccordionButton>
        </h2>
        <AccordionPanel>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </AccordionPanel>
      </AccordionItem>

      <AccordionItem>
        <h2>
          <AccordionButton>
            <div style={{ flex: 1, textAlign: "left" }}>
              Section 2 title
            </div>
            <AccordionIcon />
          </AccordionButton>
        </h2>
        <AccordionPanel>
          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Architecture

The accordion system is built around several key components:

Accordion: Root wrapper providing context and focus management
AccordionItem: Individual accordion sections with state management
AccordionButton: Interactive triggers for expanding/collapsing items
AccordionPanel: Content areas with smooth collapse animations
AccordionIcon: Visual indicators showing expand/collapse state
Hooks: Lower-level hooks for custom implementations and state access

Capabilities

Core Components

Primary React components for building accordion interfaces with full accessibility support and Chakra UI integration.

declare const Accordion: React.ForwardRefExoticComponent<
  AccordionProps & React.RefAttributes<HTMLDivElement>
>;

declare const AccordionItem: React.ForwardRefExoticComponent<
  AccordionItemProps & React.RefAttributes<HTMLDivElement>
>;

declare const AccordionButton: React.ForwardRefExoticComponent<
  AccordionButtonProps & React.RefAttributes<HTMLButtonElement>
>;

declare const AccordionPanel: React.ForwardRefExoticComponent<
  AccordionPanelProps & React.RefAttributes<HTMLDivElement>
>;

declare const AccordionIcon: React.FC<AccordionIconProps>;

Core Components

State Management Hooks

React hooks providing accordion state logic, item management, and context access for custom implementations.

declare function useAccordion(props: UseAccordionProps): UseAccordionReturn;

declare function useAccordionItem(props: UseAccordionItemProps): UseAccordionItemReturn;

declare function useAccordionContext(): AccordionContext;

declare function useAccordionItemState(): {
  isOpen: boolean;
  onClose: () => void;
  isDisabled: boolean;
  onOpen: () => void;
};

State Management

Core Types

interface AccordionProps extends UseAccordionProps, HTMLChakraProps<"div">, ThemingProps<"Accordion"> {
  /** If true, height animation and transitions will be disabled */
  reduceMotion?: boolean;
}

interface UseAccordionProps {
  /** If true, multiple accordion items can be expanded at once */
  allowMultiple?: boolean;
  /** If true, any expanded accordion item can be collapsed again */
  allowToggle?: boolean;
  /** The index(es) of the expanded accordion item */
  index?: ExpandedIndex;
  /** The initial index(es) of the expanded accordion item */
  defaultIndex?: ExpandedIndex;
  /** The callback invoked when accordion items are expanded or collapsed */
  onChange?(expandedIndex: ExpandedIndex): void;
}

/** @deprecated - Use number | number[] instead */
type ExpandedIndex = number | number[];

interface AccordionItemProps extends UseAccordionItemProps, HTMLChakraProps<"div"> {
  children?:
    | React.ReactNode
    | ((props: { isExpanded: boolean; isDisabled: boolean }) => React.ReactNode);
}

interface UseAccordionItemProps {
  /** If true, the accordion item will be disabled */
  isDisabled?: boolean;
  /** If true, the accordion item will be focusable */
  isFocusable?: boolean;
  /** A unique id for the accordion item */
  id?: string;
}

interface AccordionButtonProps extends HTMLChakraProps<"button"> {}

interface AccordionPanelProps extends HTMLChakraProps<"div"> {
  /** The properties passed to the underlying Collapse component */
  motionProps?: CollapseProps;
}

type AccordionIconProps = PropsOf<typeof Icon>;

type UseAccordionReturn = ReturnType<typeof useAccordion>;

type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>;

// Chakra UI base types referenced in interfaces
interface HTMLChakraProps<T extends As> extends ChakraProps, HTMLAttributes<DOMElements[T]> {
  as?: T;
}

interface ThemingProps<ThemeComponent extends string = string> {
  variant?: string;
  size?: string;
  colorScheme?: string;
  orientation?: "horizontal" | "vertical";
  styleConfig?: SystemStyleObject;
}

interface CollapseProps {
  animateOpacity?: boolean;
  startingHeight?: number | string;
  endingHeight?: number | string;
  transition?: any;
}

type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never;