Dash-Maxima Svelte Themes

Dash Maxima

A Premium Dashboard showcase using Svelte5 (kit-2), Shadcn-svelte & more... precise dynamic responsive UI + special "Perfect Theme"

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

Clone or download the repo, modify config files, add/remove extras, update missing parts... 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, yet the code shared here is for target user educational purpose, and might not include all updates for a working condition. Takes at least 100 stars for dedication and open contribution. Perhaps in future...

Latest 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, Linkedin or here as 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.

Top categories

Loading Svelte Themes