or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddata-display.mddata-entry.mdfeedback.mdindex.mdlayout.mdnavigation.mdother-components.md
tile.json

tessl/npm-antd

A comprehensive React UI component library providing enterprise-class design language and implementation with 78+ components, theming, and internationalization support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/antd@5.27.x

To install, run

npx @tessl/cli install tessl/npm-antd@5.27.0

index.mddocs/

Ant Design

Ant Design is a comprehensive React UI component library providing an enterprise-class design language and implementation. It offers 78+ high-quality components for building modern web applications, featuring TypeScript support, customizable themes through CSS-in-JS, internationalization support for 70+ locales, and accessibility standards compliance.

Package Information

  • Package Name: antd
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install antd

Core Imports

import { Button, Input, Form, Table, message } from "antd";

For CSS imports (required for styles):

import "antd/dist/reset.css"; // or antd/dist/antd.css

CommonJS:

const { Button, Input, Form, Table, message } = require("antd");

Individual component imports for tree-shaking:

import Button from "antd/es/button";
import "antd/es/button/style";

Basic Usage

import React from "react";
import { Button, Form, Input, message, ConfigProvider } from "antd";

function App() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    message.success("Form submitted successfully!");
    console.log("Received values:", values);
  };

  return (
    <ConfigProvider>
      <Form form={form} onFinish={onFinish} layout="vertical">
        <Form.Item 
          label="Username" 
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input placeholder="Enter username" />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </ConfigProvider>
  );
}

Architecture

Ant Design is built around several key architectural patterns:

  • Component System: Modular React components with consistent API patterns and TypeScript support
  • Design Token System: CSS-in-JS architecture with design tokens for theming and customization
  • Configuration Provider: Global configuration via ConfigProvider for theme, locale, and component defaults
  • Compound Components: Complex components use sub-component patterns (e.g., Input.Search, Form.Item)
  • Static Methods: Global utilities for modals, messages, and notifications accessible without rendering
  • Internationalization: Built-in i18n support with 70+ locale packages and LocaleProvider integration

Capabilities

Data Entry Components

Core input and form components for collecting user data, including text inputs, selectors, date pickers, and file uploads.

// Primary input components
declare const Input: InputComponent & {
  Group: typeof Group;
  Search: typeof Search;
  TextArea: typeof TextArea;
  Password: typeof Password;
  OTP: typeof OTP;
};

declare const Select: SelectComponent;
declare const Form: FormComponent & {
  useForm: () => [FormInstance];
  Item: typeof FormItem;
  List: typeof FormList;
};

Data Entry Components

Data Display Components

Components for presenting and organizing data, including tables, lists, cards, and typography.

// Primary display components
declare const Table: TableComponent;
declare const List: ListComponent & {
  Item: typeof ListItem;
};
declare const Typography: TypographyComponent & {
  Text: typeof Text;
  Title: typeof Title;
  Paragraph: typeof Paragraph;
};

Data Display Components

Navigation Components

Navigation and wayfinding components including menus, breadcrumbs, and pagination.

// Primary navigation components
declare const Menu: MenuComponent & {
  Item: typeof MenuItem;
  SubMenu: typeof SubMenu;
};
declare const Breadcrumb: BreadcrumbComponent & {
  Item: typeof BreadcrumbItem;
};

Navigation Components

Feedback Components

User feedback components for alerts, modals, messages, and loading states.

// Primary feedback components
declare const Modal: ModalComponent & {
  info: (config: ModalFuncProps) => void;
  success: (config: ModalFuncProps) => void;
  error: (config: ModalFuncProps) => void;
  warning: (config: ModalFuncProps) => void;
  confirm: (config: ModalFuncProps) => void;
};

declare const message: MessageInstance & {
  success: (content: React.ReactNode, duration?: number) => MessageType;
  error: (content: React.ReactNode, duration?: number) => MessageType;
  info: (content: React.ReactNode, duration?: number) => MessageType;
  warning: (content: React.ReactNode, duration?: number) => MessageType;
  loading: (content: React.ReactNode, duration?: number) => MessageType;
};

Feedback Components

Layout Components

Layout and structure components for organizing page content and responsive design.

// Primary layout components
declare const Layout: LayoutComponent & {
  Header: typeof Header;
  Footer: typeof Footer;
  Content: typeof Content;
  Sider: typeof Sider;
};

declare const Grid: {
  useBreakpoint: () => Partial<Record<Breakpoint, boolean>>;
};
declare const Row: RowComponent;
declare const Col: ColComponent;

Layout Components

Configuration and Theming

Global configuration, theming, and internationalization utilities.

