# @univerjs/design

> Language fallback: requested `zh-CN`; content is `en-US`.

- Human documentation: [https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/design](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/design)

- Agent Markdown: [https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/design.md](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/design.md)

- Requested language: `zh-CN`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [packages/plugins/univerjs/design.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/packages/plugins/univerjs/design.mdx)

---

Shared React design components, styles, and locale resources for Univer UI packages.

```typescript
import { Button, ConfigProvider, Dialog, message, Select, Tree } from '@univerjs/design'
```

## Entry Points

* Locale: `@univerjs/design/locale/*`

## Exports

| Export                      | Kind      | Related types                                                                  |
| --------------------------- | --------- | ------------------------------------------------------------------------------ |
| `ActionRow`                 | Component | `IActionRowProps`                                                              |
| `Accordion`                 | Component | `IAccordionProps`                                                              |
| `Avatar`                    | Component | `IAvatarProps`                                                                 |
| `Badge`                     | Component | `IBadgeProps`                                                                  |
| `Button`                    | Component | `IButtonProps`                                                                 |
| `ButtonGroup`               | Component | `IButtonGroupProps`                                                            |
| `Calendar`                  | Component | -                                                                              |
| `CascaderList`              | Component | `ICascaderListProps`, `ICascaderOption`                                        |
| `CheckboxGroup`             | Component | `ICheckboxGroupProps`                                                          |
| `Checkbox`                  | Component | `ICheckboxProps`                                                               |
| `ColorPicker`               | Component | `IColorPickerProps`                                                            |
| `ColorPickerPanel`          | Component | `IColorPickerPanelProps`                                                       |
| `ConfigContext`             | Context   | `IConfigProviderProps`                                                         |
| `ConfigProvider`            | Component | `IConfigProviderProps`                                                         |
| `Confirm`                   | Component | `IConfirmProps`                                                                |
| `DatePicker`                | Component | -                                                                              |
| `DateRangePicker`           | Component | -                                                                              |
| `Dialog`                    | Component | `IDialogProps`                                                                 |
| `DraggableList`             | Component | `IDraggableListProps`                                                          |
| `DropdownMenu`              | Component | `IDropdownMenuProps`                                                           |
| `Dropdown`                  | Component | `IDropdownProps`                                                               |
| `FormDualColumnLayout`      | Component | `IFormDualColumnLayoutProps`, `IFormLayoutProps`                               |
| `FormLayout`                | Component | `IFormDualColumnLayoutProps`, `IFormLayoutProps`                               |
| `Gallery`                   | Component | `IGalleryProps`                                                                |
| `GradientColorPicker`       | Component | `GradientType`, `IGradientColorPickerProps`, `IGradientStop`, `IGradientValue` |
| `HoverCard`                 | Component | `IHoverCardProps`                                                              |
| `InputNumber`               | Component | `IInputNumberProps`                                                            |
| `Input`                     | Component | `IInputProps`                                                                  |
| `KBD`                       | Component | `IKBDProps`                                                                    |
| `message`                   | Function  | `IMessageProps`                                                                |
| `Messager`                  | Component | `IMessageProps`                                                                |
| `MessageType`               | Enum      | `IMessageProps`                                                                |
| `MobileActionRow`           | Component | `IMobileActionRowProps`                                                        |
| `MobileColorPresets`        | Component | `IMobileColorPresetsProps`                                                     |
| `removeMessage`             | Function  | `IMessageProps`                                                                |
| `Pager`                     | Component | `IPagerProps`                                                                  |
| `Popup`                     | Component | `IPopupProps`                                                                  |
| `RadioGroup`                | Component | `IRadioGroupProps`                                                             |
| `Radio`                     | Component | `IRadioProps`                                                                  |
| `Segmented`                 | Component | -                                                                              |
| `SelectList`                | Component | `ISelectListProps`                                                             |
| `MultipleSelect`            | Component | `IMultipleSelectProps`                                                         |
| `Select`                    | Component | `ISelectProps`                                                                 |
| `Separator`                 | Component | -                                                                              |
| `Switch`                    | Component | -                                                                              |
| `Textarea`                  | Component | -                                                                              |
| `TimeInput`                 | Component | -                                                                              |
| `toast`                     | Function  | `IToasterProps`                                                                |
| `Toaster`                   | Component | `IToasterProps`                                                                |
| `Tooltip`                   | Component | `ITooltipProps`                                                                |
| `filterLeafNode`            | Function  | `ITreeNodeProps`, `ITreeProps`                                                 |
| `findNodePathFromTree`      | Function  | `ITreeNodeProps`, `ITreeProps`                                                 |
| `findSubTreeFromPath`       | Function  | `ITreeNodeProps`, `ITreeProps`                                                 |
| `mergeTreeSelected`         | Function  | `ITreeNodeProps`, `ITreeProps`                                                 |
| `Tree`                      | Component | `ITreeNodeProps`, `ITreeProps`                                                 |
| `TreeSelectionMode`         | Enum      | `ITreeNodeProps`, `ITreeProps`                                                 |
| `borderBottomClassName`     | Helper    | -                                                                              |
| `borderClassName`           | Helper    | -                                                                              |
| `borderLeftBottomClassName` | Helper    | -                                                                              |
| `borderLeftClassName`       | Helper    | -                                                                              |
| `borderRightClassName`      | Helper    | -                                                                              |
| `borderTopClassName`        | Helper    | -                                                                              |
| `divideXClassName`          | Helper    | -                                                                              |
| `divideYClassName`          | Helper    | -                                                                              |
| `scrollbarClassName`        | Helper    | -                                                                              |
| `clsx`                      | Helper    | -                                                                              |
| `isBrowser`                 | Helper    | -                                                                              |
| `render`                    | Helper    | -                                                                              |
| `unmount`                   | Helper    | -                                                                              |
| `resizeObserverCtor`        | Helper    | -                                                                              |

