mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
d4d67a2119
* feat(wip): prototype search page * refactor(wip): improve search functionality * refactor(wip): streamline component rendering and improve search functionality * refactor: enhance ParticleCard and add skeleton loading state * refactor: remove unused particle categories and streamline registry categories * Update particles and components * refactor: update various UI components and registry files for improved functionality and consistency * chore: rename all examples to particle * fix: update no particles found message for clarity * refactor: consolidate examples into particles and update contributing guidelines for clarity * refactor: remove deprecated example files and update registry * chore: rename particle components * chore: remove vercel.json configuration files from apps/origin, apps/ui, and apps/www * chore: format and update docs
164 lines
3.4 KiB
Plaintext
164 lines
3.4 KiB
Plaintext
---
|
|
title: Empty
|
|
description: A container for displaying empty state information.
|
|
---
|
|
|
|
<ComponentPreview name="p-empty-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/empty
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="empty" title="components/ui/empty.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty"
|
|
```
|
|
|
|
```tsx
|
|
<Empty>
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<Icon />
|
|
</EmptyMedia>
|
|
<EmptyTitle>No data</EmptyTitle>
|
|
<EmptyDescription>No data found</EmptyDescription>
|
|
</EmptyHeader>
|
|
<EmptyContent>
|
|
<Button>Add data</Button>
|
|
</EmptyContent>
|
|
</Empty>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
The API design of this component is modeled after [shadcn/ui's empty component](https://ui.shadcn.com/docs/components/empty) to ensure familiarity and consistency for developers already using shadcn. This standardization makes it easier to adopt **coss ui** while maintaining API parity with the patterns developers already know and love.
|
|
|
|
### Empty
|
|
|
|
The main component of the empty state. Wraps the `EmptyHeader` and `EmptyContent` components.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<Empty>
|
|
<EmptyHeader />
|
|
<EmptyContent />
|
|
</Empty>
|
|
```
|
|
|
|
### EmptyHeader
|
|
|
|
The `EmptyHeader` component wraps the empty media, title, and description.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyHeader>
|
|
<EmptyMedia />
|
|
<EmptyTitle />
|
|
<EmptyDescription />
|
|
</EmptyHeader>
|
|
```
|
|
|
|
### EmptyMedia
|
|
|
|
Use the `EmptyMedia` component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | --------------------- | --------- |
|
|
| `variant` | `"default" \| "icon"` | `default` |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyMedia variant="icon">
|
|
<Icon />
|
|
</EmptyMedia>
|
|
```
|
|
|
|
```tsx
|
|
<EmptyMedia>
|
|
<Avatar>
|
|
<AvatarImage src="..." />
|
|
<AvatarFallback>JD</AvatarFallback>
|
|
</Avatar>
|
|
</EmptyMedia>
|
|
```
|
|
|
|
### EmptyTitle
|
|
|
|
Use the `EmptyTitle` component to display the title of the empty state.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyTitle>No data</EmptyTitle>
|
|
```
|
|
|
|
### EmptyDescription
|
|
|
|
Use the `EmptyDescription` component to display the description of the empty state.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyDescription>You do not have any notifications.</EmptyDescription>
|
|
```
|
|
|
|
### EmptyContent
|
|
|
|
Use the `EmptyContent` component to display the content of the empty state such as a button, input or a link.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<EmptyContent>
|
|
<Button>Add Project</Button>
|
|
</EmptyContent>
|
|
```
|