or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md data-display.md data-entry.md feedback.md index.md layout.md other-components.md

tile.json

Data Display Components

Components for presenting and organizing data, including tables, lists, cards, and typography. These components handle complex data structures with features like sorting, filtering, pagination, and virtual scrolling.

Capabilities

Table Component

Advanced data table with sorting, filtering, pagination, row selection, and column customization.

interface TableProps<RecordType = any> {
  bordered?: boolean;
  columns?: ColumnsType<RecordType>;
  components?: TableComponents;
  dataSource?: readonly RecordType[];
  expandable?: ExpandableConfig<RecordType>;
  footer?: (currentPageData: readonly RecordType[]) => React.ReactNode;
  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
  loading?: boolean | SpinProps;
  locale?: TableLocale;
  pagination?: false | TablePaginationConfig;
  rowClassName?: string | ((record: RecordType, index: number) => string);
  rowKey?: string | ((record: RecordType) => React.Key);
  rowSelection?: TableRowSelection<RecordType>;
  scroll?: { x?: string | number | true; y?: string | number };
  showHeader?: boolean;
  showSorterTooltip?: boolean | SorterTooltipProps;
  size?: SizeType;
  sortDirections?: SortOrder[];
  sticky?: boolean | { offsetHeader?: number; offsetScroll?: number };
  summary?: (pageData: readonly RecordType[]) => React.ReactNode;
  tableLayout?: "auto" | "fixed";
  title?: (currentPageData: readonly RecordType[]) => React.ReactNode;
  virtual?: boolean;
  onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<RecordType> | SorterResult<RecordType>[], extra: TableCurrentDataSource<RecordType>) => void;
  onHeaderRow?: (columns: ColumnsType<RecordType>, index?: number) => HTMLAttributes<any>;
  onRow?: (record: RecordType, index?: number) => HTMLAttributes<any>;
}

interface ColumnType<RecordType> {
  align?: AlignType;
  className?: string;
  colSpan?: number;
  dataIndex?: DataIndex;
  defaultFilteredValue?: FilterValue;
  defaultSortOrder?: SortOrder;
  ellipsis?: boolean | { showTitle?: boolean };
  filterDropdown?: React.ReactNode | ((props: FilterDropdownProps) => React.ReactNode);
  filterDropdownOpen?: boolean;
  filtered?: boolean;
  filteredValue?: FilterValue;
  filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
  filterMode?: 'menu' | 'tree';
  filterMultiple?: boolean;
  filterOnClose?: boolean;
  filterResetToDefaultFilteredValue?: boolean;
  filters?: ColumnFilterItem[];
  filterSearch?: boolean | FilterSearchType<ColumnFilterItem>;
  fixed?: boolean | FixedType;
  key?: React.Key;
  render?: (value: any, record: RecordType, index: number) => React.ReactNode;
  responsive?: Breakpoint[];
  rowScope?: RowScope;
  shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
  showSorterTooltip?: boolean | SorterTooltipProps;
  sortDirections?: SortOrder[];
  sorter?: boolean | CompareFn<RecordType> | { compare?: CompareFn<RecordType>; multiple?: number };
  sortOrder?: SortOrder | null;
  title?: React.ReactNode | ((props: ColumnTitleProps<RecordType>) => React.ReactNode);
  width?: string | number;
  onCell?: (record: RecordType, rowIndex?: number) => HTMLAttributes<HTMLElement>;
  onFilterDropdownOpenChange?: (visible: boolean) => void;
  onHeaderCell?: (column: ColumnsType<RecordType>[number]) => HTMLAttributes<HTMLElement>;
}

type ColumnsType<RecordType = unknown> = ColumnType<RecordType>[];

declare const Table: <RecordType extends object = any>(
  props: TableProps<RecordType> & React.RefAttributes<HTMLDivElement>
) => React.ReactElement;

Usage Examples:

import { Table, Tag, Space } from "antd";

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const columns: ColumnsType<DataType> = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: (text) => <a>{text}</a>,
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? "geekblue" : "green";
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  // ... more data
];

<Table columns={columns} dataSource={data} />

// Table with row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
};

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

List Component

Flexible list component for displaying series of content with support for pagination, loading states, and custom layouts.

