SolidStart Base

Base project for a SolidStart application with Bun, tRPC, ArkType, and ParkUI.

Features

• Framework: SolidStart - The meta-framework for SolidJS.
• Styling: Panda CSS - Type-safe, zero-runtime CSS-in-JS.
• UI Components: Park UI - Components library based on Ark UI and Panda CSS.
• Validation: ArkType - The finest validator for TypeScript.
• API: tRPC - Type-safe APIs.
• Runtime/Bundler: Powered by Vinxi and Bun.

Getting Started

Prerequisites

• Bun

Installation

1. Clone the repository:

   git clone https://codeberg.org/wave/solidstart-base.git
   cd solidstart-base

2. Install dependencies:

   bun i

   Note: This will also trigger panda codegen to generate the styled system. If the first installation returns errors like 'process cannot access the file because it is being used' then execute bun i a second time (this usually happens on Windows).

Development

To start the development server:

bun dev

Open http://localhost:3000 with your browser to see the result.

Build & Production

To build the application for production:

bun build

To start the production server:

bun start

Project Structure

├── src/
│   ├── components/   # UI components and ParkUI primitives
│   ├── lib/          # Utilities (API clients, etc.)
│   ├── routes/       # File-based routing (SolidStart)
│   ├── server/       # Server-side logic & API handlers
│   ├── theme/        # Panda CSS theme configuration (colors, tokens, recipes)
│   ├── app.tsx       # Root application component
│   └── entry-*.tsx   # Client and Server entry points
├── styled-system/    # Generated Panda CSS system (do not edit manually)
├── app.config.ts     # SolidStart configuration
├── panda.config.ts   # Panda CSS configuration
└── tsconfig.json     # TypeScript configuration

Styling

This project uses Panda CSS. You can find the theme configuration in src/theme/. The design system tokens, recipes, and global styles are defined there.

Reference: https://park-ui.com/docs/theming

To regenerate the styled-system after changing panda.config.ts or theme files:

bun run prepare

Conventions

Commit Messages

This project encourages the use of Conventional Commits. A preset configuration for the VS Code Conventional Commits extension is included to help you format your commit messages.