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.