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

navigation-components.mddocs/

Navigation Components

Navigation components provide UI elements for moving between pages and sections including buttons, links, breadcrumbs, pagination, and step indicators.

Capabilities

Button Component

Button component with variants and sizes.

import { Button, IconButton, ButtonGroup, CloseButton, ButtonPropsProvider } from "@chakra-ui/react";

interface ButtonProps extends HTMLChakraProps<"button"> {
  variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  colorPalette?: string;
  loading?: boolean;
  loadingText?: string;
  spinner?: React.ReactNode;
  spinnerPlacement?: "start" | "end";
  disabled?: boolean;
}

const Button: ChakraComponent<"button", ButtonProps>;
const ButtonPropsProvider: React.FC<{ value: ButtonProps; children: React.ReactNode }>;

interface IconButtonProps extends ButtonProps {
  "aria-label": string;
}

const IconButton: ChakraComponent<"button", IconButtonProps>;

interface ButtonGroupProps extends HTMLChakraProps<"div"> {
  attached?: boolean;
  orientation?: "horizontal" | "vertical";
}

const ButtonGroup: ChakraComponent<"div", ButtonGroupProps>;

interface CloseButtonProps extends ButtonProps {}

const CloseButton: ChakraComponent<"button", CloseButtonProps>;

Usage:

<Button variant="solid" colorPalette="blue" size="md">
  Click me
</Button>

<IconButton aria-label="Search" icon={<SearchIcon />} />

<ButtonGroup attached>
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</ButtonGroup>

Link Component

Link component with external link support and composable overlays.

import { Link, LinkBox, LinkOverlay, LinkPropsProvider } from "@chakra-ui/react";

interface LinkProps extends HTMLChakraProps<"a"> {
  variant?: "underline" | "plain";
}

const Link: ChakraComponent<"a", LinkProps>;
const LinkPropsProvider: React.FC<{ value: LinkProps; children: React.ReactNode }>;

interface LinkBoxProps extends HTMLChakraProps<"div"> {}

const LinkBox: ChakraComponent<"div", LinkBoxProps>;

interface LinkOverlayProps extends HTMLChakraProps<"a"> {
  external?: boolean;
}

const LinkOverlay: ChakraComponent<"a", LinkOverlayProps>;

Usage:

<Link href="/about" variant="underline">
  About Page
</Link>

<LinkBox>
  <Heading size="md">
    <LinkOverlay href="/article">Article Title</LinkOverlay>
  </Heading>
  <Text>Article description...</Text>
</LinkBox>

Breadcrumb Component

Breadcrumb navigation component.

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

namespace Breadcrumb {
  export const Root: ChakraComponent<"nav", {
    separator?: React.ReactNode;
  }>;
  export const List: ChakraComponent<"ol">;
  export const Item: ChakraComponent<"li">;
  export const Link: ChakraComponent<"a", {
    currentPage?: boolean;
  }>;
  export const CurrentLink: ChakraComponent<"span">;
  export const Separator: ChakraComponent<"span">;
  export const Ellipsis: ChakraComponent<"span">;
}

Usage:

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
      <Breadcrumb.Separator>/</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
      <Breadcrumb.Separator>/</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.CurrentLink>Current Page</Breadcrumb.CurrentLink>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Pagination Component

Pagination component for navigating through pages.

import { Pagination, usePagination, usePaginationContext } from "@chakra-ui/react";

interface PaginationRootProps {
  page?: number;
  defaultPage?: number;
  count: number;
  pageSize?: number;
  siblingCount?: number;
  type?: "button" | "link";
  onPageChange?: (details: { page: number }) => void;
  children?: React.ReactNode;
}

