Solid UI Neobrutalism

Create New Vite App#

Start by creating a new Vite Solid.js app using create-vite. Select Solid.js template when prompted:

When creating the new vite app, make sure to choose the Solid option to automatically set up Solid.js project:

◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ● Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

Once you have created the app, navigate into the project and install the dependencies:

cd {project-name}

Add Tailwind CSS and Dependencies#

The current version of vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

1
{
2
  "files": [],
3
  "references": [
4
    {
5
      "path": "./tsconfig.app.json"
6
    },
7
    {
8
      "path": "./tsconfig.node.json"
9
    }
10
  ],
11
  "compilerOptions": {
12
    "baseUrl": ".",
13
    "paths": {
14
      "~/*": ["./src/*"]
15
    }
16
  }
17
}

Then edit tsconfig.app.json file to extend the base configuration:

1
{
2
  ...
3
  "compilerOptions": {
4
    ...
5
    "baseUrl": ".",
6
    "paths": {
7
      "~/*": ["./src/*"]
8
    }
9
  }
10
}

Edit `vite.config.ts` File#

Add the following code to the vite.config.ts so your app can resolve paths without error:

1
import path from "path";
2
import tailwindcss from "@tailwindcss/vite";
3
import { defineConfig } from "vite";
4
import solid from "vite-plugin-solid";
5

6
export default defineConfig({
7
  plugins: [solid(), tailwindcss()],
8
  resolve: {
9
    alias: {
10
      "~": path.resolve(__dirname, "./src"),
11
    },
12
  },
13
});

Configure Styles#

1
@import "tailwindcss";
2
@import "tw-animate-css";
3
@plugin "@kobalte/tailwindcss";
4

5
@custom-variant dark (&:is(.dark *));
6

7
:root {
8
  --background: oklch(0.93 0.03 256);
9
  --foreground: oklch(0.28 0.09 268);
10
  --primary: oklch(0.72 0.19 260);
11
  --primary-foreground: oklch(0.28 0.09 268);
12
  --secondary-background: oklch(100% 0 0);
13
  --border: oklch(0.28 0.09 268);
14
  --ring: oklch(0.28 0.09 268);
15
  --overlay: oklch(0.28 0.09 268 / 0.8);
16
  --shadow: 4px 4px 0px 0px var(--border);
17
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
18
  --chart-1: oklch(0.646 0.222 41.116);
19
  --chart-2: oklch(0.6 0.118 184.704);
20
  --chart-3: oklch(0.398 0.07 227.392);
21
  --chart-4: oklch(0.828 0.189 84.429);
22
  --chart-5: oklch(0.769 0.188 70.08);
23
  --chart-active-dot: oklch(0.28 0.09 268);
24

25
  --info: oklch(0.95 0.024 236.81);
26
  --info-foreground: oklch(0.68 0.148143 238.1044);
27
  --success: oklch(0.95 0.0506 162.83);
28
  --success-foreground: oklch(0.69 0.1481 162.37);
29
  --warning: oklch(0.96 0.0569 95.61);
30
  --warning-foreground: oklch(0.71 0.186 48.13);
31
  --error: oklch(0.93 0.0314 17.73);
32
  --error-foreground: oklch(0.64 0.2082 25.38);
33

34
  --muted: oklch(0.97 0 0);
35
  --muted-foreground: oklch(0.556 0 0);
36
}
37

