Solid UI Neobrutalism

1
import CalculatorIcon from "lucide-solid/icons/calculator";
2
import CalendarIcon from "lucide-solid/icons/calendar";
3
import CreditCardIcon from "lucide-solid/icons/credit-card";
4
import SettingsIcon from "lucide-solid/icons/settings";
5
import SmileIcon from "lucide-solid/icons/smile";
6
import UserIcon from "lucide-solid/icons/user";
7

8
import {
9
  Command,
10
  CommandEmpty,
11
  CommandGroup,
12
  CommandInput,
13
  CommandItem,
14
  CommandList,
15
  CommandSeparator,
16
  CommandShortcut,
17
} from "~/components/ui/command";
18

19
export default function CommandDemo() {
20
  return (
21
    <Command class="rounded-base border-2 border-border shadow-shadow md:min-w-[450px]">
22
      <CommandInput placeholder="Search..." />
23
      <CommandList>
24
        <CommandEmpty>No results found.</CommandEmpty>
25
        <CommandGroup heading="Suggestions">
26
          <CommandItem>
27
            <CalendarIcon />
28
            <span>Calendar</span>
29
          </CommandItem>
30
          <CommandItem>
31
            <SmileIcon />
32
            <span>Search Emoji</span>
33
          </CommandItem>
34
          <CommandItem disabled>
35
            <CalculatorIcon />
36
            <span>Calculator</span>
37
          </CommandItem>
38
        </CommandGroup>
39
        <CommandSeparator />
40
        <CommandGroup heading="Settings">
41
          <CommandItem>
42
            <UserIcon />
43
            <span>Profile</span>
44
            <CommandShortcut>⌘P</CommandShortcut>
45
          </CommandItem>
46
          <CommandItem>
47
            <CreditCardIcon />
48
            <span>Billing</span>
49
            <CommandShortcut>⌘B</CommandShortcut>
50
          </CommandItem>
51
          <CommandItem>
52
            <SettingsIcon />
53
            <span>Settings</span>
54
            <CommandShortcut>⌘S</CommandShortcut>
55
          </CommandItem>
56
        </CommandGroup>
57
      </CommandList>
58
    </Command>
59
  );
60
}

Installation#

Install the following dependencies

Install the following component dependencies

dialog

Copy and paste the following code into your project

1
import type { DialogRootProps } from "@kobalte/core/dialog";
2
import type {
3
  Component,
4
  ComponentProps,
5
  ParentProps,
6
  VoidProps,
7
} from "solid-js";
8

9
import { splitProps } from "solid-js";
10
import * as CommandPrimitive from "cmdk-solid";
11
import SearchIcon from "lucide-solid/icons/search";
12

13
import { Dialog, DialogContent } from "~/components/ui/dialog";
14
import { cn } from "~/lib/utils";
15

16
const Command: Component<ParentProps<CommandPrimitive.CommandRootProps>> = (
17
  props,
18
) => {
19
  const [local, others] = splitProps(props, ["class"]);
20

21
  return (
22
    <CommandPrimitive.CommandRoot
23
      data-slot="command"
24
      class={cn(
25
        "flex size-full flex-col overflow-hidden rounded-base bg-background text-foreground blur-none",
26
        local.class,
27
      )}
28
      {...others}
29
    />
30
  );
31
};
32

33
const CommandDialog: Component<ParentProps<DialogRootProps>> = (props) => {
34
  const [local, others] = splitProps(props, ["children"]);
35

36
  return (
37
    <Dialog {...others}>
38
      <DialogContent class="overflow-hidden p-0">
39
        <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
40
          {local.children}
41
        </Command>
42
      </DialogContent>
43
    </Dialog>
44
  );
45
};
46

47
const CommandInput: Component<VoidProps<CommandPrimitive.CommandInputProps>> = (
48
  props,
49
) => {
50
  const [local, others] = splitProps(props, ["class"]);
51

52
  return (
53
    <div
54
      data-slot="command-input"
55
      class="flex items-center border-b-2 border-border px-3"
56
      cmdk-input-wrapper=""
57
    >
58
      <SearchIcon class="mr-2 size-4 shrink-0" />
59
      <CommandPrimitive.CommandInput
60
        class={cn(
61
          "mr-10 flex h-10 w-full rounded-base bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
62
          local.class,
63
        )}
64
        {...others}
65
      />
66
    </div>
67
  );
68
};
69

70
const CommandList: Component<ParentProps<CommandPrimitive.CommandListProps>> = (
71
  props,
72
) => {
73
  const [local, others] = splitProps(props, ["class"]);
74

75
  return (
76
    <CommandPrimitive.CommandList
77
      data-slot="command-list"
78
      class={cn("max-h-[300px] overflow-x-hidden overflow-y-auto", local.class)}
79
      {...others}
80
    />
81
  );
82
};
83

84
const CommandEmpty: Component<
85
  ParentProps<CommandPrimitive.CommandEmptyProps>
86
> = (props) => {
87
  const [local, others] = splitProps(props, ["class"]);
88

89
  return (
90
    <CommandPrimitive.CommandEmpty
91
      data-slot="command-empty"
92
      class={cn("py-6 text-center text-sm", local.class)}
93
      {...others}
94
    />
95
  );
96
};
97

98
const CommandGroup: Component<
99
  ParentProps<CommandPrimitive.CommandGroupProps>
100
> = (props) => {
101
  const [local, others] = splitProps(props, ["class"]);
102

103
  return (
104
    <CommandPrimitive.CommandGroup
105
      data-slot="command-group"
106
      class={cn(
107
        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
108
        local.class,
109
      )}
110
      {...others}
111
    />
112
  );
113
};
114

