Empty States

1"use client";23import { Button } from "@/components/ui/button";4import {5  Empty,6  EmptyContent,7  EmptyDescription,8  EmptyHeader,9  EmptyMedia,10  EmptyTitle,11} from "@/components/ui/empty";12import { cn } from "@/lib/utils";1314type EmptyStates01Props = {15  className?: string;16};1718function FolderIcon({ className }: { className?: string }) {19  return (20    <svg21      viewBox="0 0 24 24"22      fill="none"23      stroke="currentColor"24      strokeWidth="2"25      strokeLinecap="round"26      strokeLinejoin="round"27      aria-hidden="true"28      className={className}29    >30      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />31      <path d="M12 10v6" />32      <path d="M9 13h6" />33    </svg>34  );35}3637export function EmptyStates01({ className }: EmptyStates01Props) {38  return (39    <section className={cn("@container w-full bg-background", className)}>40      <div className="mx-auto flex w-full max-w-3xl items-center justify-center px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">41        <Empty className="w-full border border-dashed border-border">42          <EmptyHeader>43            <EmptyMedia variant="icon">44              <FolderIcon />45            </EmptyMedia>46            <EmptyTitle>No projects yet</EmptyTitle>47            <EmptyDescription>48              Create your first project to start shipping blocks and pages.49            </EmptyDescription>50          </EmptyHeader>51          <EmptyContent>52            <div className="flex flex-wrap items-center justify-center gap-2">53              <Button type="button" size="sm">54                Create project55              </Button>56              <Button type="button" size="sm" variant="secondary">57                Import58              </Button>59            </div>60          </EmptyContent>61        </Empty>62      </div>63    </section>64  );65}

1"use client";23import { Button } from "@/components/ui/button";4import {5  Empty,6  EmptyContent,7  EmptyDescription,8  EmptyHeader,9  EmptyMedia,10  EmptyTitle,11} from "@/components/ui/empty";12import { cn } from "@/lib/utils";1314type EmptyStates02Props = {15  className?: string;16};1718function SearchIcon({ className }: { className?: string }) {19  return (20    <svg21      viewBox="0 0 24 24"22      fill="none"23      stroke="currentColor"24      strokeWidth="2"25      strokeLinecap="round"26      strokeLinejoin="round"27      aria-hidden="true"28      className={className}29    >30      <circle cx="11" cy="11" r="7" />31      <path d="m20 20-3.5-3.5" />32    </svg>33  );34}3536export function EmptyStates02({ className }: EmptyStates02Props) {37  return (38    <section className={cn("@container w-full bg-background", className)}>39      <div className="mx-auto flex w-full max-w-3xl items-center justify-center px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">40        <Empty className="w-full">41          <EmptyHeader>42            <EmptyMedia variant="icon">43              <SearchIcon />44            </EmptyMedia>45            <EmptyTitle>No results found</EmptyTitle>46            <EmptyDescription>47              Nothing matched your search. Try a different keyword or clear48              filters.49            </EmptyDescription>50          </EmptyHeader>51          <EmptyContent>52            <Button type="button" size="sm" variant="outline">53              Clear search54            </Button>55          </EmptyContent>56        </Empty>57      </div>58    </section>59  );60}

1"use client";23import { Button } from "@/components/ui/button";4import {5  Empty,6  EmptyContent,7  EmptyDescription,8  EmptyHeader,9  EmptyMedia,10  EmptyTitle,11} from "@/components/ui/empty";12import { cn } from "@/lib/utils";1314type EmptyStates03Props = {15  className?: string;16};1718function AlertIcon({ className }: { className?: string }) {19  return (20    <svg21      viewBox="0 0 24 24"22      fill="none"23      stroke="currentColor"24      strokeWidth="2"25      strokeLinecap="round"26      strokeLinejoin="round"27      aria-hidden="true"28      className={className}29    >30      <path d="M12 9v4" />31      <path d="M12 17h.01" />32      <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />33    </svg>34  );35}3637export function EmptyStates03({ className }: EmptyStates03Props) {38  return (39    <section className={cn("@container w-full bg-background", className)}>40      <div className="mx-auto w-full max-w-3xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">41        <Empty className="w-full rounded-xl bg-muted">42          <EmptyHeader>43            <EmptyMedia variant="icon" className="bg-transparent text-destructive">44              <AlertIcon />45            </EmptyMedia>46            <EmptyTitle>Couldn’t load this page</EmptyTitle>47            <EmptyDescription>48              Something went wrong on our side. Retry in a moment or come back49              later.50            </EmptyDescription>51          </EmptyHeader>52          <EmptyContent>53            <div className="flex flex-wrap items-center justify-center gap-2">54              <Button type="button" size="sm">55                Try again56              </Button>57              <Button type="button" size="sm" variant="ghost">58                Go home59              </Button>60            </div>61          </EmptyContent>62        </Empty>63      </div>64    </section>65  );66}