38
.dark {
39
  --background: oklch(0.28 0.09 268);
40
  --foreground: oklch(0.97 0.01 255);
41
  --primary: oklch(0.62 0.19 260);
42
  --primary-foreground: oklch(0.28 0.09 268);
43
  --secondary-background: oklch(0.28 0.09 268);
44
  --border: oklch(0.97 0.01 255);
45
  --ring: oklch(0.97 0.01 255);
46
  --overlay: oklch(0.28 0.09 268 / 0.8);
47
  --shadow: 4px 4px 0px 0px var(--border);
48
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
49
  --chart-1: oklch(0.488 0.243 264.376);
50
  --chart-2: oklch(0.696 0.17 162.48);
51
  --chart-3: oklch(0.769 0.188 70.08);
52
  --chart-4: oklch(0.627 0.265 303.9);
53
  --chart-5: oklch(0.645 0.246 16.439);
54
  --chart-active-dot: oklch(100% 0 0);
55

56
  --info: oklch(0.28 0.0875 267.91);
57
  --info-foreground: oklch(0.68 0.148143 238.1044);
58
  --success: oklch(0.26 0.0487 172.54);
59
  --success-foreground: oklch(0.69 0.1481 162.37);
60
  --warning: oklch(0.29 0.0638 53.82);
61
  --warning-foreground: oklch(0.71 0.186 48.13);
62
  --error: oklch(0.26 0.0886 26.05);
63
  --error-foreground: oklch(0.64 0.2082 25.38);
64

65
  --muted: oklch(0.269 0 0);
66
  --muted-foreground: oklch(0.708 0 0);
67
}
68

69
@theme inline {
70
  --color-background: var(--background);
71
  --color-foreground: var(--foreground);
72
  --color-primary: var(--primary);
73
  --color-primary-foreground: var(--primary-foreground);
74
  --color-secondary-background: var(--secondary-background);
75
  --color-muted: var(--muted);
76
  --color-muted-foreground: var(--muted-foreground);
77
  --color-border: var(--border);
78
  --color-overlay: var(--overlay);
79
  --color-ring: var(--ring);
80
  --color-chart-1: var(--chart-1);
81
  --color-chart-2: var(--chart-2);
82
  --color-chart-3: var(--chart-3);
83
  --color-chart-4: var(--chart-4);
84
  --color-chart-5: var(--chart-5);
85

86
  --color-info: var(--info);
87
  --color-info-foreground: var(--info-foreground);
88
  --color-success: var(--success);
89
  --color-success-foreground: var(--success-foreground);
90
  --color-warning: var(--warning);
91
  --color-warning-foreground: var(--warning-foreground);
92
  --color-error: var(--error);
93
  --color-error-foreground: var(--error-foreground);
94

95
  --spacing-box-shadow-x: 4px;
96
  --spacing-box-shadow-y: 4px;
97
  --spacing-reverse-box-shadow-x: -4px;
98
  --spacing-reverse-box-shadow-y: -4px;
99
  --radius-base: 5px;
100
  --shadow-shadow: var(--shadow);
101
  --shadow-destructive: var(--shadow-destructive);
102

103
  --animate-caret-blink: caret-blink 1s infinite;
104

105
  @keyframes caret-blink {
106
    0%,
107
    70%,
108
    100% {
109
      opacity: 1;
110
    }
111

112
    20%,
113
    50% {
114
      opacity: 0;
115
    }
116
  }
117
}
118

119
@layer base {
120
  body {
121
    @apply bg-background text-foreground;
122
  }
123
}

Add `cn` Helper Function#

1
import type { ClassValue } from "clsx";
2

3
import { clsx } from "clsx";
4
import { twMerge } from "tailwind-merge";
5

6
// src/lib/utils.ts
7

8
export function cn(...inputs: ClassValue[]) {
9
  return twMerge(clsx(inputs));
10
}

Create A `components.json` File#

1
{
2
  "$schema": "https://ui.shadcn.com/schema.json",
3
  "tailwind": {
4
    "css": "src/index.css",
5
    "config": "",
6
    "baseColor": "slate",
7
    "cssVariables": true
8
  },
9
  "aliases": {
10
    "utils": "~/lib/utils",
11
    "components": "~/components"
12
  },
13
  "style": "default",
14
  "rsc": false,
15
  "tsx": true
16
}

Change the Tailwind CSS file path and aliases according to your project structure.

That’s it!#

Now you can start adding components to your app.