## Types

### IAccordionProps

```ts
import type { ReactNode } from 'react'

export interface IAccordionProps {
  className?: string
  items: IAccordionItem[]
}
```

### IAvatarProps

```ts
import type { VariantProps } from 'class-variance-authority'
import type { CSSProperties, ReactNode } from 'react'

export interface IAvatarProps extends Omit<VariantProps<typeof avatarVariants>, 'size'> {
  children?: ReactNode

  className?: string

  style?: CSSProperties

  title?: string

  alt?: string

  size?: 'small' | 'middle' | number

  src?: string

  fit?: ImageFit

  onError?: () => void

  onLoad?: () => void
}
```

### IBadgeProps

```ts
import type { ReactNode } from 'react'

export interface IBadgeProps {
  className?: string
  children: ReactNode
  closable?: boolean
  onClose?: () => void
}
```

### IButtonProps

```ts
import type { VariantProps } from 'class-variance-authority'
import type { ButtonHTMLAttributes } from 'react'

export interface IButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
  VariantProps<typeof buttonVariants> {
  asChild?: boolean
}
```

### IButtonGroupProps

```ts
import type { ReactElement } from 'react'
import type { IButtonProps } from './Button'

export interface IButtonGroupProps {
  className?: string
  orientation?: 'horizontal' | 'vertical'
  children: ReactElement<IButtonProps>[]
}
```

### ICascaderListProps

```ts
export interface ICascaderListProps {

  value: string[]

  options?: ICascaderOption[]

  onChange: (value: string[]) => void

  contentClassName?: string

  wrapperClassName?: string
}
```

### ICascaderOption

```ts
export interface ICascaderOption {
  label: string
  value: string
  color?: string
  children?: ICascaderOption[]
}
```

### ICheckboxGroupProps

```ts
import type { CSSProperties, ReactNode } from 'react'
import type { ICheckboxProps } from '../checkbox/Checkbox'

export interface ICheckboxGroupProps {
  children: ReactNode[]

  className?: string

  style?: CSSProperties

  value: Array<string | number | boolean>

  disabled?: boolean

  direction?: 'horizontal' | 'vertical'

  onChange: (value: Array<string | number | boolean>) => void
}
```

### ICheckboxProps

```ts
import type { ChangeEvent, CSSProperties, ReactNode } from 'react'

export interface ICheckboxProps {
  children?: ReactNode

  className?: string

  style?: CSSProperties

  checked?: boolean

  indeterminate?: boolean

  value?: string | number | boolean

  disabled?: boolean

  onChange?: (value: string | number | boolean) => void

  contentClassName?: string
}
```

### IColorPickerProps

```ts
export interface IColorPickerProps {
  format?: 'hex' | 'rgba'
  value?: string
  onChange?: (value: string) => void
}
```

