Solid UI Neobrutalism

1
import { createSignal } from "solid-js";
2
import ChevronsUpDown from "lucide-solid/icons/chevrons-up-down";
3

4
import { Button } from "~/components/ui/button";
5
import {
6
  Collapsible,
7
  CollapsibleContent,
8
  CollapsibleTrigger,
9
} from "~/components/ui/collapsible";
10

11
export default function CollapsibleDemo() {
12
  const [open, setOpen] = createSignal(false);
13

14
  return (
15
    <Collapsible
16
      open={open()}
17
      onOpenChange={setOpen}
18
      class="flex w-[330px] flex-col gap-2"
19
    >
20
      <div class="flex items-center justify-between gap-4 px-4">
21
        <h4 class="text-sm font-semibold">
22
          @pekochan069 starred 3 repositories
23
        </h4>
24
        <CollapsibleTrigger
25
          as={Button}
26
          variant="ghost"
27
          size="icon"
28
          class="size-8"
29
        >
30
          <ChevronsUpDown />
31
          <span class="sr-only">Toggle</span>
32
        </CollapsibleTrigger>
33
      </div>
34
      <div class="rounded-md border px-4 py-2 font-mono text-sm">
35
        @kobalte/core
36
      </div>
37
      <CollapsibleContent class="flex flex-col gap-2">
38
        <div class="rounded-md border px-4 py-2 font-mono text-sm">
39
          @corvu/drawer
40
        </div>
41
        <div class="rounded-md border px-4 py-2 font-mono text-sm">
42
          solid-sonner
43
        </div>
44
      </CollapsibleContent>
45
    </Collapsible>
46
  );
47
}

Installation#

Install the following dependencies

Copy and paste the following code into your project

1
import type { PolymorphicProps } from "@kobalte/core";
2
import type { ValidComponent } from "solid-js";
3

4
import * as CollapsiblePrimitive from "@kobalte/core/collapsible";
5

6
const Collapsible = <T extends ValidComponent = "div">(
7
  props: PolymorphicProps<T, CollapsiblePrimitive.CollapsibleRootProps<T>>,
8
) => {
9
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
10
};
11

12
const CollapsibleTrigger = <T extends ValidComponent = "div">(
13
  props: PolymorphicProps<T, CollapsiblePrimitive.CollapsibleTriggerProps<T>>,
14
) => {
15
  return (
16
    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
17
  );
18
};
19

20
const CollapsibleContent = <T extends ValidComponent = "div">(
21
  props: PolymorphicProps<T, CollapsiblePrimitive.CollapsibleContentProps<T>>,
22
) => {
23
  return (
24
    <CollapsiblePrimitive.Content data-slot="collapsible-content" {...props} />
25
  );
26
};
27

28
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

Update the import paths to match your project setup.

Usage#

1
import {
2
  Collapsible,
3
  CollapsibleContent,
4
  CollapsibleTrigger,
5
} from "~/components/ui/collapsible";

1
<Collapsible>
2
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
3
  <CollapsibleContent>
4
    <p>This is the content of the collapsible section.</p>
5
  </CollapsibleContent>
6
</Collapsible>