A quickstart/example cloning repo for noobs

I do not have experience using Tailwind (always used just vanilla CSS) nor Typescript (also just vanilla JS) and just following the installation https://shadcn-solid.netlify.app/docs/installation after running `pnpm create solid@latest` o What type of project would you like to create? | SolidStart | o Use Typescript? | Yes | o Which template would you like to use? | with-tailwindcss did not work for me, there is no `lib` folder, nor `hooks` and I created but it still did not work, I copy-pasted the Button component at `components/ui` but I got a few different errors that took some back and forth with GPT to fix. # TLDR; * The installation page shows “Install dependencies” but doesn’t expose the actual command in the page text (Tailwind/Uno tabs don’t render a command in static view). [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) * Fresh SolidStart + Tailwind template doesn’t include `src/lib` or `src/hooks` but the guide requires files in those paths; users hit module-not-found unless they guess to create folders. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) * Component pages are currently broken: Button shows “Component button-demo not found in registry”, Dark Mode shows “Component mode-toggle not found in registry” so users can’t copy component code. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) * The docs should explicitly explain path aliases (SolidStart `~/` vs Vite `@/`), and include Vite alias + tsconfig paths for Vite setups; there’s already a maintainer note that this was missed. [GitHub](https://github.com/hngngn/shadcn-solid/discussions/55?utm_source=chatgpt.com) * The theming variables are documented, but the install steps don’t make it obvious you must import the CSS file so tokens like `bg-primary` work. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/theming) # HERE IS THE QUICKSTART GUIDE (TWEAKED BY CHATGPT) Below is a “from zero to Button renders correctly” setup that matches **SolidStart + Tailwind + TS** (what you created), and matches what the **Netlify docs are *trying* to do**: you **don’t install “shadcn-solid” as a component package** — you install a few deps, then **copy component files into your repo** (open-code approach). [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/introduction) --- ## Working step-by-step (SolidStart + Tailwind + TypeScript) ### 1) Create the project ```bash pnpm create solid@latest my-app # choose: # - SolidStart # - TypeScript: Yes # - template: with-tailwindcss cd my-app pnpm install ``` You should be able to run: ```bash pnpm dev ``` ### 2) Install the *base* dependencies shadcn-solid components expect The button component you pasted imports Kobalte primitives and uses a `cva` helper that merges Tailwind classes (via `tailwind-merge`). The Netlify installation page shows that helper file `src/lib/cva.ts` imports `cva` + `tailwind-merge`. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) Install these: ```bash pnpm add @kobalte/core cva tailwind-merge ``` (You already did this part; listing it here as the “official” step.) ### 3) Create the folders the docs assume exist SolidStart doesn’t generate these by default, but the Netlify install guide tells you to add files under them: `src/lib/*` and `src/hooks/*`. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) Create them: ```bash mkdir -p src/lib src/hooks src/components/ui src/styles ``` ### 4) Add the “glue” files the components import The Netlify install guide’s **“Add component”** section lists these files you must have in your project, because many UI components import them: [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) * `src/lib/cva.ts` (the `cva` helper wrapper) * `src/lib/call-handler.ts` * `src/lib/combine-style.ts` * `src/hooks/use-mobile.ts` **Important:** your Button currently imports: ```ts import { cva } from "~/registry/lib/cva" ``` …but the docs show the file path is **`src/lib/cva.ts`** (not `src/registry/lib/cva.ts`). [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) So either: * change the import in your Button to: ```ts import { cva } from "~/lib/cva" ``` **or** * create the extra folder `src/registry/lib/` and put the file there (works, but it’s not what the docs describe) The clean “doc-aligned” fix is: **use `~/lib/cva`**. ### 5) Add the theme CSS variables so Tailwind classes like `bg-primary` actually look right shadcn-solid’s theming is built around CSS variables like `--primary` and `--primary-foreground`, and then using Tailwind utilities like `bg-primary text-primary-foreground`. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/theming) The docs show the canonical variables live in **`src/styles/app.css`** (and a dark theme under `[data-kb-theme="dark"]`). [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/theming) Do this: 1. Create `src/styles/app.css` and paste the variables block from the theming page (the big `:root { ... }` + `[data-kb-theme="dark"] { ... }`). [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/theming) 2. Make sure it’s actually loaded. In SolidStart, simplest is importing it in `src/app.tsx`: ```ts import "~/styles/app.css" ``` (You can keep `import "./app.css"` too — just make sure the variables file is imported somewhere that runs.) ### 6) Add the Button component (copy-paste “open code”) Put it at: ``` src/components/ui/button.tsx ``` Make sure its imports point to paths that exist in *your* repo. For your specific Button, the minimum fixes were exactly what your errors told you: * missing `@kobalte/core` ⇒ install it ✅ * missing local `cva` helper path ⇒ point import to where you created it ✅ ### 7) Optional: Dark mode (only if you want it now) The docs’ Dark Mode page uses Kobalte’s `ColorModeProvider` + `ColorModeScript` and SSR cookie storage. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/dark-mode) If you follow that page, you also need the theme CSS variables (step 5), because dark mode swaps them via `[data-kb-theme="dark"]`. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/theming) --- ## What’s actually wrong / incomplete in the Netlify docs (good “issue fodder”) Here are concrete problems you can cite with receipts: 1. **“Install dependencies” doesn’t show the actual command** The Installation page says “Run the following command…” but the command itself doesn’t appear in the static page text (it’s behind the Tailwind/Uno tabs UI). [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) So people don’t see that they must install things like `@kobalte/core`, `cva`, `tailwind-merge` (and whatever else the intended command includes). 2. **The docs assume folders exist, but they don’t in a fresh SolidStart app** The Installation page tells you to add files under `src/lib/*` and `src/hooks/*`. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) A brand new SolidStart project won’t have those directories, so users hit “module not found” unless they guess to create them. 3. **Component pages are broken: “Component not found in registry”** The Button page shows `Component button-demo not found in registry.` [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/installation) Dark Mode page also shows `Component mode-toggle not found in registry.` [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/dark-mode) That’s catastrophic because the whole promise is copy/paste components. If the registry doesn’t resolve, the docs can’t deliver the code. 4. **Path alias guidance is missing / incomplete** A common failure mode is “cannot resolve @/…” or similar. The maintainer answered that you must configure `tsconfig.json` paths and Vite aliases for `@/*` in non-SolidStart setups, and someone explicitly said they missed the Vite config part because it wasn’t mentioned. [GitHub](https://github.com/hngngn/shadcn-solid/discussions/55?utm_source=chatgpt.com) Even if SolidStart uses `~/` by default, the docs should clearly say: * SolidStart: use `~/...` * Vite: configure alias (and show the exact snippets) 5. **Theming instructions are split, but the “wiring” step isn’t explicit** The Theming page shows the variables live in `src/styles/app.css`. [shadcn-solid.netlify.app](https://shadcn-solid.netlify.app/docs/theming) But the install flow doesn’t scream “you must import this CSS file into your app, otherwise all `bg-primary` etc will look wrong / be missing”.