### IConfigProviderProps

```ts
import type { ReactNode } from 'react'

export interface IConfigProviderProps {
  children: ReactNode
  locale?: any
  mountContainer: HTMLElement | null
}
```

### IConfirmProps

```ts
import type { ReactNode } from 'react'
import type enUS from '../../locale/en-US'

export interface IConfirmProps {
  children: ReactNode

  visible?: boolean

  title?: React.ReactNode

  cancelText?: string

  confirmText?: string

  onClose?: () => void

  onConfirm?: () => void

  width?: number | string

  closable?: boolean

}
```

### IDialogProps

```ts
import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react'

export interface IDialogProps {
  children: ReactNode

  style?: CSSProperties

  open?: boolean

  width?: number | string

  title?: ReactNode

  draggable?: boolean

  defaultPosition?: { x: number, y: number }

  destroyOnClose?: boolean

  preservePositionOnDestroy?: boolean

  footer?: ReactNode

  mask?: boolean

  className?: string

  closable?: boolean

  maskClosable?: boolean

  keyboard?: boolean

  onOpenChange?: (open: boolean) => void

  onClose?: () => void

  showOk?: boolean
  showCancel?: boolean

  onOk?: () => void
  onCancel?: () => void
}
```

### IDraggableListProps

```ts
import type { CSSProperties, HTMLAttributes, PointerEvent, ReactNode } from 'react'

export interface IDraggableListProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'onDragStart'>, IDraggableListDragCallbacks {
  list: T[]
  onListChange: (list: T[]) => void
  idKey: keyof T
  itemRender: (item: T, index: number) => ReactNode
  draggableHandle?: string
  rowHeight?: number
  margin?: [number, number]
}
```

### IDropdownMenuProps

```ts
import type { ComponentProps, ReactNode } from 'react'

export interface IDropdownMenuProps extends ComponentProps<typeof DropdownMenuContent> {
  children: ReactNode
  items: DropdownMenuType[]
  disabled?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}
```

### IDropdownProps

```ts
import type { ComponentProps, ReactNode } from 'react'

export interface IDropdownProps extends ComponentProps<typeof PopoverContent> {
  children: ReactNode
  overlay: ReactNode
  disabled?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}
```

### IFormDualColumnLayoutProps

```ts
import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'

export type IFormDualColumnLayoutProps = PropsWithChildren
```

### IFormLayoutProps

```ts
import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'

export interface IFormLayoutProps {
  label?: ReactNode
  desc?: ReactNode
  children?: ReactNode

  style?: CSSProperties
  className?: string
  contentStyle?: CSSProperties
  error?: string
  collapsable?: boolean
  defaultCollapsed?: boolean
}
```

### IGalleryProps

```ts
export interface IGalleryProps {
  className?: string
  images: string[]
  open?: boolean
  onOpenChange?: (open: boolean) => void
}
```

### GradientType

```ts
export type GradientType = 'linear' | 'radial' | 'angular' | 'diamond'
```

### IGradientColorPickerProps

```ts
export interface IGradientColorPickerProps {
  className?: string
  value?: IGradientValue
  onChange?: (value: IGradientValue) => void
}
```

### IGradientStop

```ts
export interface IGradientStop {
  color: string
  offset: number
}
```

### IGradientValue

```ts
export interface IGradientValue {
  type: GradientType
  stops: IGradientStop[]
  angle?: number
}
```

### IHoverCardProps

```ts
import type { ComponentProps, ReactNode } from 'react'

export interface IHoverCardProps extends ComponentProps<typeof HoverCardContent> {
  children: ReactNode
  overlay: ReactNode
  disabled?: boolean

  openDelay?: number
  open?: boolean
  onOpenChange?: (open: boolean) => void
}
```

### IInputNumberProps

```ts
import type { FocusEvent, InputHTMLAttributes, KeyboardEvent } from 'react'

export interface IInputNumberProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
  value?: number | null
  defaultValue?: number
  size?: 'mini' | 'small'
  min?: number
  max?: number
  step?: number
  precision?: number
  formatter?: (value: string | number | undefined) => string
  parser?: (displayValue: string | undefined) => string
  controls?: boolean
  className?: string
  inputClassName?: string
  controlsClassName?: string
  onChange?: (value: number | null) => void
  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void
  onPressEnter?: (e: KeyboardEvent<HTMLInputElement>) => void
  allowEmpty?: boolean
}
```

