@ibexui/components

The main component package for IbexUI. It contains over 60 high-quality React components built on top of a modular design token system.

📦 Installation

pnpm add ibexui
# or
npm install ibexui

🚀 Usage

Wrap your application in the ConfigProvider to enable theming:

import { Button, ConfigProvider } from "ibexui";

function App() {
  return (
    <ConfigProvider>
      <Button type="primary">Hello IbexUI</Button>
    </ConfigProvider>
  );
}

🛠️ Components Included

The library is categorized into:

• General: Button, Icon, Typography
• Layout: Grid (Row/Col), Space, Layout
• Navigation: Menu, Tabs, Breadcrumb, Pagination, Dropdown
• Data Entry: Input, Select, Form, Checkbox, Radio, Switch, DatePicker
• Data Display: Table, Card, List, Avatar, Badge, Tooltip, Popover
• Feedback: Alert, Modal, Message, Notification, Drawer, Progress, Spin
• Other: ConfigProvider, Watermark, Affix

🎨 Theming

IbexUI uses a token-based theming system. You can customize the theme globally or per-component.

<ConfigProvider
  theme={{
    token: {
      colorPrimary: "#1890ff",
      borderRadius: 4,
    },
    components: {
      Button: {
        fontWeight: 600,
      },
    },
  }}
>
  <App />
</ConfigProvider>

♿ Accessibility

All components are built with accessibility in mind, following WAI-ARIA best practices and ensuring full keyboard support.

📚 API Reference

IbexUI components follow a consistent design language. Below is the reference for core props.

General

Button

To trigger an operation.

| Property | Type | Default | Description | | --- | --- | --- | --- | | type | primary \| dashed \| link \| text \| default | default | Visual variant | | variant | solid \| outlined \| glass \| aurora \| neon \| glow \| 3d \| cyber \| prism \| velvet \| retro \| brutalist \| holographic \| shimmer \| neumorphic \| metallic \| matte \| glossy \| flat \| ghost \| subtle \| capsule \| floating \| sparkle \| border-animated \| social \| retro \| brutalist \| inverted \| duotone \| chrome | outlined | Premium variant style | | color | default \| primary \| success \| warning \| danger \| info | default | Semantic color | | size | xs \| sm \| md \| lg \| xl | md | Set the size of button | | shape | default \| circle \| round | default | Can be set to button shape | | icon | ReactNode | - | Set the icon component of button | | iconPosition | start \| end | start | Set the icon position of button | | iconOnly | boolean | false | Format button as a square for icon-only usage | | loading | boolean \| { delay: number } | false | Set the loading status of button | | disabled | boolean | false | Disabled state of button | | danger | boolean | false | Set the danger status of button | | block | boolean | false | Option to fit button width to its parent width (alternative to fullWidth) | | fullWidth | boolean | false | Option to fit button width to its parent width | | ghost | boolean | false | Make background transparent and invert text and border colors | | href | string | - | Redirect url of link button | | target | string | - | Same as html anchor target | | htmlType | submit \| reset \| button | button | Set the original html type of button | | as | ElementType | button | Polymorphic prop to render as a different element |

FloatButton

FloatButton component.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | FloatButtonVariant \| FloatButtonVariant[] | - | Behavior, position and shape variants | | icon | ReactNode | - | Set the icon component of button | | type | default \| primary \| danger \| success | default | Setting the type of button |

Typography

Basic text writing, including headings, paragraphs, lists.

| Property | Type | Default | Description | | --- | --- | --- | --- | | color | default \| primary \| secondary \| muted \| subtle \| success \| warning \| danger \| info | default | Set the color of typography | | size | xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \| 4xl \| 5xl | md | Set the size of typography | | weight | thin \| light \| normal \| medium \| semibold \| bold \| extrabold \| black | normal | Set the font weight | | align | left \| center \| right \| justify | left | Set the text alignment | | transform | uppercase \| lowercase \| capitalize \| none | none | Set the text transformation | | strong | boolean | false | Bold style | | italic | boolean | false | Italic style | | underline | boolean | false | Underline style | | delete | boolean | false | Strikethrough style | | code | boolean | false | Code style | | truncate | boolean | false | Truncate text with ellipsis | | lineClamp | number | - | Max lines to display before truncating |

