# Empty Use the Empty component to display a empty state. ```svelte No Projects Yet You haven't created any projects yet. Get started by creating your first project.

``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add empty ``` ```bash npx shadcn-svelte@latest add empty ``` ```bash bun x shadcn-svelte@latest add empty ``` ## Usage ```svelte No data No data found ``` ## Examples ### Outline Use the `border` utility class to create a outline empty state. ```svelte Cloud Storage Empty Upload files to your cloud storage to access them anywhere. ``` ### Background Use the `bg-*` and `bg-gradient-*` utilities to add a background to the empty state. ```svelte No Notifications You're all caught up. New notifications will appear here. ``` ### Avatar Use the `EmptyMedia` component to display an avatar in the empty state. ```svelte LR User Offline This user is currently offline. You can leave a message to notify them or try again later. ``` ### Avatar Group Use the `EmptyMedia` component to display an avatar group in the empty state. ```svelte

CN LR ER

No Team Members Invite your team to collaborate on this project. ``` ### InputGroup You can add an `InputGroup` component to the `EmptyContent` component. ```svelte 404 - Not Found The page you're looking for doesn't exist. Try searching for what you need below. / Need help? Contact support ```