A new shadcn-svelte dashboard showcase

• Shadcn-svelte Dashboard samples on steroids, fully rewritten.
• One of the best starter templates which exist in this category
• My signature design pattern blend "Perfect Theme" used for best UX
• Customizable, dynamic responsive, interctive, resusable components
• Improved styles: UI, grid layout, D/L themes, dynamic sizing
• Production ready and interactive, design is feature complete
• Customize for your use-case, integrate your web page & business data
• Or request my services to provide a custom solution, build + integrate desired interactions, functions and dash panels for your use-case, business...

.

Features

• Coolest Libs out there working together on svelte 5, easier setup
• Added: multiple useful new components & object orinted App structure
• Added: Svelte 5 Runes + Svelte-kit (routes + website structure)
• Reuse/Customize: add new content as child(+pages) & data as props
• Replaced lucid-svelte icons with unplugin-icons, now is possible to use icons set as plugins, and any individual icons from different sets combined as you wish.

.

Perfect Theme ^{____________ ( my signature design pattern :)}

• Semi-minimal design theme blend (D/L +shad +neomorphism +synthwave)
• Shadcn-svelte - BitsUI - Unplugin-icons - tailwind CSS - CSS
• Arbitrary CSS values used in places which Tailwind-[fails/lack-precision]...

.
.

Project Setup

Download the repo, modify config files, add/remove extras if needed... then:

pnpm install
pnpm run dev

For more details and customization check specific library docs(Shadcn-svelte, vite, svelte...)
.
.

Credits

Dash-Maxima: v.0.2.0 by Peyman Borhani (Systemic Labs)

Open and free to use, but for commercial usage is better to order or license, get it better & more secure, +support a hard working dev...

If it was useful, please do support, credit/knowledgement, contribute, or at least follow/engage on X or Linkedin incentive for further open source development.

That's it, the rest is Svelte.dev's starter guide...

---

.
.
.

Create a new svelte project

# create a new project in the current directory
pnpm create svelte@latest

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

pnpm run dev

Building

To create a production version of your app:

pnpm run build

You can preview the production build with pnpm run preview.

To deploy your app, you may need to install an adapter for your target environment.