SIUX Studio + Tauri is a boilerplate that couples the Next.js React framework with the Tauri desktop runtime, giving developers a pre-configured starting point for cross-platform desktop apps backed by Rust and styled with SIUX Studio's CSS design system.
What is SIUX Studio + Tauri?
This is a starter integration of SIUX Studio and Tauri, structured as a Next.js application with a Tauri shell. Its core function is to give you a working project where the Next.js frontend runs inside a Tauri desktop window, with brand styles injected via SIUX Studio CDN links. It outputs a desktop binary when built, while the same Next.js code can also be deployed to the web. The repository description states "SIUX Studio + Tauri integration." and it is tagged with topics covering css-library, design-system, nextjs, rust, siux-studio, tauri, and ui-library.
Key Features
- Next.js framework — Uses the classic pages router;
pages/index.jsis the main editable page andpages/api/hello.jsdemonstrates API routes served at/api/helloduring development. - Tauri desktop integration — Run
npm run tauri devto open a native desktop window andnpm run tauri buildto produce installable binaries, with a Rust backend. - SIUX Studio CSS integration — Two stylesheet links (base and responsive) are placed in
pages/_app.js; replace them with your own SIUX Studio brand URLs to restyle the entire app. - Rust requirement — Tauri's backend runs on Rust; installation is done via
rustupbefore starting development. - Vercel-ready frontend — The Next.js app is set up to deploy to the Vercel platform separately from the desktop build.
- API routes included — The
pages/apidirectory is mapped to/api/*, so serverless functions are available without extra configuration.
Who is it for?
- Next.js developers who want to wrap an existing web application in a Tauri desktop shell without changing the frontend framework.
- Teams already using SIUX Studio who need a reference project that loads their brand CSS into a desktop context with responsive support.
- Prototypers who want a fast loop: edit
pages/index.js, see changes instantly in the browser athttp://localhost:3000, then compile a native binary when ready.
What can you do with it?
- Desktop app development: Use the boilerplate to turn a Next.js web app into a lightweight desktop application for Windows, macOS, and Linux via Tauri's small-footprint runtime.
- Design-system evaluation: Load a SIUX Studio brand stylesheet into the boilerplate to preview how the design system behaves in a real desktop app layout.
- Full-stack prototypes: Combine the API routes (
pages/api) with the desktop UI to prototype an app that talks to serverless functions before any backend rewrite.
How does it work?
Install Rust using the rustup installer, then run npm i && npm run tauri dev. The development server starts on http://localhost:3000 and a Tauri window opens showing the Next.js page. After editing, npm run tauri build compiles the app into a binary; the web version can be deployed to Vercel independently. The README also documents a browser preview at the same localhost address.
Installation details
The only manual configuration shown in the README is swapping the SIUX Studio CDN links in pages/_app.js with your own brand stylesheet URLs. All other setup is handled by npm scripts and the Tauri CLI wrapped by the project.
FAQ
Is there a demo I can see?
The repository does not include a live demo link; the two images in the README show the SIUX Studio logo and a screenshot of the boilerplate interface.
Does this use Electron?
No, it uses Tauri, which relies on the system WebView and Rust for a smaller binary footprint than Electron.
What is SIUX Studio?
SIUX Studio is a UI and CSS design system that provides CDN-hosted brand stylesheets; this boilerplate loads its styles from cdn.siux.studio.
