Solid UI Neobrutalism

Create New TanStack Router App#

Start by creating a new TanStack Router app using create-tsrouter-app. Use --interactive and --framework Solid parameters to create a new Solid.js project. Select Solid-UI and Start template when prompted:

◆  What add-ons would you like for your project?
│  ◻ Form
│  ◻ Sentry
│  ◼ Solid-UI (Add Solid-UI to your application.)
│  ◼ Start (Add TanStack Start for SSR, API endpoints, and more.)
│  ◻ Store
│  ◻ T3Env
│  ◻ TanStack Query
└

Update dependencies#

Edit 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
}

Create A `components.json` File#

1
{
2
  "$schema": "https://ui.shadcn.com/schema.json",
3
  "tailwind": {
4
    "css": "src/styles.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.

TanStack Start

Create New TanStack Router App#

Update dependencies#

Edit Styles#

Create A components.json File#

That’s it!#

Create A `components.json` File#