FoxD

A modern React component library.

Install

npm install @wentian/foxd

pnpm add @wentian/foxd

yarn add @wentian/foxd

Usage

import { Button, Input, Modal } from '@wentian/foxd'
import '@wentian/foxd/styles'

function App() {
  return (
    <div>
      <Button variant="primary">Click Me</Button>
      <Input placeholder="Type something..." />
    </div>
  )
}

Theme

FoxD supports light and dark themes via ConfigProvider:

import { ConfigProvider } from '@wentian/foxd'

function App() {
  return (
    <ConfigProvider theme="dark">
      {/* your app */}
    </ConfigProvider>
  )
}

Components

Common

| Component | Description | |-----------|-------------| | Button | Button component with multiple variants and sizes | | Icon | Icon component with 100+ built-in icons | | Typography | Typography with Text, Title, Paragraph, Link | | Affix | Affix component to fix element on scroll | | Anchor | Anchor navigation with links | | App | App wrapper providing Message, Modal, Notification context | | BackTop | Back to top button | | ConfigProvider | Global configuration provider for theme and locale | | FloatButton | Floating action button with group support | | Watermark | Watermark overlay |

Layout

| Component | Description | |-----------|-------------| | Layout | Page layout with Header, Footer, Content, Sider | | Divider | Divider line | | Flex | Flexbox layout | | HStack | Horizontal stack layout | | VStack | Vertical stack layout | | Row / Col | Grid system with 24 columns | | Masonry | Masonry/waterfall layout | | Space | Consistent spacing between elements | | Splitter | Resizable split panels | | Stack | Stack layout |

Navigation

| Component | Description | |-----------|-------------| | Breadcrumb | Breadcrumb navigation | | Dropdown | Dropdown menu | | Menu | Navigation menu | | Pagination | Pagination controls | | Steps | Step-by-step navigation | | Tabs | Tabbed content |

Data Entry

| Component | Description | |-----------|-------------| | Form | Form with validation support | | Input | Text input with password and search variants | | TextArea | Multi-line text input | | InputNumber | Numeric input with step controls | | AutoComplete | Input with autocomplete suggestions | | Select | Dropdown selector | | Cascader | Cascading selector | | TreeSelect | Tree-structured selector | | Checkbox | Checkbox with group support | | Radio | Radio button with group support | | Switch | Toggle switch | | Slider | Slider input | | Transfer | Dual-list transfer | | DatePicker | Date picker | | RangePicker | Date range picker | | TimePicker | Time picker | | Upload | File upload with drag support | | Rate | Star rating | | Mention | @ mention input |

Feedback

| Component | Description | |-----------|-------------| | Alert | Alert banner | | Drawer | Side drawer panel | | Message | Global message toast | | Modal | Dialog modal | | Notification | Notification notification box | | Popconfirm | Popover confirmation | | Progress | Progress indicator | | Result | Result page | | Skeleton | Content placeholder skeleton | | Spin | Loading spinner |

Display

| Component | Description | |-----------|-------------| | Avatar / AvatarGroup | User avatar with group | | Badge / BadgeRibbon | Status badge and ribbon | | Tag / CheckableTag | Tag label | | Tooltip | Tooltip on hover | | Popover | Popover card | | Card / CardGrid / CardMeta | Content card | | Empty | Empty state placeholder | | Statistic / StatisticTimer | Statistic number display | | Collapse | Collapsible panels | | Timeline | Timeline display | | Descriptions | Key-value description list | | Segmented | Segmented control | | Table | Data table with sorting, filtering, selection | | Tree | Tree view | | Carousel | Image/content carousel | | Image / ImagePreviewGroup | Image with preview | | Calendar | Calendar view | | QRCode | QR code generator | | Tour | Guided tour | | List | Data list |

API Reference

Button

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'default' \| 'dashed' \| 'text' \| 'link' | 'default' | Button style variant | | size | 'small' \| 'middle' \| 'large' | 'middle' | Button size | | disabled | boolean | false | Whether the button is disabled | | loading | boolean | false | Show loading spinner | | danger | boolean | false | Danger style | | block | boolean | false | Full width button | | icon | ReactNode | - | Icon element | | onClick | (e: MouseEvent) => void | - | Click handler |

