Empty

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15

import { Button, Empty, EmptyContent, EmptyDescription, EmptyTitle } from "@gunkin/uiify";

export default function Example() {
  return (
    <Empty className="">
      <EmptyTitle>No projects yet</EmptyTitle>
      <EmptyDescription>Create a project to organize your work and invite your team.</EmptyDescription>
      <EmptyContent>
        <Button as="a" className="" href="/projects/new" variant="link">
          Create a project
        </Button>
      </EmptyContent>
    </Empty>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19

@layer components {
  [data-uiify-empty] {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    inline-size: min(100%, 36rem);
    margin-inline: auto;
    text-align: center;
  }

  [data-uiify-empty-title],
  [data-uiify-empty-description] {
    margin: 0;
  }

  [data-uiify-empty-content] {
    margin-block-start: 0.25rem;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43

import { Button, Empty, EmptyContent, EmptyDescription, EmptyTitle } from "@gunkin/uiify";

export default function Example() {
  return (
    <Empty
      className="
        grid justify-items-center [gap:0.75rem] [inline-size:min(100%,_36rem)] [margin-inline:auto] text-center
      "
    >
      <EmptyTitle>No projects yet</EmptyTitle>
      <EmptyDescription>Create a project to organize your work and invite your team.</EmptyDescription>
      <EmptyContent>
        <Button
          as="a"
          className={
            "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 py-px border-transparent bg-c" +
            "lip-padding text-base font-medium leading-6 cursor-pointer [transition:var(--transition-colors)] focus-" +
            "visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] disabled" +
            ":opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed [" +
            "&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/_20" +
            "%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_25" +
            "5_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([dat" +
            "a-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pressed=tr" +
            "ue],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(255_255_255_/_20" +
            "%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transparent [:checked" +
            "+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]" +
            ":[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[data-disabled])]:[" +
            "background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@media_(any-hover" +
            ":_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:color-mix(in_oklc" +
            "h,_var(--primary)_88%,_var(--primary-foreground))] min-w-0 px-0 border-0 border-none rounded-none bg-tr" +
            "ansparent text-primary underline [text-underline-offset:0.2em] before:content-none after:content-none [" +
            "&:is(a)]:underline-offset-4 hover:bg-transparent focus-visible:[outline:2px_solid_var(--ring)] focus-vi" +
            "sible:[outline-offset:3px]"
          }
          href="/projects/new"
          variant="link"
        >
          Create a project
        </Button>
      </EmptyContent>
    </Empty>
  );
}