Layout

Layout

Handling the overall layout of a page.

| Property | Type | Default | Description | | --- | --- | --- | --- | | className | string | - | Container className | | style | CSSProperties | - | Container style | | hasSider | boolean | - | Whether the layout has a Sider (automatic detection doesn't always work) | | width | number \| string | 200 | Width of the Sider | | collapsedWidth | number \| string | 80 | Width of the Sider when collapsed | | collapsed | boolean | false | Whether the Sider is collapsed (controlled) | | onCollapse | function(collapsed, type) | - | Callback when the collapsed state changes |

Divider

A divider line separates different content.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | solid \| dashed \| dotted \| subtle \| strong | solid | Visual variant | | label | ReactNode | - | The label text | | labelPosition | left \| center \| right | center | The position of label |

Flex

Flex layout component.

| Property | Type | Default | Description | | --- | --- | --- | --- | | vertical | boolean | false | Whether to use vertical layout | | justify | string | start | CSS justify-content | | align | string | start | CSS align-items | | gap | number \| string | 0 | Gap between items |

Grid

Grid layout system with Row and Col supporting responsive design.

| Property | Type | Default | Description | | --- | --- | --- | --- | | gutter | number \| object \| [number, number] | 0 | Spacing between grids, can be set as [horizontal, vertical] or responsive object | | align | top \| middle \| bottom \| stretch | top | Vertical alignment of grid items | | justify | start \| end \| center \| space-around \| space-between \| space-evenly | start | Horizontal alignment of grid items | | span | number | - | The number of cells to occupy (for Col) | | offset | number | 0 | The number of cells to offset from the left (for Col) | | order | number | 0 | The order of grid item (for Col) | | flex | string \| number | - | Flex layout property (for Col) | | xs | sm | md | lg | xl | xxl | number \| object | - | Responsive span or settings for different screen sizes (for Col) |

Space

Set components spacing.

| Property | Type | Default | Description | | --- | --- | --- | --- | | direction | vertical \| horizontal | horizontal | The space direction | | size | small \| middle \| large \| number \| [number, number] | small | The space size | | align | start \| end \| center \| baseline | - | Align items | | wrap | boolean | false | Auto wrap line, when horizontal |

Navigation

Anchor

A production-grade, design-system-aligned navigation primitive for internal routing and external links.

| Property | Type | Default | Description | | --- | --- | --- | --- | | href | string | - | Destination URL | | as | ElementType | 'a' | Polymorphic prop (e.g. NextLink, react-router Link) | | variant | default \| subtle \| strong \| underline \| ghost \| danger | default | Visual styling variant | | size | xs \| sm \| md \| lg \| xl \| 2xl ... | md | Typography-aligned text size | | underline | always \| hover \| none | hover | Underline behavior | | external | boolean | false | Forces external link behavior (auto-detects 'http') | | disabled | boolean | false | Disables interaction and dims link | | iconLeft | ReactNode | - | Icon placed before the text | | iconRight | ReactNode | - | Icon placed after the text (overrides external icon) | | items | AnchorLink[] | - | Legacy Prop: Render Table of Contents (scroll-spy) |

Breadcrumb

A list of links that help users understand their current location.

| Property | Type | Default | Description | | --- | --- | --- | --- | | items | BreadcrumbItemProps[] | - | Breadcrumb items configuration array | | separator | ReactNode | '/' | Custom separator between breadcrumb items | | maxItems | number | - | Max items to display before truncating | | variant | default \| subtle \| strong \| minimal | default | Visual variant of the breadcrumb | | size | xs \| sm \| md \| lg \| xl | md | Size of the breadcrumb text and icons |

Dropdown

A dropdown menu for displaying actions and navigation links.

| Property | Type | Default | Description | | --- | --- | --- | --- | | items | DropdownItemType[] | [] | Menu items data array (alternative to JSX) | | trigger | ('click' \| 'hover')[] | ['click'] | The trigger mode which can trigger dropdown | | placement | bottomLeft \| bottomCenter \| bottomRight \| topLeft \| topCenter \| topRight | bottomLeft | The placement of the dropdown menu | | open | boolean | - | Whether the dropdown menu is currently open | | onOpenChange | function(open) | - | Callback when the open state changes | | closeOnSelect | boolean | true | Whether to close the dropdown when an item is clicked |

Menu

A list of navigation options.

| Property | Type | Default | Description | | --- | --- | --- | --- | | items | MenuItemType[] | [] | The menu items configuration | | variant | vertical \| horizontal \| compact \| minimal \| elevated | vertical | The visual and layout variant of the menu | | selectedKeys | string[] | [] | The selected menu items (controlled) | | defaultSelectedKeys | string[] | [] | The initially selected menu items (uncontrolled) | | onSelect | function({ key, keyPath, item, domEvent }) | - | Callback when a menu item is selected | | onClick | function({ key, keyPath, item, domEvent }) | - | Callback when a menu item is clicked | | mode | vertical \| horizontal \| inline | vertical | Menu mode (legacy) | | collapsed | boolean | false | Whether the menu is collapsed |

Pagination

A long list can be divided into several pages.

| Property | Type | Default | Description | | --- | --- | --- | --- | | current | number | - | Current page number (controlled) | | defaultCurrent | number | 1 | Default initial page number | | total | number | 0 | Total number of data items | | pageSize | number | 10 | Number of data items per page | | onChange | function(page, pageSize) | - | Callback when the page number or pageSize is changed | | variant | default \| compact \| simple \| advanced \| rounded | default | Visual variant | | size | small \| default | default | Specify the size of Pagination | | showSizeChanger | boolean | false | Determine whether pageSize can be changed | | showQuickJumper | boolean | false | Determine whether you can jump to pages directly |

Steps

Steps is a navigation bar that guides users through the steps of a task.

| Property | Type | Default | Description | | --- | --- | --- | --- | | current | number | 0 | To set the current step, counting from 0 | | status | wait \| process \| finish \| error | process | To specify the status of the current step | | direction | horizontal \| vertical | horizontal | To specify the direction of the step bar | | items | StepItem[] | [] | Step items configuration |

Tabs

Tabs make it easy to switch between different views.

| Property | Type | Default | Description | | --- | --- | --- | --- | | items | TabItem[] | [] | Tabs configuration array | | activeKey | string | - | Current TabPane's key (controlled) | | defaultActiveKey | string | - | Initial active TabPane's key, if activeKey is not provided | | onChange | function(key) | - | Callback executed when active tab item is changed | | variant | line \| solid \| enclosed \| pills \| minimal | line | Visual style of tabs | | size | small \| default \| large | default | Size of the tabs | | orientation | horizontal \| vertical | horizontal | Layout direction of tabs |

Data Entry

AutoComplete

Autocomplete function of input field.

| Property | Type | Default | Description | | --- | --- | --- | --- | | options | AutoCompleteOption[] | [] | Data source of autocomplete | | value | string | - | Current value |

Cascader

Cascade selection box.

| Property | Type | Default | Description | | --- | --- | --- | --- | | options | CascaderOption[] | [] | The data options of cascade | | value | (string \| number)[] | - | Selected value |

Checkbox

Checkbox component.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| subtle \| filled \| outline \| ghost | default | Visual variant | | checked | boolean | false | Specifies whether the checkbox is selected | | onChange | (e: CheckboxChangeEvent) => void | - | The callback function that is triggered when the state changes |

ColorPicker

To select or input a color.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| compact \| inline \| popup \| swatch-only | default | Visual variant | | value | string \| Color | - | Current value | | onChange | (value: Color, hex: string) => void | - | Callback when the color changes |

DatePicker

To select or input a date.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | single \| range \| multiple \| datetime \| time-only | single | The picker mode | | placeholder | string \| [string, string] | - | The placeholder of date input | | onChange | (date: Date \| Date[] \| null, dateString: string \| string[]) => void | - | Callback when the selected date changes |

Form

High-performance form component with data collection, validation, and layout.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| horizontal \| compact \| inline \| card \| wizard \| floating-label \| minimal \| bordered \| split \| responsive | default | Visual and layout variant | | initialValues | object | - | Initial values of the form | | onFinish | function(values) | - | Callback function when the form is submitted and validation passes | | layout | horizontal \| vertical | vertical | Form layout direction | | disabled | boolean | false | Whether to disable all form fields |

Input

A highly composable, production-grade text input supporting a wide variety of variants and addons.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| filled \| outlined \| ghost \| underline \| soft \| floating \| borderless \| accent \| danger \| success \| glass \| aurora \| neon \| glow \| 3d \| cyber \| prism \| velvet | default | Visual variant style of the input | | size | sm \| md \| lg | md | Size of the input | | status | error \| warning \| success | - | Set validation status | | allowClear | boolean | false | Allow clearing input content via an icon | | prefix | ReactNode | - | Addon before the input text | | suffix | ReactNode | - | Addon after the input text | | label | string | - | Used for floating label variant |

InputNumber

Enter a number within certain range with the mouse or keyboard.

| Property | Type | Default | Description | | --- | --- | --- | --- | | min | number | - | The minimum value | | max | number | - | The maximum value | | value | number | - | The current value |

Radio

Used to select a single value from multiple options.

| Property | Type | Default | Description | | --- | --- | --- | --- | | checked | boolean | false | Specifies whether the radio is selected (controlled) | | defaultChecked | boolean | false | Specifies whether the radio is selected initially (uncontrolled) | | onChange | function(e) | - | Callback executed when selection state is changed | | disabled | boolean | false | Disable the radio | | value | any | - | According to checkbox-group, it is the value for current radio |

Rate

Rate component.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| filled \| outline \| soft \| accent | default | Visual variant | | count | number | 5 | Star count | | value | number | - | Current value | | allowHalf | boolean | false | Whether to allow semi selection |

Select

Select component to select one or more values from options.

| Property | Type | Default | Description | | --- | --- | --- | --- | | options | SelectOption[] | [] | Select options | | value | any | - | Current value (controlled) | | defaultValue | any | - | Initial selected value | | onChange | function(value, option) | - | Callback when value changes | | placeholder | string | - | Placeholder text | | disabled | boolean | false | Whether the select is disabled | | loading | boolean | false | Whether the select is in loading state | | allowClear | boolean | false | Show clear button | | size | small \| middle \| large | middle | The size of the select | | mode | multiple \| tags | - | Set mode of Select |

Slider

A Slider component for displaying current value and hovering in range.

| Property | Type | Default | Description | | --- | --- | --- | --- | | min | number | 0 | The minimum value the slider can slide to | | max | number | 100 | The maximum value the slider can slide to | | step | number \| null | 1 | The granularity the slider can step through values |

Switch

A production-grade, accessible toggle control system.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| filled \| outline \| ghost \| soft \| inverted \| accent \| danger \| success \| minimal \| gradient | default | The visual style of the switch | | size | sm \| md \| lg | md | Size of the switch | | checked | boolean | false | Whether the switch is on (controlled) | | defaultChecked | boolean | false | Initial state of the switch (uncontrolled) | | loading | boolean | false | Shows a loading indicator and disables interaction | | disabled | boolean | false | Disables the switch | | label | ReactNode | - | Label for the switch | | labelPosition | left \| right | right | Position of the label | | confirm | (nextChecked: boolean) => boolean \| Promise<boolean> | - | Async confirmation handler (supports optimistic UI) | | helperText | ReactNode | - | Supporting text below the switch |

TimePicker

To select or input a time.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | single \| range \| 12h \| 24h \| with-seconds | single | The picker mode | | format | string | HH:mm:ss | To set the time format |

Transfer

Double column transfer choice box.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | basic \| dnd \| sortable \| multi-dnd \| grouped | basic | Behavior variant | | dataSource | TransferItem[] | [] | Used for setting the source data | | targetKeys | string[] | [] | A set of keys of items that are listed on the right column |

TreeSelect

Tree selection control.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | single \| multiple \| checkable \| searchable \| async | single | Behavior variant | | treeData | TreeNode[] | [] | The tree data |

Upload

Upload files by selecting or dragging.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | basic \| drag \| multiple \| picture \| avatar | basic | Upload behavior and visual variant | | action | string \| (file: RcFile) => Promise<string> | - | Uploading URL |

Data Display

Avatar

Avatars represent people or entities with images, initials, or icons.

| Property | Type | Default | Description | | --- | --- | --- | --- | | src | string | - | The address of the image of the avatar | | fallback | string | - | The name used for initials generation and background color hashing | | icon | ReactNode | - | Custom icon to display | | variant | default \| soft \| outlined \| filled \| gradient \| minimal \| inverted \| accent \| standard \| glass \| aurora \| neon \| glow \| 3d \| cyber \| prism \| velvet | default | Visual variant of the avatar | | size | xs \| sm \| md \| lg \| xl \| number | md | The size of the avatar | | shape | circle \| square \| rounded | circle | The shape of the avatar | | status | online \| offline \| away \| busy \| none | none | Status indicator |

Badge

Small numerical value or status descriptor for UI elements.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| solid \| outline \| soft \| subtle \| inverted \| accent \| danger \| success \| warning \| info \| dot \| count \| ribbon | default | Visual variant of the badge | | count | ReactNode | - | Number or content to show in badge | | dot | boolean | false | Whether to show a dot instead of a count | | status | success \| processing \| default \| error \| warning \| info | - | Set the status of the badge | | text | ReactNode | - | If status is set, text sets the display text of the status dot | | maxCount | number | 99 | Max count to display | | showZero | boolean | false | Whether to show the badge when count is 0 | | offset | [number \| string, number \| string] | - | Set offset of the badge dot, like [10, 20] | | size | small \| default \| large | default | Size of the dot |

Calendar

Container for displaying data in calendar form.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | month \| week \| day \| year \| range | month | The display mode of the calendar | | value | Date \| [Date, Date] | - | The current selected date | | defaultValue | Date \| [Date, Date] | - | The initial selected date | | onChange | (date: Date \| [Date, Date]) => void | - | Callback when the selected date changes | | fullscreen | boolean | true | Whether to display in full-screen |

Card

A card container for content.

| Property | Type | Default | Description | | --- | --- | --- | --- | | title | ReactNode | - | Card title | | extra | ReactNode | - | Content to render in the top-right corner of the card | | bordered | boolean | true | Whether to show a border | | loading | boolean | false | Whether the card is in loading state (shows skeleton) | | hoverable | boolean | false | Lift up when hovering over the card | | size | default \| small | default | Size of the card | | cover | ReactNode | - | Card cover image/content | | actions | ReactNode[] | - | The action list, rendered at the bottom of the card | | variant | default \| minimal \| glass \| aurora \| neon \| glow \| 3d \| cyber \| prism \| velvet | default | Visual variant style |

Collapse

A content area which can be collapsed and expanded.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | bordered \| ghost \| minimal \| inline \| compact | bordered | Visual variant | | items | CollapseItemProps[] | [] | Collapse items content | | accordion | boolean | false | If true, only one panel can be expanded at a time |

Descriptions

Display multiple read-only fields in groups.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| subtle \| minimal \| filled \| striped | default | Visual variant | | title | ReactNode | - | The title of the descriptions list | | bordered | boolean | false | Whether to display the border |

Image

Previewable image.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| responsive \| lazy \| progressive \| preview | default | Visual or behavior variant | | src | string | - | Image path | | width | string \| number | - | Image width | | height | string \| number | - | Image height |

List

A highly composable and performant list component for rendering collections of data.

| Property | Type | Default | Description | | --- | --- | --- | --- | | dataSource | T[] | [] | Data array to be rendered | | renderItem | (item: T, index: number) => ReactNode | - | Custom render function for each item | | header | ReactNode | - | List header | | footer | ReactNode | - | List footer | | bordered | boolean | false | Whether to show a border around the list | | itemLayout | 'horizontal' \| 'vertical' | 'horizontal' | The layout of the list items | | loading | boolean \| ReactNode | false | Loading state of the list | | size | 'small' \| 'default' \| 'large' | 'default' | The size of the list | | split | boolean | true | Whether to show a divider between items | | variant | 'default' \| 'minimal' \| 'striped' \| 'bordered' \| 'split' \| 'inline' | 'default' | Visual variant of the list | | grid | ListGridProps | - | Grid layout configuration | | infinite | boolean | false | Whether to enable infinite scroll | | onLoadMore | () => void | - | Callback function called when reaching the end of the list | | hasMore | boolean | false | Whether there is more data to load |

Popover

The floating card popped by clicking or hovering.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | click \| hover \| focus \| controlled \| nested | hover | Trigger variant | | content | ReactNode | - | Content of the card | | title | ReactNode | - | Title of the card |

Statistic

Display statistics.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| subtle \| bold \| minimal \| filled | default | Visual variant | | title | ReactNode | - | The title of the statistic | | value | string \| number | - | The value of the statistic |

Table

A table displays rows of data.

| Property | Type | Default | Description | | --- | --- | --- | --- | | dataSource | T[] | [] | Data array | | columns | ColumnType<T>[] | [] | Column definitions | | bordered | boolean | false | Show all borders | | pagination | boolean \| PaginationProps | true | Pagination config | | variant | TableVariant \| TableVariant[] | "default" | Visual or functional variants (e.g. striped, virtualized, tree, etc.) | | rowSelection | TableRowSelection<T> | - | Row selection config | | expandable | TableExpandable<T> | - | Expandable rows config | | scroll | { x?: string \| number \| true; y?: string \| number } | - | Whether the table can be scrolled | | virtual | boolean | false | Enable virtualization for large datasets |

Tag

Tag for categorizing or marking.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| solid \| outline \| soft \| subtle \| minimal \| inverted \| gradient \| accent \| neutral | default | Visual variant of the tag | | color | string | - | Color of the tag | | closable | boolean | false | Whether the tag can be closed | | selectable | boolean | false | Whether the tag can be selected | | selected | boolean | false | Whether the tag is selected (controlled) | | checkable | boolean | false | Whether to show a checkmark when selected | | icon | ReactNode | - | Icon to display before the label |

Timeline

Vertical display timeline.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| minimal \| outlined \| filled \| subtle | default | Visual variant | | items | TimelineItemProps[] | [] | Timeline items content |

Tooltip

A simple text popup tip.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | hover \| focus \| controlled \| manual \| delayed | hover | Trigger variant | | title | ReactNode | - | The text shown in the tooltip | | placement | top \| left \| right \| bottom \| ... | top | The position of the tooltip relative to the target |

Tree

A hierarchical list structure.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| compact \| spacious \| block \| inline | default | Visual variant | | treeData | TreeNode[] | [] | The tree data | | checkable | boolean | false | Whether to show a checkbox |

Feedback

Alert

A production-grade, accessible, and highly flexible feedback component for contextual messaging and status indication.

| Property | Type | Default | Description | | --- | --- | --- | --- | | type | info \| success \| warning \| error | info | Type of Alert which sets the status and default icon. | | variant | default \| filled \| outlined \| subtle \| minimal \| soft \| standard \| glass \| aurora \| neon \| glow \| 3d \| cyber \| prism \| velvet \| retro \| brutal \| mist | default | Visual style variant of the alert. | | layout | horizontal \| vertical | horizontal | Layout direction of the alert content. | | title | ReactNode | - | Title or short message of the alert. | | description | ReactNode | - | Detailed message or content of the alert. | | showIcon | boolean | true | Whether to show the status icon. | | closable | boolean | false | Whether the alert can be closed. | | onClose | function(e) | - | Callback when the alert is closed. | | action | ReactNode | - | Action element to display in the alert. | | banner | boolean | false | Whether to show as a banner (full width, no borders). | | icon | ReactNode | - | Custom icon to display. |

Drawer

A panel which slides in from the edge of the screen.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | persistent \| temporary \| push \| overlay \| nested | temporary | Drawer behavior variant | | title | ReactNode | - | The title for Drawer | | placement | top \| right \| bottom \| left | right | The placement of the Drawer | | open | boolean | false | Whether the Drawer is visible |

Message

Display lightweight global feedback messages.

| Property | Type | Default | Description | | --- | --- | --- | --- | | content | ReactNode | - | Content of the message. | | duration | number | 3 | Seconds before the message closes. Use 0 to keep it open. | | type | success \| info \| warning \| error \| loading | info | Visual feedback type for message.open. | | key | string \| number | - | Unique message key. |

Modal

Modal dialogs for user interaction and notifications.

| Property | Type | Default | Description | | --- | --- | --- | --- | | title | ReactNode | - | The title of the modal | | open | boolean | false | Whether the modal dialog is visible or not | | onOk | function(e) | - | Callback function when user clicks the OK button | | onCancel | function(e) | - | Callback function when user clicks the mask, the close button or Cancel button | | footer | ReactNode | (OK and Cancel buttons) | Footer content, set as footer={null} when you don't need default buttons | | width | string \| number | 520 | Width of the modal | | centered | boolean | false | Whether to center the modal vertically | | closable | boolean | true | Whether a close (x) button is visible on top right of the modal dialog or not | | maskClosable | boolean | true | Whether to close the modal dialog when the mask (area outside the modal) is clicked | | variant | default \| centered \| fullscreen \| drawer-left \| drawer-right | default | Layout and behavior variant |

Notification

Display a notification message globally.

| Property | Type | Default | Description | | --- | --- | --- | --- | | title | ReactNode | - | The title of the notification (message) | | description | ReactNode | - | The content of the notification | | duration | number | 4.5 | Time in seconds before notification is closed automatically. Use 0 to disable | | placement | topLeft \| topRight \| bottomLeft \| bottomRight | topRight | Position of notification | | icon | ReactNode | - | Customized icon | | onClose | function | - | Callback function when the notification is closed | | variant | default \| filled \| outlined \| subtle \| minimal | default | The visual variant of the notification |

Popconfirm

A simple confirmation box.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | click \| hover \| controlled \| async \| inline | click | Trigger and behavior variant | | title | ReactNode | - | The title of the confirmation box | | onConfirm | function(e) | - | A callback which will be called when a user clicks the confirm button |

Progress

Display the current progress of an operation flow.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| gradient \| striped \| subtle \| filled | default | Visual variant | | percent | number | 0 | The completion percentage | | status | success \| exception \| normal \| active | normal | The status of progress bar |

Result

Used to feedback on the results of operations.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| page \| inline \| card | default | Layout variant | | status | success \| error \| info \| warning \| 404 \| 403 \| 500 | info | Result status | | title | ReactNode | - | Result title |

Skeleton

Provide a placeholder while the content is loading.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| pulse \| wave \| gradient \| static \| inline \| block \| card \| list \| table | default | Animation and layout variant | | active | boolean | false | Show animation effect | | loading | boolean | true | Display skeleton when true |

Spin

A loading indicator.

| Property | Type | Default | Description | | --- | --- | --- | --- | | variant | default \| dots \| ring \| bars \| pulse \| inline \| overlay \| fullscreen \| centered \| persistent | default | Visual and functional variant | | spinning | boolean | true | Whether Spin is visible | | size | small \| default \| large | default | Size of Spin |

Other

Affix

Make an element stick to a viewport.

| Property | Type | Default | Description | | --- | --- | --- | --- | | offsetTop | number | 0 | Pixels to offset from top when calculating position of scroll | | offsetBottom | number | - | Pixels to offset from bottom when calculating position of scroll | | target | () => HTMLElement | () => window | Specifies the scrollable container of which the element will be fixed to | | onChange | function(affixed) | - | Callback when the state of fixed change | | variant | AffixVariant | - | Visual or behavioral variant (top, bottom, fixed, sticky, etc.) |

BackTop

A button for jumping to top of page.

| Property | Type | Default | Description | | --- | --- | --- | --- | | visibilityHeight | number | 400 | The button will not show until the scroll height reaches this value | | onClick | function | - | A callback function, which is executed when the button is clicked | | children | ReactNode | ▲ | Custom content of the BackTop button |

ConfigProvider

Provide global configuration for components.

| Property | Type | Default | Description | | --- | --- | --- | --- | | theme | ThemeConfig | - | Theme configuration including tokens and algorithms | | locale | string \| LocaleConfig | en-US | Language and localization settings | | direction | ltr \| rtl | ltr | Text direction | | density | compact \| default \| comfortable | default | Visual density of components | | prefixCls | string | ibex | Prefix for CSS classes |

Watermark

Security of data or anti-counterfeiting.

| Property | Type | Default | Description | | --- | --- | --- | --- | | content | string \| string[] | - | The watermark content | | rotate | number | -22 | The rotation angle |

📄 License

MIT