Spruce CSS Root Admin Template

Spruce CSS Root Admin Template is a free, MIT-licensed static admin dashboard template built on Spruce CSS, Eleventy, and Alpine.js that provides ready-made HTML/SCSS views for a Laravel admin named Root.

What is Spruce CSS Root Admin Template?

The template is a static HTML/CSS/JS starter kit for building an administration panel. It ships with eleven ready-to-use views — Dashboard, Product List, Order List, Customer List, Category List, Item Edit, Item View, Settings, Sign In, Sign Up, and Password Reset — as well as a collection of admin-specific UI components. The source is written as Nunjucks templates compiled by Eleventy, and the styles are authored in SCSS using Spruce CSS and Spruce UI, so you get a buildable static site plus a compiled dist folder.

It is maintained by Cone Design, the same team behind the Laravel admin package Root, and is intended to be the front-end template for that package. Because it is static, you must wire up the interactive behaviors yourself — Alpine.js is included for that purpose.

Key Features

• Eleventy-based static generation — The template uses Eleventy with Nunjucks template files, so you can generate the final HTML into a dist folder for direct deployment.
• SCSS pipeline with Spruce CSS — Styles are compiled from ./src/scss into ./src/css using sass-cli npm scripts, with Spruce CSS and Spruce UI providing the design system.
• Alpine.js for interactions — Alpine.js handles the JavaScript behaviors in the template, with some complete JS behaviors for dropdowns, modals, and comboboxes.
• Admin-specific components — Includes a customizable modal window, data table block with search and filter support, simple search, drop-down menus, widget cards, a media handler modal, and a combobox.
• Eleven ready-made views — Covers dashboard, product list, order list, customer list, category list, item edit, item view, settings, sign in, sign up, and password reset pages.
• Linting scripts — Sass files can be linted with Stylelint via npm run sass:lint, and JavaScript with Airbnb ESLint preset via npm run js:lint; both have fix options.
• MIT licensed — The code is free to use, modify, and distribute under the MIT license.

Who is it for?

• Laravel developers building a custom admin panel based on the Root package can use this template as a starting point for the front-end views.
• Front-end developers who need a static, dependency-light HTML/SCSS admin dashboard can copy views from the Nunjucks files or the compiled dist folder.
• Designers working on admin UI concepts can use the components and layouts as a visual reference or wireframe.
• Developers who prefer Eleventy can use this template as a reference for building static sites with Nunjucks and SCSS.

What can you do with it?

• Build a custom admin panel: Use the supplied views and components to assemble a dashboard for managing products, orders, customers, categories, and settings.
• Rapid prototype admin screens: The static views are interactive enough (thanks to Alpine.js) to demonstrate UI flows like sign-in, sign-up, password reset, and item editing.
• Learn Spruce CSS/SCSS: The project demonstrates a complete SCSS structure and the Spruce CSS design system, including Spruce UI components, so you can study how to style a dashboard.
• Kickstart a Laravel admin front end: Since this is the official template for the Root Laravel admin, you can use it to preview and style the exact screens that Root will render.

How does it work?

Clone the repository, run npm install to install dependencies, then use npm start to run the Eleventy dev server with live-reload and a Sass watcher. For production, run npm run prod to compile and compress the SCSS files. Additional npm scripts handle Sass and JavaScript linting.

FAQ

Is Spruce CSS Root Admin Template free?

Yes. The template is open source and licensed under the MIT license, so you can freely use, modify, and distribute it, including in commercial projects.

What static site generator does it use?

The template is built with Eleventy (11ty). The page content is authored in Nunjucks templates, and Eleventy compiles them into the static HTML output in the dist folder.

What CSS framework is used?

The styling is based on Spruce CSS, a CSS framework from the same team, along with Spruce UI components. The source files are written in SCSS and compiled with sass-cli.

Can I use this with the Laravel Root admin package?

Yes, this repository is the static template for the Laravel admin named Root. You can use the HTML/CSS views as the basis for the Blade templates or as a style reference when integrating with Root.

Do I need to write JavaScript for interactivity?

Yes. Although Alpine.js is included and some behaviors are pre-built (like dropdowns and modals), the template is still static HTML/CSS. You must add your own JavaScript to connect the views to a real backend or to implement full interactivity.