# @univerjs/sheets-conditional-formatting-ui

> Language fallback: requested `ko-KR`; content is `en-US`.

- Human documentation: [https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/sheets-conditional-formatting-ui](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/sheets-conditional-formatting-ui)

- Agent Markdown: [https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/sheets-conditional-formatting-ui.md](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/sheets-conditional-formatting-ui.md)

- Requested language: `ko-KR`

- Content language: `en-US`

- Documentation version: `1.0.4`

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

---

Conditional formatting UI for Univer Sheets.

```typescript
// [!code word:UniverSheetsConditionalFormattingUIPlugin]
import { UniverSheetsConditionalFormattingUIPlugin } from '@univerjs/sheets-conditional-formatting-ui'

univer.registerPlugin(UniverSheetsConditionalFormattingUIPlugin, {})
```

## Entry Points

* Locale: `@univerjs/sheets-conditional-formatting-ui/locale/*`

## Rule UI

The root entry exports helpers for custom rule lists and panels:

| Export                                   | Usage                                                                                                          |
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `getRuleDescribe(rule, localeService)`   | Returns the localized description of a full `IConditionFormattingRule`.                                        |
| `ConditionalFormattingRulePreview`       | Renders the configured appearance. Pass `rule.rule`, not the full rule; it does not evaluate worksheet values. |
| `IConditionalFormattingRulePreviewProps` | Props for the preview, with an optional `rule: IConditionalFormattingRuleConfig`.                              |
| `CF_PANEL_KEY`                           | Key for overriding or opening the registered conditional-formatting panel.                                     |
| `IConditionFormattingPanelProps`         | Panel props, including `rule`, `RuleEditComponent`, `RuleListComponent`, and `onEditorExit`.                   |

`onEditorExit` runs when editing ends after submission, cancellation, or worksheet activation/removal. It is not a save-success or sidebar-close notification. The panel itself is registered under `CF_PANEL_KEY`; it is not exported as a React component from the package root.

See [rule descriptions and previews](https://docs.univer.ai/ko-KR/guides/sheets/features/conditional-formatting.md#custom-rule-ui) for an example and [component overrides](https://docs.univer.ai/ko-KR/guides/sheets/ui/components.md) for registration rules.

## IUniverSheetsConditionalFormattingUIConfig

```ts
import type { MenuConfig } from '@univerjs/ui'

export interface IUniverSheetsConditionalFormattingUIConfig {
  menu?: MenuConfig
}
```