115
const CommandSeparator: Component<
116
  VoidProps<CommandPrimitive.CommandSeparatorProps>
117
> = (props) => {
118
  const [local, others] = splitProps(props, ["class"]);
119

120
  return (
121
    <CommandPrimitive.CommandSeparator
122
      data-slot="command-separator"
123
      class={cn("h-0.5 border-border bg-border", local.class)}
124
      {...others}
125
    />
126
  );
127
};
128

129
const CommandItem: Component<ParentProps<CommandPrimitive.CommandItemProps>> = (
130
  props,
131
) => {
132
  const [local, others] = splitProps(props, ["class"]);
133

134
  return (
135
    <CommandPrimitive.CommandItem
136
      data-slot="command-item"
137
      cmdk-item=""
138
      class={cn(
139
        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none aria-selected:bg-primary aria-selected:text-primary-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
140
        local.class,
141
      )}
142
      {...others}
143
    />
144
  );
145
};
146

147
const CommandShortcut: Component<ComponentProps<"span">> = (props) => {
148
  const [local, others] = splitProps(props, ["class"]);
149

150
  return (
151
    <span
152
      data-slot="command-shortcut"
153
      class={cn("ml-auto text-xs tracking-widest", local.class)}
154
      {...others}
155
    />
156
  );
157
};
158

159
export {
160
  Command,
161
  CommandDialog,
162
  CommandInput,
163
  CommandList,
164
  CommandEmpty,
165
  CommandGroup,
166
  CommandItem,
167
  CommandShortcut,
168
  CommandSeparator,
169
};

Update the import paths to match your project setup.

Usage#

1
import {
2
  Command,
3
  CommandDialog,
4
  CommandEmpty,
5
  CommandGroup,
6
  CommandInput,
7
  CommandItem,
8
  CommandList,
9
  CommandSeparator,
10
  CommandShortcut,
11
} from "~/components/ui/command";

1
<Command>
2
  <CommandInput placeholder="Type a command or search..." />
3
  <CommandList>
4
    <CommandEmpty>No results found.</CommandEmpty>
5
    <CommandGroup heading="Suggestions">
6
      <CommandItem>Calendar</CommandItem>
7
      <CommandItem>Search Emoji</CommandItem>
8
      <CommandItem>Calculator</CommandItem>
9
    </CommandGroup>
10
    <CommandSeparator />
11
    <CommandGroup heading="Settings">
12
      <CommandItem>Profile</CommandItem>
13
      <CommandItem>Billing</CommandItem>
14
      <CommandItem>Settings</CommandItem>
15
    </CommandGroup>
16
  </CommandList>
17
</Command>

Examples#

Dialog#

1
import { createSignal, onCleanup, onMount } from "solid-js";
2
import CalculatorIcon from "lucide-solid/icons/calculator";
3
import CalendarIcon from "lucide-solid/icons/calendar";
4
import CreditCardIcon from "lucide-solid/icons/credit-card";
5
import SettingsIcon from "lucide-solid/icons/settings";
6
import SmileIcon from "lucide-solid/icons/smile";
7
import UserIcon from "lucide-solid/icons/user";
8

9
import {
10
  CommandDialog,
11
  CommandEmpty,
12
  CommandGroup,
13
  CommandInput,
14
  CommandItem,
15
  CommandList,
16
  CommandSeparator,
17
  CommandShortcut,
18
} from "~/components/ui/command";
19

20
export default function CommandDialogDemo() {
21
  const [open, setOpen] = createSignal(false);
22

23
  const down = (e: KeyboardEvent) => {
24
    if (e.key === "j" && (e.ctrlKey || e.metaKey)) {
25
      e.preventDefault();
26
      setOpen((prev) => !prev);
27
    }
28
  };
29

30
  onMount(() => {
31
    document.addEventListener("keydown", down);
32
  });
33

34
  onCleanup(() => {
35
    document.removeEventListener("keydown", down);
36
  });
37

38
  return (
39
    <>
40
      <p class="text-sm text-foreground">
41
        Press{" "}
42
        <kbd class="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-foreground opacity-100 select-none">
43
          <span class="text-xs">⌘</span>J
44
        </kbd>
45
      </p>
46
      <CommandDialog open={open()} onOpenChange={setOpen}>
47
        <CommandInput placeholder="Type a command or search..." />
48
        <CommandList>
49
          <CommandEmpty>No results found.</CommandEmpty>
50
          <CommandGroup heading="Suggestions">
51
            <CommandItem>
52
              <CalendarIcon />
53
              <span>Calendar</span>
54
            </CommandItem>
55
            <CommandItem>
56
              <SmileIcon />
57
              <span>Search Emoji</span>
58
            </CommandItem>
59
            <CommandItem>
60
              <CalculatorIcon />
61
              <span>Calculator</span>
62
            </CommandItem>
63
          </CommandGroup>
64
          <CommandSeparator />
65
          <CommandGroup heading="Settings">
66
            <CommandItem>
67
              <UserIcon />
68
              <span>Profile</span>
69
              <CommandShortcut>⌘P</CommandShortcut>
70
            </CommandItem>
71
            <CommandItem>
72
              <CreditCardIcon />
73
              <span>Billing</span>
74
              <CommandShortcut>⌘B</CommandShortcut>
75
            </CommandItem>
76
            <CommandItem>
77
              <SettingsIcon />
78
              <span>Settings</span>
79
              <CommandShortcut>⌘S</CommandShortcut>
80
            </CommandItem>
81
          </CommandGroup>
82
        </CommandList>
83
      </CommandDialog>
84
    </>
85
  );
86
}