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

Typography Components

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

Typography components provide styled text elements for displaying content with consistent typography patterns and semantic HTML.

Capabilities

Text Component

Paragraph text component that renders a p element by default.

import { Text, TextPropsProvider } from "@chakra-ui/react";

interface TextProps extends HTMLChakraProps<"p"> {
  truncate?: boolean;
  lineClamp?: number;
}

const Text: ChakraComponent<"p", TextProps>;
const TextPropsProvider: React.FC<{ value: TextProps; children: React.ReactNode }>;

Usage:

<Text fontSize="lg" lineClamp={2}>
  Long text that will be truncated after 2 lines...
</Text>

Heading Component

Heading text component that renders an h2 element by default.

import { Heading, HeadingPropsProvider } from "@chakra-ui/react";

interface HeadingProps extends HTMLChakraProps<"h2"> {
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

const Heading: ChakraComponent<"h2", HeadingProps>;
const HeadingPropsProvider: React.FC<{ value: HeadingProps; children: React.ReactNode }>;

Usage:

<Heading as="h1" size="2xl">
  Page Title
</Heading>

Code Component

Inline code display with monospace font styling.

import { Code, CodePropsProvider } from "@chakra-ui/react";

interface CodeProps extends HTMLChakraProps<"code"> {
  variant?: "solid" | "subtle" | "plain" | "text";
  colorPalette?: string;
}

const Code: ChakraComponent<"code", CodeProps>;
const CodePropsProvider: React.FC<{ value: CodeProps; children: React.ReactNode }>;

Usage:

<Code variant="subtle" colorPalette="blue">
  const value = 42;
</Code>

CodeBlock Component

Multi-part code block component with syntax highlighting support, copy functionality, and collapsible content.

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

// Root container
interface CodeBlockRootProps {
  code: string;
  language?: string;
  meta?: Record<string, any>;
  maxLines?: number;
  defaultColorScheme?: "light" | "dark";
  copyTimeout?: number;
  onCopy?: () => void;
  children?: React.ReactNode;
}

const CodeBlockRoot: React.FC<CodeBlockRootProps>;

// Content wrapper
interface CodeBlockContentProps extends HTMLChakraProps<"pre"> {}

const CodeBlockContent: ChakraComponent<"pre", CodeBlockContentProps>;

// Header section
interface CodeBlockHeaderProps extends HTMLChakraProps<"div"> {}

const CodeBlockHeader: ChakraComponent<"div", CodeBlockHeaderProps>;

// Title text
interface CodeBlockTitleProps extends HTMLChakraProps<"div"> {}

const CodeBlockTitle: ChakraComponent<"div", CodeBlockTitleProps>;

// Code element
interface CodeBlockCodeProps extends HTMLChakraProps<"code"> {}

const CodeBlockCode: ChakraComponent<"code", CodeBlockCodeProps>;

// Code text
interface CodeBlockCodeTextProps extends HTMLChakraProps<"span"> {}

const CodeBlockCodeText: ChakraComponent<"span", CodeBlockCodeTextProps>;

// Copy trigger button
interface CodeBlockCopyTriggerProps extends HTMLChakraProps<"button"> {}

const CodeBlockCopyTrigger: ChakraComponent<"button", CodeBlockCopyTriggerProps>;

// Copy status indicator
interface CodeBlockCopyIndicatorProps extends HTMLChakraProps<"div"> {
  copied?: React.ReactNode;
}

const CodeBlockCopyIndicator: ChakraComponent<"div", CodeBlockCopyIndicatorProps>;

// Additional parts
const CodeBlockFooter: ChakraComponent<"div">;
const CodeBlockCollapseTrigger: ChakraComponent<"button">;
const CodeBlockCollapseIndicator: ChakraComponent<"div">;
const CodeBlockControl: ChakraComponent<"div">;
const CodeBlockCollapseText: ChakraComponent<"span">;
const CodeBlockOverlay: ChakraComponent<"div">;

// Context and adapter
const CodeBlockContext: React.Context<CodeBlockContextValue>;
const CodeBlockAdapterProvider: React.FC<{
  adapter: CodeBlockAdapter;
  children: React.ReactNode;
}>;

interface CodeBlockAdapter {
  highlight: (code: string, language: string) => string;
}

// Namespace export
namespace CodeBlock {
  export const Root: typeof CodeBlockRoot;
  export const Content: typeof CodeBlockContent;
  export const Header: typeof CodeBlockHeader;
  export const Title: typeof CodeBlockTitle;
  export const Code: typeof CodeBlockCode;
  export const CodeText: typeof CodeBlockCodeText;
  export const CopyTrigger: typeof CodeBlockCopyTrigger;
  export const CopyIndicator: typeof CodeBlockCopyIndicator;
}

Usage:

<CodeBlock.Root language="typescript">
  <CodeBlock.Header>
    <CodeBlock.Title>example.ts</CodeBlock.Title>
    <CodeBlock.CopyTrigger>Copy</CodeBlock.CopyTrigger>
  </CodeBlock.Header>
  <CodeBlock.Content>
    <CodeBlock.Code>
      <CodeBlock.CodeText>
        const greeting = "Hello, World!";
      </CodeBlock.CodeText>
    </CodeBlock.Code>
  </CodeBlock.Content>
</CodeBlock.Root>

Kbd Component

Keyboard key display for showing keyboard shortcuts.

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

interface KbdProps extends HTMLChakraProps<"kbd"> {}

const Kbd: ChakraComponent<"kbd", KbdProps>;

Usage:

<Text>
  Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy
</Text>

Mark Component

Marked/highlighted text with background color.

import { Mark, MarkPropsProvider } from "@chakra-ui/react";

interface MarkProps extends HTMLChakraProps<"mark"> {
  variant?: "solid" | "subtle" | "plain" | "text";
  colorPalette?: string;
}

const Mark: ChakraComponent<"mark", MarkProps>;
const MarkPropsProvider: React.FC<{ value: MarkProps; children: React.ReactNode }>;

Usage:

<Text>
  This is <Mark>highlighted text</Mark> in the sentence.
</Text>

Highlight Component

Highlights text matches within a string based on a query.

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

interface HighlightChunk {
  text: string;
  match: boolean;
}

interface HighlightProps {
  query: string | string[];
  children: string;
  styles?: SystemStyleObject;
  ignoreCase?: boolean;
  matchAll?: boolean;
}

const Highlight: React.FC<HighlightProps>;

Usage:

// Basic usage - highlights matching text with Mark component
<Highlight query="world">
  Hello world, welcome to the world of Chakra
</Highlight>

// Multiple query terms
<Highlight query={["hello", "world"]}>
  Hello world, welcome to the world of Chakra
</Highlight>

// Custom highlight styles
<Highlight query="important" styles={{ bg: "yellow.200", px: "1" }}>
  This is important information
</Highlight>

Blockquote Component

Multi-part styled blockquote with optional attribution and icon.

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

// Root container
interface BlockquoteRootProps extends HTMLChakraProps<"figure"> {
  variant?: "plain" | "subtle" | "solid";
  colorPalette?: string;
  cite?: string;
}

const BlockquoteRoot: ChakraComponent<"figure", BlockquoteRootProps>;

// Quote content
interface BlockquoteContentProps extends HTMLChakraProps<"blockquote"> {}

const BlockquoteContent: ChakraComponent<"blockquote", BlockquoteContentProps>;

// Caption/attribution
interface BlockquoteCaptionProps extends HTMLChakraProps<"figcaption"> {}

const BlockquoteCaption: ChakraComponent<"figcaption", BlockquoteCaptionProps>;

// Quote icon
interface BlockquoteIconProps extends HTMLChakraProps<"svg"> {}

const BlockquoteIcon: ChakraComponent<"svg", BlockquoteIconProps>;

// Props provider
const BlockquotePropsProvider: React.FC<{
  value: BlockquoteRootProps;
  children: React.ReactNode;
}>;

// Style hook
function useBlockquoteStyles(): Record<string, SystemStyleObject>;

// Namespace export
namespace Blockquote {
  export const Root: typeof BlockquoteRoot;
  export const Content: typeof BlockquoteContent;
  export const Caption: typeof BlockquoteCaption;
  export const Icon: typeof BlockquoteIcon;
}

Usage:

<Blockquote.Root showIcon>
  <Blockquote.Content>
    The only way to do great work is to love what you do.
  </Blockquote.Content>
  <Blockquote.Caption>Steve Jobs</Blockquote.Caption>
</Blockquote.Root>

List Component

Multi-part ordered/unordered lists with optional indicators.

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

// Root container
interface ListRootProps extends HTMLChakraProps<"ul"> {
  as?: "ul" | "ol";
  variant?: "plain" | "marker";
}

const ListRoot: ChakraComponent<"ul", ListRootProps>;

// Props provider
const ListRootPropsProvider: React.FC<{
  value: ListRootProps;
  children: React.ReactNode;
}>;

// List item
interface ListItemProps extends HTMLChakraProps<"li"> {}

const ListItem: ChakraComponent<"li", ListItemProps>;

// Item indicator
interface ListIndicatorProps extends HTMLChakraProps<"span"> {}

const ListIndicator: ChakraComponent<"span", ListIndicatorProps>;

// Style hook
function useListStyles(): Record<string, SystemStyleObject>;

// Namespace export
namespace List {
  export const Root: typeof ListRoot;
  export const Item: typeof ListItem;
  export const Indicator: typeof ListIndicator;
}

Usage:

<List.Root as="ul">
  <List.Item>
    <List.Indicator>•</List.Indicator>
    First item
  </List.Item>
  <List.Item>
    <List.Indicator>•</List.Indicator>
    Second item
  </List.Item>
</List.Root>

Em Component

Emphasized (italic) text component.

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

interface EmProps extends HTMLChakraProps<"em"> {}

const Em: ChakraComponent<"em", EmProps>;

Usage:

<Text>
  This is <Em>emphasized text</Em> in the sentence.
</Text>

Strong Component

Bold text component for strong emphasis.

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

interface StrongProps extends HTMLChakraProps<"strong"> {}

const Strong: ChakraComponent<"strong", StrongProps>;

Usage:

<Text>
  This is <Strong>bold text</Strong> for emphasis.
</Text>

Quote Component

Inline quote element for short quotations.

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

interface QuoteProps extends HTMLChakraProps<"q"> {}

const Quote: ChakraComponent<"q", QuoteProps>;

Usage:

<Text>
  As someone once said, <Quote>simplicity is the ultimate sophistication</Quote>.
</Text>

Span Component

Generic inline span element with Chakra style props.

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

interface SpanProps extends HTMLChakraProps<"span"> {}

const Span: ChakraComponent<"span", SpanProps>;

Usage:

<Text>
  This is <Span color="blue.500" fontWeight="bold">colored text</Span>.
</Text>

Types

type SystemStyleObject = {
  [key: string]: any;
};

interface CodeBlockContextValue {
  copied: boolean;
  copy: () => void;
}

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