Solid UI Neobrutalism

1
import { Button } from "~/components/ui/button";
2
import {
3
  Popover,
4
  PopoverContent,
5
  PopoverTrigger,
6
} from "~/components/ui/popover";
7
import {
8
  TextField,
9
  TextFieldInput,
10
  TextFieldLabel,
11
} from "~/components/ui/text-field";
12

13
export default function PopoverDemo() {
14
  return (
15
    <Popover>
16
      <PopoverTrigger as={Button<"button">}>Open</PopoverTrigger>
17
      <PopoverContent class="w-80">
18
        <div class="grid gap-4">
19
          <div class="space-y-2">
20
            <h4 class="leading-none font-medium">Dimensions</h4>
21
            <p class="text-sm">Set the dimensions for the layer.</p>
22
          </div>
23
          <div class="grid gap-4">
24
            <div class="items-center gap-4">
25
              <TextField>
26
                <TextFieldLabel>Width</TextFieldLabel>
27
                <TextFieldInput type="text" id="width" />
28
              </TextField>
29
            </div>
30
            <div class="items-center gap-4">
31
              <TextField>
32
                <TextFieldLabel>Max. width</TextFieldLabel>
33
                <TextFieldInput type="text" id="maxWidth" />
34
              </TextField>
35
            </div>
36
            <div class="items-center gap-4">
37
              <TextField>
38
                <TextFieldLabel>Height</TextFieldLabel>
39
                <TextFieldInput id="height" class="col-span-2 h-8" />
40
              </TextField>
41
            </div>
42
            <div class="items-center gap-4">
43
              <TextField>
44
                <TextFieldLabel>Max. height</TextFieldLabel>
45
                <TextFieldInput id="maxHeight" class="col-span-2 h-8" />
46
              </TextField>
47
            </div>
48
          </div>
49
        </div>
50
      </PopoverContent>
51
    </Popover>
52
  );
53
}

Installation#

Install the following dependencies

Copy and paste the following code into your project

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

4
import { splitProps } from "solid-js";
5
import * as PopoverPrimitive from "@kobalte/core/popover";
6

7
import { cn } from "~/lib/utils";
8

9
const PopoverTrigger = <T extends ValidComponent = "button">(
10
  props: PolymorphicProps<T, PopoverPrimitive.PopoverTriggerProps<T>>,
11
) => {
12
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
13
};
14

15
const Popover: Component<PopoverPrimitive.PopoverRootProps> = (props) => {
16
  return <PopoverPrimitive.Root data-slot="popover" gutter={4} {...props} />;
17
};
18

19
type PopoverContentProps<T extends ValidComponent = "div"> =
20
  PopoverPrimitive.PopoverContentProps<T> & { class?: string | undefined };
21

22
const PopoverContent = <T extends ValidComponent = "div">(
23
  props: PolymorphicProps<T, PopoverContentProps<T>>,
24
) => {
25
  const [local, others] = splitProps(props as PopoverContentProps, ["class"]);
26
  return (
27
    <PopoverPrimitive.Portal>
28
      <PopoverPrimitive.Content
29
        data-slot="popover-content"
30
        class={cn(
31
          "z-50 w-72 origin-[var(--kb-popover-content-transform-origin)] rounded-md border-2 border-border bg-background p-4 text-primary-foreground outline-none ui-expanded:animate-in ui-expanded:fade-in-0 ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out-0 ui-closed:zoom-out-95",
32
          local.class,
33
        )}
34
        {...others}
35
      />
36
    </PopoverPrimitive.Portal>
37
  );
38
};
39

40
export { Popover, PopoverTrigger, PopoverContent };

Update the import paths to match your project setup.

Usage#

1
import {
2
  Popover,
3
  PopoverContent,
4
  PopoverTrigger,
5
} from "~/components/ui/popover";

1
<Popover>
2
  <PopoverTrigger>Open Popover</PopoverTrigger>
3
  <PopoverContent>
4
    <p>This is the content of the popover.</p>
5
  </PopoverContent>
6
</Popover>