├── .gitignore ├── CHANGELOG.md ├── README.md ├── index.html ├── package.json ├── pnpm-lock.yaml ├── postcss.config.cjs ├── public ├── _redirects └── favicon.ico ├── src ├── App.vue ├── charts │ ├── BarChart01.vue │ ├── BarChart02.vue │ ├── BarChart03.vue │ ├── ChartjsConfig.js │ ├── DoughnutChart.vue │ ├── LineChart01.vue │ ├── LineChart02.vue │ └── RealtimeChart.vue ├── components │ ├── Datepicker.vue │ ├── DropdownEditMenu.vue │ ├── DropdownFilter.vue │ ├── DropdownHelp.vue │ ├── DropdownNotifications.vue │ ├── DropdownProfile.vue │ ├── ModalSearch.vue │ ├── ThemeToggle.vue │ └── Tooltip.vue ├── css │ ├── additional-styles │ │ ├── flatpickr.css │ │ └── utility-patterns.css │ └── style.css ├── images │ ├── icon-01.svg │ ├── icon-02.svg │ ├── icon-03.svg │ ├── user-36-05.jpg │ ├── user-36-06.jpg │ ├── user-36-07.jpg │ ├── user-36-08.jpg │ ├── user-36-09.jpg │ └── user-avatar-32.png ├── main.js ├── pages │ └── Dashboard.vue ├── partials │ ├── Banner.vue │ ├── Header.vue │ ├── Sidebar.vue │ ├── SidebarLinkGroup.vue │ └── dashboard │ │ ├── DashboardCard01.vue │ │ ├── DashboardCard02.vue │ │ ├── DashboardCard03.vue │ │ ├── DashboardCard04.vue │ │ ├── DashboardCard05.vue │ │ ├── DashboardCard06.vue │ │ ├── DashboardCard07.vue │ │ ├── DashboardCard08.vue │ │ ├── DashboardCard09.vue │ │ ├── DashboardCard10.vue │ │ ├── DashboardCard11.vue │ │ ├── DashboardCard12.vue │ │ └── DashboardCard13.vue ├── router.js └── utils │ └── Utils.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG.md 2 | 3 | ## [4.0.0] - 2025-02-04 4 | 5 | - Updgrade to Tailwind v4 6 | - Update dependencies 7 | 8 | ## [3.1.0] 2024-12-08 9 | 10 | - Upgrade to Vite 6 11 | 12 | ## [3.0.0] - 2024-07-05 13 | 14 | - Mosaic Redesign 15 | 16 | ## [2.1.0] - 2023-12-08 17 | 18 | - Update to Vite 5 19 | - Update dependencies 20 | 21 | ## [2.0.1] - 2023-10-04 22 | 23 | - Dependencies update 24 | 25 | ## [2.0.0] - 2023-06-01 26 | 27 | - Dark version added 28 | 29 | ## [1.4.3] - 2023-04-11 30 | 31 | - Update dependencies 32 | 33 | ## [1.4.2] - 2023-02-13 34 | 35 | - Update dependencies 36 | - Improve sidebar icons color logic 37 | 38 | ## [1.4.0] - 2022-08-30 39 | 40 | - Update sidebar 41 | 42 | ## [1.3.0] - 2022-07-15 43 | 44 | - Replace Sass with CSS files 45 | - Update dependencies 46 | 47 | ## [1.1.0] - 2021-12-13 48 | 49 | - Update Tailwind 3 50 | - Several improvements 51 | 52 | ## [1.0.3] - 2021-12-10 53 | 54 | - Alignment issue 55 | 56 | ## [1.0.2] - 2021-11-23 57 | 58 | - Alignment issue 59 | 60 | ## [1.0.1] - 2021-11-22 61 | 62 | Fix dashboard icon color 63 | 64 | ## [1.0.0] - 2021-11-22 65 | 66 | First release -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Free Tailwind & Vue.js admin dashboard template 2 | 3 |  4 | 5 | **Mosaic Lite Vue** is a responsive dashboard template built on top of TailwindCSS and fully coded in Vue.js. This template is a great starting point for anyone who wants to create a user interface for SaaS products, administrator dashboards, modern web apps, and more. 6 | 7 | **UPDATE 2025-02-04** Added Tailwind v4 support! 8 | 9 | Use it for whatever you want, and be sure to reach us out on [Twitter](https://twitter.com/Cruip_com) if you build anything cool/useful with it. 10 | 11 | [Also available in React](https://github.com/cruip/tailwind-dashboard-template) 12 | 13 | Created and maintained with ❤️ by [Cruip.com](https://cruip.com/). 14 | 15 | ## Live demo 16 | 17 | Check the live demo here 👉️ [https://mosaic-vue.cruip.com/](https://mosaic-vue.cruip.com/) 18 | 19 | ## Mosaic Pro 20 | 21 | [](https://cruip.com/mosaic/) 22 | 23 | ## Design files 24 | 25 | If you need the design files, you can download them from Figma's Community 👉 https://bit.ly/3sigqHe 26 | 27 | ## Table of contents 28 | 29 | * [Usage](#usage) 30 | * [Project setup](#project-setup) 31 | * [Compiles and hot-reloads for development](#compiles-and-hot-reloads-for-development) 32 | * [Compiles and minifies for production](#compiles-and-minifies-for-production) 33 | * [Customize configuration](#customize-configuration) 34 | * [Credits](#credits) 35 | * [Terms and License](#terms-and-license) 36 | * [About Us](#about-us) 37 | * [Stay in the loop](#stay-in-the-loop) 38 | 39 | ## Usage 40 | 41 | This project was built with [Vue 3](https://v3.vuejs.org/) and [Vite](https://vitejs.dev/). 42 | 43 | ### Project setup 44 | ``` 45 | pnpm install 46 | ``` 47 | 48 | #### Compiles and hot-reloads for development 49 | ``` 50 | pnpm run dev 51 | ``` 52 | 53 | #### Compiles and minifies for production 54 | ``` 55 | pnpm run build 56 | ``` 57 | 58 | #### Customize configuration 59 | See [Configuration Reference](https://vitejs.dev/guide/). 60 | 61 | ## Credits 62 | 63 | - [Nucleo](https://nucleoapp.com/) 64 | 65 | ## Terms and License 66 | 67 | - Released under the [GPL](https://www.gnu.org/licenses/gpl-3.0.html). 68 | - Copyright 2025 [Cruip](https://cruip.com/). 69 | - Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template. 70 | - Attribution is not required, although it is really appreciated. 71 | 72 | ## About Us 73 | 74 | We're an Italian developer/designer duo creating high-quality design/code resources for developers, makers, and startups. 75 | 76 | ## Stay in the loop 77 | 78 | If you would like to know when we release new resources, you can follow [@pacovitiello](https://x.com/pacovitiello) and [@DavidePacilio](https://x.com/DavidePacilio) on X, or you can subscribe to our [newsletter](https://cruip.com/newsletter/). 79 | 80 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |
15 | Source
16 | |
17 |
18 | Visitors
19 | |
20 |
21 | Revenues
22 | |
23 |
24 | Sales
25 | |
26 |
27 | Conversion
28 | |
29 |
---|---|---|---|---|
36 |
37 |
41 |
43 | Github.com
42 | |
44 |
45 | 2.4K
46 | |
47 |
48 | $3,877
49 | |
50 |
51 | 267
52 | |
53 |
54 | 4.7%
55 | |
56 |
60 |
61 |
65 |
67 | Facebook
66 | |
68 |
69 | 2.2K
70 | |
71 |
72 | $3,426
73 | |
74 |
75 | 249
76 | |
77 |
78 | 4.4%
79 | |
80 |
84 |
85 |
89 |
91 | Google (organic)
90 | |
92 |
93 | 2.0K
94 | |
95 |
96 | $2,444
97 | |
98 |
99 | 224
100 | |
101 |
102 | 4.2%
103 | |
104 |
108 |
109 |
113 |
115 | Vimeo.com
114 | |
116 |
117 | 1.9K
118 | |
119 |
120 | $2,236
121 | |
122 |
123 | 220
124 | |
125 |
126 | 4.2%
127 | |
128 |
132 |
133 |
137 |
139 | Indiehackers.com
138 | |
140 |
141 | 1.7K
142 | |
143 |
144 | $2,034
145 | |
146 |
147 | 204
148 | |
149 |
150 | 3.9%
151 | |
152 |
15 | Name
16 | |
17 |
18 | Email
19 | |
20 |
21 | Spent
22 | |
23 |
24 | Country
25 | |
26 |
---|---|---|---|
35 |
36 |
41 |
37 |
39 | {{customer.name}}
40 | |
42 |
43 | {{customer.email}}
44 | |
45 |
46 | {{customer.spent}}
47 | |
48 |
49 | {{customer.location}}
50 | |
51 |