// Configuration components
declare const ConfigProvider: React.FC<ConfigProviderProps>;

declare const theme: {
  useToken: () => { theme: any; token: GlobalToken; hashId: string };
  defaultAlgorithm: MappingAlgorithm;
  darkAlgorithm: MappingAlgorithm;
  compactAlgorithm: MappingAlgorithm;
  getDesignToken: (config?: any) => GlobalToken;
};

Configuration and Theming

Other Components

Additional specialized components for specific use cases including floating actions, user guidance, data transfer, and content protection.

// Specialized components
declare const FloatButton: FloatButtonComponent & {
  Group: typeof FloatButtonGroup;
  BackTop: typeof BackTop;
};
declare const Tour: TourComponent;
declare const Transfer: TransferComponent;
declare const Watermark: WatermarkComponent;
declare const Segmented: SegmentedComponent;
declare const QRCode: QRCodeComponent;

Other Components

Core Types

// Utility types for component prop extraction
type GetProps<T extends React.ComponentType<any> | object> = 
  T extends React.ComponentType<infer P> ? P : T extends object ? T : never;

type GetRef<T extends React.ComponentType<any> | React.Component<any>> = 
  T extends React.Component<any> ? T : 
  T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;

type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = 
  NonNullable<GetProps<T>[PropName]>;

// Size types
type SizeType = "small" | "middle" | "large" | undefined;

// Button types
type ButtonType = "default" | "primary" | "dashed" | "link" | "text";
type ButtonShape = "default" | "circle" | "round";
type ButtonHTMLType = "submit" | "button" | "reset";

// Breakpoint types  
type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

// Focus options for input components
interface InputFocusOptions {
  cursor?: "start" | "end" | "all";
  preventScroll?: boolean;
}

// Common component props pattern
interface BaseComponentProps {
  className?: string;
  style?: React.CSSProperties;
  prefixCls?: string;
  rootClassName?: string;
  size?: SizeType;
  disabled?: boolean;
  [key: `data-${string}`]: string;
}

// Button component props
interface ButtonProps extends BaseComponentProps {
  type?: ButtonType;
  shape?: ButtonShape;
  htmlType?: ButtonHTMLType;
  danger?: boolean;
  loading?: boolean | { delay?: number };
  ghost?: boolean;
  block?: boolean;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  href?: string;
  target?: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

// Common field name mapping interface
interface FieldNames {
  label?: string;
  value?: string;
  children?: string;
  title?: string;
  key?: string;
}

// Labeled value interface for select-like components
interface LabeledValue {
  key?: string;
  value: string | number;
  label: React.ReactNode;
}

// Tree node props interface
interface AntTreeNodeProps {
  className?: string;
  checkable?: boolean;
  disabled?: boolean;
  disableCheckbox?: boolean;
  expanded?: boolean;
  isLeaf?: boolean;
  selected?: boolean;
  icon?: React.ReactNode;
  title?: React.ReactNode;
  selectable?: boolean;
  switcherIcon?: React.ReactNode;
}

// Event data node interface
interface EventDataNode<T = any> {
  key: React.Key;
  title?: React.ReactNode;
  children?: EventDataNode<T>[];
  isLeaf?: boolean;
  [key: string]: any;
}

// Panel props for collapse
interface PanelProps {
  key: string | number;
  header?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  disabled?: boolean;
  accordion?: boolean;
  forceRender?: boolean;
  showArrow?: boolean;
  extra?: React.ReactNode;
  collapsible?: "header" | "icon" | "disabled";
}

interface CollapsePanelProps extends PanelProps {
  children?: React.ReactNode;
}

// Check info for tree components
interface CheckInfo {
  event: "check";
  node: EventDataNode;
  checked: boolean;
  nativeEvent: MouseEvent;
  checkedNodes: any[];
  checkedNodesPositions?: { node: any; pos: string }[];
  halfCheckedKeys?: React.Key[];
}

Locale Support

// Locale configuration
interface Locale {
  locale: string;
  Pagination?: PaginationLocale;
  DatePicker?: DatePickerLocale;
  TimePicker?: Record<string, any>;
  Calendar?: Record<string, any>;
  Table?: TableLocale;
  Modal?: ModalLocale;
  Tour?: TourLocale;
  Popconfirm?: PopconfirmLocale;
  Transfer?: TransferLocale;
  Select?: Record<string, any>;
  Upload?: UploadLocale;
  Empty?: TransferLocaleForEmpty;
  global?: {
    placeholder?: string;
    close?: string;
  };
}

// Available locale imports
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import jaJP from "antd/locale/ja_JP";
// ... and 67 more locales