Solid UI Neobrutalism

1
import { Label } from "~/components/ui/label";
2

3
export default function LabelDemo() {
4
  return (
5
    <div>
6
      <Label for="email">Your email address</Label>
7
      <input
8
        type="email"
9
        id="email"
10
        placeholder="Enter your email"
11
        class="mt-1 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"
12
      />
13
    </div>
14
  );
15
}

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 Label: Component<ComponentProps<"label">> = (props) => {
8
  const [local, others] = splitProps(props, ["class"]);
9
  return (
10
    <label
11
      class={cn(
12
        "text-sm leading-none font-heading peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
13
        local.class,
14
      )}
15
      {...others}
16
    />
17
  );
18
};
19

20
export { Label };

Update the import paths to match your project setup.

Usage#

1
import { Label } from "~/components/ui/label";

1
<Label for="email">Your email address</Label>
2
<input type="email" id="email" />