interface ListProps<T> {
  bordered?: boolean;
  dataSource?: T[];
  footer?: React.ReactNode;
  grid?: ListGridType;
  header?: React.ReactNode;
  itemLayout?: "horizontal" | "vertical";
  loading?: boolean | SpinProps;
  loadMore?: React.ReactNode;
  locale?: ListLocale;
  pagination?: PaginationProps | false;
  renderItem?: (item: T, index: number) => React.ReactNode;
  rowKey?: keyof T | ((item: T) => React.Key);
  size?: SizeType;
  split?: boolean;
}

interface ListItemProps {
  actions?: React.ReactNode[];
  extra?: React.ReactNode;
}

interface ListItemMetaProps {
  avatar?: React.ReactNode;
  description?: React.ReactNode;
  title?: React.ReactNode;
}

declare const List: React.FC<ListProps<any>> & {
  Item: React.FC<ListItemProps> & {
    Meta: React.FC<ListItemMetaProps>;
  };
};

Usage Examples:

import { List, Avatar, Space } from "antd";
import { MessageOutlined, LikeOutlined, StarOutlined } from "@ant-design/icons";

const data = [
  {
    title: "Ant Design Title 1",
    description: "Ant Design, a design language for background applications, is refined by Ant UED Team.",
    content: "We supply a series of design principles, practical patterns and high quality design resources.",
    avatar: "https://joeschmoe.io/api/v1/random",
  },
  // ... more data
];

// Basic list
<List
  itemLayout="horizontal"
  dataSource={data}
  renderItem={(item, index) => (
    <List.Item>
      <List.Item.Meta
        avatar={<Avatar src={item.avatar} />}
        title={<a href="https://ant.design">{item.title}</a>}
        description={item.description}
      />
    </List.Item>
  )}
/>

// List with actions
<List
  itemLayout="vertical"
  size="large"
  pagination={{
    onChange: (page) => {
      console.log(page);
    },
    pageSize: 3,
  }}
  dataSource={data}
  renderItem={(item) => (
    <List.Item
      key={item.title}
      actions={[
        <Space><StarOutlined /> 156</Space>,
        <Space><LikeOutlined /> 156</Space>,
        <Space><MessageOutlined /> 2</Space>,
      ]}
      extra={
        <img
          width={272}
          alt="logo"
          src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
        />
      }
    >
      <List.Item.Meta
        avatar={<Avatar src={item.avatar} />}
        title={<a href="https://ant.design">{item.title}</a>}
        description={item.description}
      />
      {item.content}
    </List.Item>
  )}
/>

Typography Components

Text display components including paragraphs, titles, and editable text with copy functionality.

interface TypographyProps {
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

interface TextProps extends TypographyProps {
  code?: boolean;
  copyable?: boolean | CopyableConfig;
  delete?: boolean;
  disabled?: boolean;
  editable?: boolean | EditableConfig;
  ellipsis?: boolean | EllipsisConfig;
  keyboard?: boolean;
  mark?: boolean;
  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
  strong?: boolean;
  italic?: boolean;
  type?: "secondary" | "success" | "warning" | "danger";
  underline?: boolean;
}

interface TitleProps extends TypographyProps {
  code?: boolean;
  copyable?: boolean | CopyableConfig;
  delete?: boolean;
  disabled?: boolean;
  editable?: boolean | EditableConfig;
  ellipsis?: boolean | EllipsisConfig;
  level?: 1 | 2 | 3 | 4 | 5;
  mark?: boolean;
  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
  italic?: boolean;
  type?: "secondary" | "success" | "warning" | "danger";
  underline?: boolean;
}

interface ParagraphProps extends TypographyProps {
  code?: boolean;
  copyable?: boolean | CopyableConfig;
  delete?: boolean;
  disabled?: boolean;
  editable?: boolean | EditableConfig;
  ellipsis?: boolean | EllipsisConfig;
  mark?: boolean;
  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
  strong?: boolean;
  italic?: boolean;
  type?: "secondary" | "success" | "warning" | "danger";
  underline?: boolean;
}

declare const Typography: React.FC<TypographyProps> & {
  Text: React.FC<TextProps>;
  Title: React.FC<TitleProps>;
  Paragraph: React.FC<ParagraphProps>;
  Link: React.FC<LinkProps>;
};

Usage Examples:

import { Typography, Space } from "antd";

const { Title, Paragraph, Text, Link } = Typography;

<Typography>
  <Title>Introduction</Title>
  <Paragraph>
    In the process of internal desktop applications development, many different design specs and
    implementations would be involved, which might cause designers and developers difficulties and
    duplication and reduce the efficiency of development.
  </Paragraph>
  <Paragraph>
    After massive project practice and summaries, Ant Design, a design language for background
    applications, is refined by Ant UED Team, which aims to{" "}
    <Text strong>
      uniform the user interface specs for internal background projects, lower the unnecessary
      cost of design differences and implementation
    </Text>
    , and{" "}
    <Text mark>liberate the resources of design and front-end development</Text>.
  </Paragraph>
  <Title level={2}>Guidelines and Resources</Title>
  <Paragraph>
    We supply a series of design principles, practical patterns and high quality design resources
    (<Text code>Sketch</Text> and <Text code>Axure</Text>), to help people create their product
    prototypes beautifully and efficiently.
  </Paragraph>