Input

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | Input value (controlled) | | defaultValue | string | - | Default value | | placeholder | string | - | Placeholder text | | size | 'small' \| 'middle' \| 'large' | 'middle' | Input size | | status | 'default' \| 'error' \| 'warning' | 'default' | Validation status | | disabled | boolean | false | Whether the input is disabled | | readOnly | boolean | false | Read only | | prefix | ReactNode | - | Prefix icon/element | | suffix | ReactNode | - | Suffix icon/element | | onChange | (e: ChangeEvent) => void | - | Change handler |

Modal

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | false | Whether the modal is visible | | title | ReactNode | - | Modal title | | footer | ReactNode \| null | - | Footer content, null to hide | | size | 'small' \| 'middle' \| 'large' | 'middle' | Modal size | | closable | boolean | true | Show close button | | centered | boolean | false | Vertically center the modal | | mask | boolean | true | Show mask overlay | | maskClosable | boolean | true | Close on mask click | | keyboard | boolean | true | Close on ESC key | | confirmLoading | boolean | false | Loading state for confirm button | | okText | ReactNode | - | Confirm button text | | cancelText | ReactNode | - | Cancel button text | | onOk | (e: MouseEvent) => void | - | Confirm handler | | onCancel | (e: MouseEvent) => void | - | Cancel handler |

Form

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialValues | Record<string, any> | - | Initial form values | | onFinish | (values: Record<string, any>) => void | - | Submit handler (validation passed) | | onFinishFailed | (errors: FormErrorInfo) => void | - | Submit handler (validation failed) | | layout | 'horizontal' \| 'vertical' \| 'inline' | 'horizontal' | Form layout |

Form.Item

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | - | Field name | | label | ReactNode | - | Field label | | rules | ValidationRule[] | - | Validation rules | | required | boolean | false | Whether the field is required |

Select

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string \| string[] | - | Selected value (controlled) | | options | SelectOption[] | - | Options list | | mode | 'single' \| 'multiple' \| 'tags' | 'single' | Selection mode | | placeholder | string | - | Placeholder text | | size | 'small' \| 'middle' \| 'large' | 'middle' | Select size | | disabled | boolean | false | Whether the select is disabled | | showSearch | boolean | false | Enable search filtering | | showClear | boolean | false | Show clear button | | onChange | (value, option) => void | - | Change handler |

Table

| Prop | Type | Default | Description | |------|------|---------|-------------| | dataSource | T[] | [] | Data array | | columns | ColumnType<T>[] | - | Column definitions | | size | 'small' \| 'middle' \| 'large' | 'middle' | Table size | | variant | 'bordered' \| 'borderless' | 'bordered' | Table variant | | loading | boolean | false | Loading state | | rowKey | string \| ((record) => string) | - | Row key field | | rowSelection | RowSelectionConfig | - | Row selection config | | pagination | PaginationConfig \| false | - | Pagination config |

Message

import { Message } from '@wentian/foxd'

Message.success('Operation completed')
Message.error('Something went wrong')
Message.warning('Warning message')
Message.info('Info message')
Message.loading('Loading...')

| Method | Description | |--------|-------------| | Message.success(content, duration?) | Success message | | Message.error(content, duration?) | Error message | | Message.warning(content, duration?) | Warning message | | Message.info(content, duration?) | Info message | | Message.loading(content, duration?) | Loading message |

Notification

import { Notification } from '@wentian/foxd'

Notification.open({ message: 'Title', description: 'Description' })
Notification.success({ message: 'Success', description: 'Operation completed' })

Icon

FoxD includes 100+ built-in icons. All icons follow the XxxOutlined / XxxFilled / XxxTwoTone naming convention:

import { SearchOutlined, StarFilled, HeartTwoTone } from '@wentian/foxd'

