Solid UI Neobrutalism

1
import { Separator } from "~/components/ui/separator";
2

3
export default function SeparatorDemo() {
4
  return (
5
    <div>
6
      <div class="space-y-1">
7
        <h4 class="text-sm leading-none font-medium">@kobalte/core</h4>
8
        <p class="text-sm text-muted-foreground">
9
          An open-source UI component library.
10
        </p>
11
      </div>
12
      <Separator class="my-4" />
13
      <div class="flex h-5 items-center space-x-4 text-sm">
14
        <div>Blog</div>
15
        <Separator orientation="vertical" />
16
        <div>Docs</div>
17
        <Separator orientation="vertical" />
18
        <div>Source</div>
19
      </div>
20
    </div>
21
  );
22
}

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 { ValidComponent } from "solid-js";
3

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

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

9
type SeparatorRootProps<T extends ValidComponent = "hr"> =
10
  SeparatorPrimitive.SeparatorRootProps<T> & { class?: string | undefined };
11

12
const Separator = <T extends ValidComponent = "hr">(
13
  props: PolymorphicProps<T, SeparatorRootProps<T>>,
14
) => {
15
  const [local, others] = splitProps(props as SeparatorRootProps, [
16
    "class",
17
    "orientation",
18
  ]);
19
  return (
20
    <SeparatorPrimitive.Root
21
      data-slot="separator"
22
      orientation={local.orientation ?? "horizontal"}
23
      class={cn(
24
        "shrink-0 bg-muted-foreground",
25
        local.orientation === "vertical" ? "h-full w-0.5" : "h-0.5 w-full",
26
        local.class,
27
      )}
28
      {...others}
29
    />
30
  );
31
};
32

33
export { Separator };

Update the import paths to match your project setup.

Usage#

1
import { Separator } from "~/components/ui/separator";

1
<Separator />