Notification
Installation
npx shadcn@latest add https://ui.timkit.cn/r/notification.json
Usage
import { Notification } from "@/components/ui/notification"
Examples
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Outlined Style
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Outlined Style
Loading preview...
Notification · Dismissible
Loading preview...
Structured API
Component
notification
Logic
none
Runtime Frameworks
Not declared
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | none | State and interaction provider used by this component. |
| logic.machine | string | - | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | - | Framework demos/code currently available in registry files. |
| dependencies | array | - | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | enum (default | info | success | warning | destructive) | default | Visual priority level for the notification. |
| duration | number | 5000 | Auto dismiss duration in milliseconds. |
| closable | boolean | true | Whether users can manually close the notification. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onClose | event | - | Callback fired when the notification closes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The notification segments |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The notification container |
| icon | part | - | The icon section |
| title | part | - | The notification title |
| description | part | - | The notification description |
| actions | part | - | The actions section |
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
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Outlined Style
- Notification · Dismissible
- Notification · Outlined Style
- Notification · Dismissible
- API Reference
Notification
Installation
npx shadcn@latest add https://ui.timkit.cn/r/notification.json
Usage
import { Notification } from "@/components/ui/notification"
Examples
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Outlined Style
Loading preview...
Notification · Dismissible
Loading preview...
Notification · Outlined Style
Loading preview...
Notification · Dismissible
Loading preview...
Structured API
Component
notification
Logic
none
Runtime Frameworks
Not declared
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | none | State and interaction provider used by this component. |
| logic.machine | string | - | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | - | Framework demos/code currently available in registry files. |
| dependencies | array | - | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | enum (default | info | success | warning | destructive) | default | Visual priority level for the notification. |
| duration | number | 5000 | Auto dismiss duration in milliseconds. |
| closable | boolean | true | Whether users can manually close the notification. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onClose | event | - | Callback fired when the notification closes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The notification segments |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The notification container |
| icon | part | - | The icon section |
| title | part | - | The notification title |
| description | part | - | The notification description |
| actions | part | - | The actions section |
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
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Dismissible
- Notification · Outlined Style
- Notification · Dismissible
- Notification · Outlined Style
- Notification · Dismissible
- API Reference