Dialog
Installation
npx shadcn@latest add https://ui.timkit.cn/r/dialog.json
Usage
import { Dialog } from "@/components/ui/dialog"
Examples
Dialog · Overlay Pattern
Loading preview...
Dialog · Overlay Pattern
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Project name
Loading preview...
Dialog · Email
Loading preview...
Dialog · Send feedback
Loading preview...
Dialog · Why did you give this rating?
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Full name
Loading preview...
Dialog · Email
Loading preview...
Dialog · Invite via email
Loading preview...
Dialog · Name on card
Loading preview...
Dialog · Name on card
Loading preview...
Dialog · Essential
Loading preview...
Dialog · First name
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Interactive State
Loading preview...
Structured API
Component
dialog
Logic
zag / dialog
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | dialog | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | use-machine | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | The controlled open state. |
| defaultOpen | boolean | - | The default open state. |
| modal | boolean | true | Whether the dialog is modal. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onOpenChange | event | - | Event handler called when the open state changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The dialog content |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The dialog container |
| trigger | part | - | The toggle button |
| portal | part | - | The portal container |
| overlay | part | - | The dimmed background |
| content | part | - | The dialog content |
| header | part | - | The dialog header |
| footer | part | - | The dialog footer |
| title | part | - | The dialog title |
| description | part | - | The dialog description |
| close | part | - | The close button |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Dialog · Overlay Pattern
- Dialog · Overlay Pattern
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Project name
- Dialog · Email
- Dialog · Send feedback
- Dialog · Why did you give this rating?
- Dialog · Dismissible
- Dialog · Full name
- Dialog · Email
- Dialog · Invite via email
- Dialog · Name on card
- Dialog · Name on card
- Dialog · Essential
- Dialog · First name
- Dialog · Dismissible
- Dialog · Interactive State
- API Reference
Dialog
Installation
npx shadcn@latest add https://ui.timkit.cn/r/dialog.json
Usage
import { Dialog } from "@/components/ui/dialog"
Examples
Dialog · Overlay Pattern
Loading preview...
Dialog · Overlay Pattern
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Project name
Loading preview...
Dialog · Email
Loading preview...
Dialog · Send feedback
Loading preview...
Dialog · Why did you give this rating?
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Full name
Loading preview...
Dialog · Email
Loading preview...
Dialog · Invite via email
Loading preview...
Dialog · Name on card
Loading preview...
Dialog · Name on card
Loading preview...
Dialog · Essential
Loading preview...
Dialog · First name
Loading preview...
Dialog · Dismissible
Loading preview...
Dialog · Interactive State
Loading preview...
Structured API
Component
dialog
Logic
zag / dialog
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | dialog | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | use-machine | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | The controlled open state. |
| defaultOpen | boolean | - | The default open state. |
| modal | boolean | true | Whether the dialog is modal. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onOpenChange | event | - | Event handler called when the open state changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The dialog content |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The dialog container |
| trigger | part | - | The toggle button |
| portal | part | - | The portal container |
| overlay | part | - | The dimmed background |
| content | part | - | The dialog content |
| header | part | - | The dialog header |
| footer | part | - | The dialog footer |
| title | part | - | The dialog title |
| description | part | - | The dialog description |
| close | part | - | The close button |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Dialog · Overlay Pattern
- Dialog · Overlay Pattern
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Dismissible
- Dialog · Project name
- Dialog · Email
- Dialog · Send feedback
- Dialog · Why did you give this rating?
- Dialog · Dismissible
- Dialog · Full name
- Dialog · Email
- Dialog · Invite via email
- Dialog · Name on card
- Dialog · Name on card
- Dialog · Essential
- Dialog · First name
- Dialog · Dismissible
- Dialog · Interactive State
- API Reference