Empty

Preview

Empty

TypeScript

We couldn't find what you were looking for. Please try a different search or filter.

bash

1npx shadcn@latest add https://fysk.dev/r/empty.json

tsx

1import { Empty } from "@/components/ui"
2
3<Empty 
4title="No files" 
5description="Upload your first file to get started." 
6/>

The glass variant features a subtle frosted background, consistent with other glass components in Fysk.

Component

TypeScript

Your dashboard is currently empty. Connect your first integration to see insights.

A subtle, clean empty state without borders or background, ideal for smaller sections.

Component

TypeScript

Be the first to start the conversation.

While variants come with a default icon, you can override it with any React node.

Component

TypeScript

Connect your favorite tools to unlock powerful automation features.

Consistent Styles: Designed to match theButton and Input aesthetic with rounded corners and muted colors.
Variants: Includesdefault (dashed),secondary,outline,glass, andghost styles.
Flexible Sizing: Support for sm, md, lg, and fill footprints.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "glass" \| "outline" \| "ghost"`	`"default"`	The visual style of the container.
`size`	`"sm" \| "md" \| "lg" \| "fill"`	`"md"`	Adjusts padding and minimum height.
`title`	`string`	-	The primary headline.
`description`	`string`	-	Supporting explanatory text.
`icon`	`React.Node`	-	Custom icon override.
`action`	`React.Node`	-	Call-to-action slot.
`titleClassName`	`string`	-	Additional class for the title.
`descriptionClassName`	`string`	-	Additional class for the description.

The component is fully responsive and handles focus/accessibility states automatically.