namespace Pagination {
  export const Root: React.FC<PaginationRootProps>;
  export const RootProvider: React.FC<PaginationRootProps>;
  export const PrevTrigger: ChakraComponent<"button", {
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const NextTrigger: ChakraComponent<"button", {
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const Items: React.FC<{
    render?: (page: PaginationPage) => React.ReactNode;
    children?: React.ReactNode;
  }>;
  export const Item: ChakraComponent<"button", {
    type: "page" | "ellipsis";
    value: number;
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const Ellipsis: ChakraComponent<"div">;
  export const PageText: ChakraComponent<"span">;
}

interface UsePaginationProps {
  page?: number;
  defaultPage?: number;
  count: number;
  pageSize?: number;
  siblingCount?: number;
  onPageChange?: (details: { page: number }) => void;
}

interface UsePaginationReturn {
  page: number;
  pages: PaginationPage[];
  pageSize: number;
  totalPages: number;
  previousPage: () => void;
  nextPage: () => void;
  setPage: (page: number) => void;
}

interface PaginationPage {
  type: "page" | "ellipsis";
  value: number;
}

function usePagination(props: UsePaginationProps): UsePaginationReturn;
function usePaginationContext(): PaginationContext;

Usage:

<Pagination.Root count={100} pageSize={10}>
  <Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
  <Pagination.Items />
  <Pagination.NextTrigger>Next</Pagination.NextTrigger>
</Pagination.Root>

Steps Component

Step-by-step navigation indicator.

import { Steps, useSteps, useStepsContext, useStepsItemContext } from "@chakra-ui/react";

interface StepsRootProps {
  step?: number;
  defaultStep?: number;
  count: number;
  orientation?: "horizontal" | "vertical";
  linear?: boolean;
  onStepChange?: (details: { step: number }) => void;
  onStepComplete?: (details: { step: number }) => void;
  children?: React.ReactNode;
}

namespace Steps {
  export const Root: React.FC<StepsRootProps>;
  export const RootProvider: React.FC<StepsRootProps>;
  export const List: ChakraComponent<"div", {
    variant?: "solid" | "subtle";
    size?: "sm" | "md" | "lg";
  }>;
  export const Item: React.FC<{
    index: number;
    children?: React.ReactNode;
  }>;
  export const Trigger: ChakraComponent<"button">;
  export const Indicator: ChakraComponent<"div">;
  export const Number: ChakraComponent<"div">;
  export const Title: ChakraComponent<"div">;
  export const Description: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    index: number;
  }>;
  export const CompletedContent: ChakraComponent<"div">;
  export const NextTrigger: ChakraComponent<"button">;
  export const PrevTrigger: ChakraComponent<"button">;
  export const Status: ChakraComponent<"div">;
}

interface UseStepsProps {
  step?: number;
  defaultStep?: number;
  count: number;
  linear?: boolean;
  onStepChange?: (details: { step: number }) => void;
}

interface UseStepsReturn {
  step: number;
  count: number;
  nextStep: () => void;
  prevStep: () => void;
  setStep: (step: number) => void;
  getItemProps: (props: { index: number }) => any;
}

function useSteps(props: UseStepsProps): UseStepsReturn;
function useStepsContext(): StepsContext;
function useStepsItemContext(): StepsItemContext;

Usage:

<Steps.Root count={3} defaultStep={0}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 1</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={1}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 2</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={2}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 3</Steps.Title>
      </Steps.Trigger>
    </Steps.Item>
  </Steps.List>
  <Steps.Content index={0}>Content for step 1</Steps.Content>
  <Steps.Content index={1}>Content for step 2</Steps.Content>
  <Steps.Content index={2}>Content for step 3</Steps.Content>
</Steps.Root>

SkipNav Component

Skip navigation link for accessibility.

import { SkipNavLink, SkipNavContent } from "@chakra-ui/react";

interface SkipNavLinkProps extends HTMLChakraProps<"a"> {
  children?: React.ReactNode;
}

const SkipNavLink: ChakraComponent<"a", SkipNavLinkProps>;

interface SkipNavContentProps extends HTMLChakraProps<"div"> {
  id?: string;
}

const SkipNavContent: ChakraComponent<"div", SkipNavContentProps>;

Usage:

// At the top of your page
<SkipNavLink>Skip to content</SkipNavLink>

// Before your main content
<SkipNavContent id="main-content" />
<main>Your page content</main>

Types

interface PaginationContext extends UsePaginationReturn {}

interface StepsContext extends UseStepsReturn {}

interface StepsItemContext {
  index: number;
  current: boolean;
  complete: boolean;
  incomplete: boolean;
}