Solid UI Neobrutalism

1
import { Button } from "~/components/ui/button";
2
import {
3
  Card,
4
  CardContent,
5
  CardDescription,
6
  CardFooter,
7
  CardHeader,
8
  CardTitle,
9
} from "~/components/ui/card";
10

11
export default function CardDemo() {
12
  return (
13
    <Card class="w-[340px]">
14
      <CardHeader>
15
        <CardTitle>Create project</CardTitle>
16
        <CardDescription>Deploy your new project in one-click.</CardDescription>
17
      </CardHeader>
18
      <CardContent>
19
        <form>
20
          <div class="grid w-full items-center gap-4">
21
            <div class="flex flex-col space-y-1.5">
22
              <label for="name">Name</label>
23
              <input
24
                id="name"
25
                placeholder="Name of your project"
26
                class="flex h-10 w-full rounded-base border-2 border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-none"
27
              />
28
            </div>
29
            <div class="flex flex-col space-y-1.5">
30
              <label for="framework">Framework</label>
31
              <select
32
                id="framework"
33
                class="flex h-10 w-full rounded-base border-2 border-border bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-none"
34
              >
35
                <option value="">Select</option>
36
                <option value="next">Next.js</option>
37
                <option value="sveltekit">SvelteKit</option>
38
                <option value="astro">Astro</option>
39
                <option value="nuxt">Nuxt.js</option>
40
              </select>
41
            </div>
42
          </div>
43
        </form>
44
      </CardContent>
45
      <CardFooter class="flex justify-between">
46
        <Button variant="outline">Cancel</Button>
47
        <Button>Deploy</Button>
48
      </CardFooter>
49
    </Card>
50
  );
51
}

Installation#

Copy and paste the following code into your project

1
import type { Component, ComponentProps } from "solid-js";
2

3
import { splitProps } from "solid-js";
4

5
import { cn } from "~/lib/utils";
6

7
const Card: Component<ComponentProps<"div">> = (props) => {
8
  const [local, others] = splitProps(props, ["class"]);
9
  return (
10
    <div
11
      data-slot="card"
12
      class={cn(
13
        "flex flex-col gap-6 rounded-base border-2 border-border bg-background py-6 font-base text-foreground shadow-shadow",
14
        local.class,
15
      )}
16
      {...others}
17
    />
18
  );
19
};
20

21
const CardHeader: Component<ComponentProps<"div">> = (props) => {
22
  const [local, others] = splitProps(props, ["class"]);
23
  return (
24
    <div
25
      data-slot="card-header"
26
      class={cn(
27
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
28
        local.class,
29
      )}
30
      {...others}
31
    />
32
  );
33
};
34

35
const CardAction: Component<ComponentProps<"div">> = (props) => {
36
  const [local, others] = splitProps(props, ["class"]);
37

38
  return (
39
    <div
40
      data-slot="card-action"
41
      class={cn(
42
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
43
        local.class,
44
      )}
45
      {...others}
46
    />
47
  );
48
};
49

50
const CardTitle: Component<ComponentProps<"h3">> = (props) => {
51
  const [local, others] = splitProps(props, ["class"]);
52
  return (
53
    <h3
54
      data-slot="card-title"
55
      class={cn("text-lg leading-none font-bold tracking-tight", local.class)}
56
      {...others}
57
    />
58
  );
59
};
60

61
const CardDescription: Component<ComponentProps<"p">> = (props) => {
62
  const [local, others] = splitProps(props, ["class"]);
63
  return (
64
    <p
65
      data-slot="card-description"
66
      class={cn("text-sm font-medium text-muted-foreground", local.class)}
67
      {...others}
68
    />
69
  );
70
};
71

72
const CardContent: Component<ComponentProps<"div">> = (props) => {
73
  const [local, others] = splitProps(props, ["class"]);
74
  return (
75
    <div
76
      data-slot="card-content"
77
      class={cn("px-6 pt-0", local.class)}
78
      {...others}
79
    />
80
  );
81
};
82

83
const CardFooter: Component<ComponentProps<"div">> = (props) => {
84
  const [local, others] = splitProps(props, ["class"]);
85
  return (
86
    <div
87
      data-slot="card-footer"
88
      class={cn("flex items-center px-6 pt-0 [.border-t]:pt-6", local.class)}
89
      {...others}
90
    />
91
  );
92
};
93

94
export {
95
  Card,
96
  CardHeader,
97
  CardAction,
98
  CardFooter,
99
  CardTitle,
100
  CardDescription,
101
  CardContent,
102
};

Update the import paths to match your project setup.

Usage#

1
import {
2
  Card,
3
  CardContent,
4
  CardDescription,
5
  CardFooter,
6
  CardHeader,
7
  CardTitle,
8
} from "~/components/ui/card";

1
<Card>
2
  <CardHeader>
3
    <CardTitle>Card Title</CardTitle>
4
    <CardDescription>Card Description</CardDescription>
5
  </CardHeader>
6
  <CardContent>
7
    <p>Card Content</p>
8
  </CardContent>
9
  <CardFooter>
10
    <p>Card Footer</p>
11
  </CardFooter>
12
</Card>