<SearchOutlined />
<StarFilled style={{ color: 'gold' }} />
<HeartTwoTone twoToneColor="#eb2f96" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | spin | boolean | false | Rotate icon animation | | rotate | number | 0 | Rotation degrees | | style | CSSProperties | - | Custom styles | | onClick | (e: MouseEvent) => void | - | Click handler |

Custom icon from SVG:

import { Icon } from '@wentian/foxd'

const SvgIcon = () => (
  <Icon component={() => <svg>...</svg>} />
)

Icon from iconfont:

import { createFromIconfontCN } from '@wentian/foxd'

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_xxx.js'
})

ConfigProvider

| Prop | Type | Default | Description | |------|------|---------|-------------| | theme | 'light' \| 'dark' | 'light' | Theme mode | | locale | Locale | - | Locale configuration | | prefixCls | string | - | CSS class prefix |

DatePicker

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string \| null | - | Selected date value (controlled), format YYYY-MM-DD | | defaultValue | string \| null | - | Default date value | | placeholder | string | '选择日期' | Placeholder text | | size | 'small' \| 'middle' \| 'large' | 'middle' | Picker size | | status | 'default' \| 'error' \| 'warning' | 'default' | Validation status | | disabled | boolean | false | Whether the picker is disabled | | showTime | boolean | false | Show time selection | | disabledDate | (date: Date) => boolean | - | Disable specific dates | | onChange | (value: string, date: Date) => void | - | Date change handler |

Upload

| Prop | Type | Default | Description | |------|------|---------|-------------| | action | string | - | Upload URL | | method | string | 'post' | HTTP method | | accept | string | - | Accepted file types | | multiple | boolean | false | Allow multiple file selection | | draggable | boolean | false | Enable drag-and-drop upload | | disabled | boolean | false | Whether the upload is disabled | | size | 'small' \| 'middle' \| 'large' | 'middle' | Upload area size | | showUploadList | boolean | true | Show file list | | fileList | UploadFile[] | - | File list (controlled) | | defaultFileList | UploadFile[] | [] | Default file list | | maxCount | number | - | Max upload count | | onChange | (file: UploadFile, fileList: UploadFile[]) => void | - | File status change handler | | onRemove | (file: UploadFile) => boolean \| void | - | File remove handler, return false to prevent | | beforeUpload | (file: File, fileList: File[]) => boolean \| void \| Promise<boolean \| void> | - | Pre-upload hook, return false to cancel |

UploadFile

| Field | Type | Description | |-------|------|-------------| | uid | string | Unique file identifier | | name | string | File name | | status | 'pending' \| 'uploading' \| 'success' \| 'error' | Upload status | | percent | number | Upload progress (0-100) | | url | string | File access URL | | response | unknown | Upload response data | | error | string | Error message |

Drawer

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | false | Whether the drawer is visible | | title | ReactNode | - | Drawer title | | footer | ReactNode \| null | - | Footer content, null to hide | | placement | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | Drawer placement | | size | 'small' \| 'middle' \| 'large' | 'middle' | Drawer size (378/480/736px) | | width | number \| string | - | Custom width (for left/right placement) | | height | number \| string | - | Custom height (for top/bottom placement) | | closable | boolean | true | Show close button | | closeIcon | ReactNode | - | Custom close icon | | mask | boolean | true | Show mask overlay | | maskClosable | boolean | true | Close on mask click | | keyboard | boolean | true | Close on ESC key | | loading | boolean | false | Loading state | | extra | ReactNode | - | Extra content in header | | destroyOnClose | boolean | false | Destroy content when closed | | forceRender | boolean | false | Force render content even when hidden | | push | boolean \| { distance?: number \| string } | false | Push behavior when nested drawers | | zIndex | number | - | Z-index of the drawer | | onClose | (e: MouseEvent) => void | - | Close handler | | afterOpenChange | (open: boolean) => void | - | Callback after open state changed |

Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build
pnpm build

# Run tests
pnpm test

# Lint
pnpm lint

# Format
pnpm format

License

MIT