### IInputProps

```ts
import type { VariantProps } from 'class-variance-authority'
import type { InputHTMLAttributes } from 'react'

export interface IInputProps extends Pick<InputProps, 'onFocus' | 'onBlur'>,
  VariantProps<typeof inputVariants> {
  autoFocus?: boolean
  className?: string
  style?: React.CSSProperties
  type?: HTMLInputElement['type']
  placeholder?: string
  value?: string
  allowClear?: boolean
  disabled?: boolean
  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
  onChange?: (value: string) => void
  inputClass?: string
  inputStyle?: React.CSSProperties
  slot?: React.ReactNode
}
```

### IKBDProps

```ts
export interface IKBDProps {
  keyboard: string
  className?: string
}
```

### IMessageProps

```ts
import type { ComponentProps, ReactNode } from 'react'

export interface IMessageProps {
  id?: string
  content: string
  duration?: number
  type?: MessageType
  onClose?: () => void
}
```

### IPagerProps

```ts
export interface IPagerProps {
  className?: string
  text?: string
  value: number
  total: number
  loop?: boolean
  onChange?: (value: number) => void
}
```

### IPopupProps

```ts
import type { ReactElement } from 'react'

export interface IPopupProps {
  children: ReactElement

  visible?: boolean

  offset?: [number, number]

  overflowVisible?: boolean

  placementY?: 'below' | 'above'
}
```

### IRadioGroupProps

```ts
import type { CSSProperties, ReactNode } from 'react'
import type { IRadioProps } from '../radio/Radio'

export interface IRadioGroupProps {
  children: ReactNode[]

  className?: string

  style?: CSSProperties

  value: string

  disabled?: boolean

  direction?: 'horizontal' | 'vertical'

  onChange: (value: string | number | boolean) => void
}
```

### IRadioProps

```ts
import type { ReactNode } from 'react'

export interface IRadioProps {
  children?: ReactNode

  checked?: boolean

  value?: string | number | boolean

  disabled?: boolean

  onChange?: (value: string | number | boolean) => void
}
```

### ISelectListProps

```ts
export interface ISelectListProps {

  value: string | string[]

  options?: Array<{
    label: string
    value: string
    color?: string
  }>

  hideCheckMark?: boolean

  onChange: (value: string | string[] | undefined) => void

  multiple?: boolean

  optionClassName?: string

  className?: string
}
```

### IMultipleSelectProps

```ts
import type { ReactNode } from 'react'
import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu'

export interface IMultipleSelectProps {
  className?: string

  value: string[]

  disabled?: boolean

  options?: IOption[]

  borderless?: boolean

  onChange: (values: string[]) => void
}
```

### ISelectProps

```ts
import type { ReactNode } from 'react'
import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu'

export interface ISelectProps {
  className?: string

  value: string

  disabled?: boolean

  options?: IOption[]

  borderless?: boolean

  onChange: (value: string) => void
}
```

### IToasterProps

```ts
import type { ComponentProps } from 'react'

export type IToasterProps = ComponentProps<typeof Sonner>
```

### ITooltipProps

```ts
import type { ReactElement, ReactNode } from 'react'

export interface ITooltipProps {

  children: ReactNode

  className?: string

  asChild?: boolean

  title?: ReactNode

  placement?: 'top' | 'right' | 'bottom' | 'left'

  showIfEllipsis?: boolean

  visible?: boolean

  onVisibleChange?: (visible: boolean) => void
}
```

### ITreeNodeProps

```ts
import type { CSSProperties, ReactNode } from 'react'

export interface ITreeNodeProps {
  title: string
  key: string
  children?: ITreeNodeProps[]
}
```

### ITreeProps

```ts
import type { CSSProperties, ReactNode } from 'react'

export interface ITreeProps {
  data?: ITreeItemProps[]

  defaultExpandAll?: boolean

  selectionMode?: TreeSelectionMode

  valueGroup?: string[]

  onChange?: (node: ITreeNodeProps) => void

  onExpend?: (value: string) => void

  height?: number

  itemHeight?: number

  attachRender?: (node: ITreeItemProps) => ReactNode

  treeNodeClassName?: string

  style?: CSSProperties

  defaultCache?: Map<string, string[]>
}
```