DEV Community

Cover image for Windster - Tailwind CSS admin dashboard interface [MIT License]
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at github.com

Windster - Tailwind CSS admin dashboard interface [MIT License]

Windster - Tailwind CSS Dashboard

Windster Tailwind CSS Dashboard

Windster is a free and open source Tailwind CSS admin dashboard layout featuring responsive sidebar layouts, authentication pages, charts, users, products pages and hundreds of Tailwind CSS components based on the Flowbite library such as buttons, dropdowns, navbars, datepickers, and more.

Build with Tailwind CSS

The pages of this project have been built using only the utility classes from Tailwind CSS and you can continue working with Windster as with any other Tailwind CSS project as it uses the standard Post CSS configuration method together with purging classes as it is recommended.

Components from Flowbite

Windster also uses the open source Tailwind CSS components from Flowbite including buttons, alerts, typography, dropdowns, navbars, and many more. These components also exclusively use the Tailwind CSS utility classes so there is no need to include any extra CSS into your project.

Example pages

The open source version of Windster includes 5 application UI example pages including a main dashboard layout, a login page, a register page, a users page and a products page where there are also modals included for the CRUD actions.

HUGO static site generator

We decided to use the HUGO static site generator system to build the HTML templates and also use JSON files as a source of data for some of the pages such as the products or users page. Of course you can adapt these templates to your own tech stack by extracting the HTML templates and the Webpack/POST CSS configuration files.

Webpack module bundler

Windster uses Webpack to bundle assets and to watch for changes and tie together the compilation actions from HUGO and Post CSS. Feel free to customize the Webpack configuration file based on your needs. We also included a CSS minification feature when building for production.

Workflow

This project uses the following tech stack:

Table of Contents

Demo

Dashboard Users
Dashboard Users
Products Login
Products Login
Register Components
Register Components

Quick start

  1. Download from Themesberg or clone this repository
  2. Download the project's zip
  3. Make sure you have Node.js and HUGO installed.
  4. Run the following command to install the project dependencies:
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run the development server:
npm run start
Enter fullscreen mode Exit fullscreen mode

Building the project

To build the final project files run the following command:

npm run build
Enter fullscreen mode Exit fullscreen mode

The file will be available in the .build/ folder.

Documentation

Windster is first of all a project based on Tailwind CSS but it also uses Flowbite to enable more components, HUGO to generate static HTML files and Webpack for assets bundling.

Folder Structure

Within the download you'll find the following directories and files:

Windster Tailwind CSS Dashboard
.
├── LICENSE.md
├── README.md
├── _gh_pages
├── config.yml
├── content
├── data
├── layouts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── resources
├── src
├── static
├── syntax.css
├── tailwind.config.js
├── temp
└── webpack.config.js
Enter fullscreen mode Exit fullscreen mode

Resources

Upgrade to Pro

If you like working with Windster and you would like to expand the number of pages and get access to a more advanced layout, kanban page, mailing application and 4 times more pages then check out Windster Pro and check out the differences between the two versions.

Reporting Issues

We use GitHub Issues as the official bug tracker for Windster. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of Windster.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Discussion (2)

Collapse
crearesite profile image
WebsiteMarket

blazing fast

Collapse
uithemes profile image
ui-themes

really nice work. ty!