  <Paragraph>
    <ul>
      <li>
        <Link href="/docs/react/introduce">Getting Started</Link>
      </li>
      <li>
        <Link href="/docs/spec/proximity">Design Principles</Link>
      </li>
    </ul>
  </Paragraph>
</Typography>

// Editable text
<Typography>
  <Paragraph editable={{ onChange: (str) => console.log('Content change:', str) }}>
    This is an editable text.
  </Paragraph>
  <Paragraph copyable>This is a copyable text.</Paragraph>
  <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
</Typography>

Card Component

Container component for displaying content in a card layout with optional header, footer, and actions.

interface CardProps {
  actions?: React.ReactNode[];
  activeTabKey?: string;
  bodyStyle?: React.CSSProperties;
  bordered?: boolean;
  cover?: React.ReactNode;
  defaultActiveTabKey?: string;
  extra?: React.ReactNode;
  hoverable?: boolean;
  loading?: boolean;
  size?: "default" | "small";
  styles?: { header?: React.CSSProperties; body?: React.CSSProperties; actions?: React.CSSProperties };
  tabBarExtraContent?: React.ReactNode;
  tabList?: CardTabListType[];
  tabProps?: TabsProps;
  title?: React.ReactNode;
  type?: "inner";
  classNames?: { header?: string; body?: string; actions?: string };
  onTabChange?: (key: string) => void;
}

interface CardMetaProps {
  avatar?: React.ReactNode;
  className?: string;
  description?: React.ReactNode;
  style?: React.CSSProperties;
  title?: React.ReactNode;
}

interface CardGridProps {
  className?: string;
  hoverable?: boolean;
  style?: React.CSSProperties;
}

declare const Card: React.FC<CardProps> & {
  Grid: React.FC<CardGridProps>;
  Meta: React.FC<CardMetaProps>;
};

Usage Examples:

import { Card, Avatar } from "antd";
import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";

const { Meta } = Card;

// Basic card
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
  <p>Card content</p>
  <p>Card content</p>
  <p>Card content</p>
</Card>

// Card with cover and actions
<Card
  hoverable
  style={{ width: 240 }}
  cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  actions={[
    <SettingOutlined key="setting" />,
    <EditOutlined key="edit" />,
    <EllipsisOutlined key="ellipsis" />,
  ]}
>
  <Meta title="Europe Street beat" description="www.instagram.com" />
</Card>

// Card with avatar
<Card
  style={{ width: 300 }}
  actions={[
    <SettingOutlined key="setting" />,
    <EditOutlined key="edit" />,
    <EllipsisOutlined key="ellipsis" />,
  ]}
>
  <Meta
    avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
    title="Card title"
    description="This is the description"
  />
</Card>

Image Component

Image display component with preview functionality, lazy loading, and error handling.

interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {
  alt?: string;
  fallback?: string;
  height?: string | number;
  placeholder?: React.ReactNode;
  preview?: boolean | PreviewType;
  rootClassName?: string;
  src?: string;
  width?: string | number;
  onError?: (event: Event) => void;
}

interface PreviewType {
  visible?: boolean;
  onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
  getContainer?: string | HTMLElement | (() => HTMLElement) | false;
  current?: number;
  countRender?: (current: number, total: number) => React.ReactNode;
  closeIcon?: React.ReactNode;
  forceRender?: boolean;
  keyboard?: boolean;
  mask?: React.ReactNode;
  maskClassName?: string;
  movable?: boolean;
  scaleStep?: number;
  minScale?: number;
  maxScale?: number;
  imageRender?: (originalNode: React.ReactElement, info: { transform: TransformType; current?: number }) => React.ReactNode;
  toolbarRender?: (originalNode: React.ReactElement, info: Omit<PreviewType, 'toolbarRender'> & { transform: TransformType; actions: ToolbarRenderInfoType }) => React.ReactNode;
  onTransform?: { transform: TransformType; action: TransformAction } => void;
}

declare const Image: React.FC<ImageProps> & {
  PreviewGroup: React.FC<GroupConsumerProps>;
};

Usage Examples:

import { Image, Space } from "antd";

// Basic image
<Image
  width={200}
  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>

// Image with fallback
<Image
  width={200}
  src="error"
  fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3Ik1RnG8ccN"
/>

// Image preview group
<Image.PreviewGroup>
  <Image width={200} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
  <Image width={200} src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
</Image.PreviewGroup>

Other Display Components

Additional components for specialized data display needs.

// Avatar
interface AvatarProps {
  alt?: string;
  gap?: number;
  icon?: React.ReactNode;
  shape?: "circle" | "square";
  size?: number | "large" | "small" | "default" | { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number };
  src?: React.ReactNode;
  srcSet?: string;
  draggable?: boolean | "false" | "true";
  crossOrigin?: "anonymous" | "use-credentials" | "";
  onError?: () => boolean;
}

declare const Avatar: React.FC<AvatarProps> & {
  Group: React.FC<GroupProps>;
};

// Badge  
interface BadgeProps {
  color?: PresetColorType | string;
  count?: React.ReactNode;
  dot?: boolean;
  offset?: [number, number];
  overflowCount?: number;
  showZero?: boolean;
  size?: "default" | "small";
  status?: PresetStatusColorType;
  text?: React.ReactNode;
  title?: string;
}

declare const Badge: React.FC<BadgeProps> & {
  Ribbon: React.FC<RibbonProps>;
};

// Tag
interface TagProps {
  closable?: boolean;
  closeIcon?: React.ReactNode;
  color?: PresetColorType | PresetStatusColorType | string;
  icon?: React.ReactNode;
  bordered?: boolean;
  onClose?: (e: React.MouseEvent<HTMLElement>) => void;
}

declare const Tag: React.FC<TagProps> & {
  CheckableTag: React.FC<CheckableTagProps>;
};

// Empty
interface EmptyProps {
  className?: string;
  description?: React.ReactNode;
  image?: string | React.ReactNode;
  imageStyle?: React.CSSProperties;
  style?: React.CSSProperties;
}

declare const Empty: React.FC<EmptyProps> & {
  PRESENTED_IMAGE_DEFAULT: string;
  PRESENTED_IMAGE_SIMPLE: string;
};

// Statistic
interface StatisticProps {
  decimalSeparator?: string;
  formatter?: (value?: ValueType) => React.ReactNode;
  groupSeparator?: string;
  loading?: boolean;
  precision?: number;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
  title?: React.ReactNode;
  value?: ValueType;
  valueStyle?: React.CSSProperties;
}

declare const Statistic: React.FC<StatisticProps> & {
  Countdown: React.FC<CountdownProps>;
};

// Timeline
interface TimelineProps {
  className?: string;
  items?: TimelineItemType[];
  mode?: "left" | "alternate" | "right";
  pending?: React.ReactNode;
  pendingDot?: React.ReactNode;
  reverse?: boolean;
  style?: React.CSSProperties;
}

interface TimelineItemType {
  color?: string;
  dot?: React.ReactNode;
  label?: React.ReactNode;
  children?: React.ReactNode;
  position?: "left" | "right";
}

declare const Timeline: React.FC<TimelineProps> & {
  Item: React.FC<TimelineItemProps>;
};

// Descriptions
interface DescriptionsProps {
  bordered?: boolean;
  className?: string;
  column?: number | Record<string, number>;
  contentStyle?: React.CSSProperties;
  extra?: React.ReactNode;
  items?: DescriptionsItemType[];
  labelStyle?: React.CSSProperties;
  layout?: "horizontal" | "vertical";
  size?: SizeType;
  style?: React.CSSProperties;
  title?: React.ReactNode;
}

interface DescriptionsItemType {
  key?: React.Key;
  label?: React.ReactNode;
  children?: React.ReactNode;
  span?: number;
  className?: string;
  style?: React.CSSProperties;
  labelStyle?: React.CSSProperties;
  contentStyle?: React.CSSProperties;
}

declare const Descriptions: React.FC<DescriptionsProps> & {
  Item: React.FC<DescriptionsItemType>;
};

// Carousel
interface CarouselProps {
  autoplay?: boolean;
  autoplaySpeed?: number;
  className?: string;
  dots?: boolean | CarouselDotRenderProps;
  dotPosition?: "top" | "bottom" | "left" | "right";
  draggable?: boolean;
  easing?: string;
  effect?: "scrollx" | "fade";
  fade?: boolean;
  infinite?: boolean;
  pauseOnDotsHover?: boolean;
  pauseOnFocus?: boolean;
  pauseOnHover?: boolean;
  speed?: number;
  style?: React.CSSProperties;
  swipeToSlide?: boolean;
  touchMove?: boolean;
  variableWidth?: boolean;
  vertical?: boolean;
  waitForAnimate?: boolean;
  afterChange?: (current: number) => void;
  beforeChange?: (from: number, to: number) => void;
}

declare const Carousel: React.FC<CarouselProps>;

// Collapse
interface CollapseProps {
  accordion?: boolean;
  activeKey?: string | string[] | number | number[];
  bordered?: boolean;
  collapsible?: "header" | "icon" | "disabled";
  defaultActiveKey?: string | string[] | number | number[];
  destroyInactivePanel?: boolean;
  expandIcon?: (panelProps: PanelProps) => React.ReactNode;
  expandIconPosition?: "start" | "end";
  ghost?: boolean;
  items?: CollapsibleType[];
  size?: SizeType;
  onChange?: (key: string | string[]) => void;
}

interface CollapsibleType {
  key: string | number;
  label: React.ReactNode;
  children?: React.ReactNode;
  disabled?: boolean;
  showArrow?: boolean;
  extra?: React.ReactNode;
  collapsible?: "header" | "icon" | "disabled";
  className?: string;
  style?: React.CSSProperties;
  forceRender?: boolean;
}

declare const Collapse: React.FC<CollapseProps> & {
  Panel: React.FC<CollapsePanelProps>;
};

// Tabs
interface TabsProps {
  activeKey?: string;
  addIcon?: React.ReactNode;
  animated?: boolean | { inkBar: boolean; tabPane: boolean };
  centered?: boolean;
  className?: string;
  defaultActiveKey?: string;
  hideAdd?: boolean;
  items?: TabsItemType[];
  moreIcon?: React.ReactNode;
  popupClassName?: string;
  removeIcon?: React.ReactNode;
  size?: SizeType;
  style?: React.CSSProperties;
  tabBarExtraContent?: React.ReactNode | { left?: React.ReactNode; right?: React.ReactNode };
  tabBarGutter?: number;
  tabBarStyle?: React.CSSProperties;
  tabPosition?: "top" | "right" | "bottom" | "left";
  type?: "line" | "card" | "editable-card";
  onChange?: (activeKey: string) => void;
  onEdit?: (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: "add" | "remove") => void;
  onTabClick?: (key: string, event: React.MouseEvent) => void;
  onTabScroll?: (direction: "left" | "right" | "top" | "bottom") => void;
}

interface TabsItemType {
  key: string;
  label?: React.ReactNode;
  children?: React.ReactNode;
  disabled?: boolean;
  closable?: boolean;
  icon?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

declare const Tabs: React.FC<TabsProps>;

Version

Tile

Files

data-display.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Data Display Components

Capabilities

Table Component

List Component

Typography Components

Card Component

Image Component

Other Display Components

data-display.mddocs/