SIUX Studio + Tauri

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.js is the main editable page and pages/api/hello.js demonstrates API routes served at /api/hello during development.
• Tauri desktop integration — Run npm run tauri dev to open a native desktop window and npm run tauri build to 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 rustup before 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/api directory 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 at http://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.