├── .gitignore ├── .vscode └── launch.json ├── LICENSE ├── README.md ├── build.js ├── package-lock.json ├── package.json └── snippets ├── accordion.json ├── alerts.json ├── avatars.json ├── badges.json ├── breadcrumbs.json ├── buttongroups.json ├── buttons.json ├── indicators.json ├── kbd.json ├── popover.json ├── progress.json └── toast.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.vsix -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.1", 3 | "configurations": [ 4 | { 5 | "name": "Run Extension", 6 | "type": "extensionHost", 7 | "request": "launch", 8 | "runtimeExecutable": "${execPath}", 9 | "args": [ 10 | "--extensionDevelopmentPath=${workspaceFolder}" 11 | ] 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Themesberg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flowbite Snippets for VSCode 2 | This extension provides a set of snippets for [Flowbite](https://flowbite.com) users. 3 | 4 | ## Usage 5 | Type part of a snippet, press enter, and the snippet unfolds. 6 | 7 | ## All snippets are prefixed with flowbite- 8 | 9 | Example: flowbite-alert for the alert snippet. 10 | 11 | All snippets are viewable in the [snippets](https://github.com/themesberg/flowbite-snippets/tree/master/snippets) folder. 12 | -------------------------------------------------------------------------------- /build.js: -------------------------------------------------------------------------------- 1 | const buttonOptionsColors = [ 2 | // Normal Buttons https://flowbite.com/docs/components/buttons 3 | { 4 | label: 'green', 5 | color: 'text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800', 6 | }, 7 | { 8 | label: 'red', 9 | color: 'text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800', 10 | }, 11 | { 12 | label: 'yellow', 13 | color: 'text-white bg-yellow-700 hover:bg-yellow-800 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800', 14 | }, 15 | { 16 | label: 'purple', 17 | color: 'text-white bg-purple-700 hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800', 18 | }, 19 | // Gradian Monochrome Buttons https://flowbite.com/docs/components/buttons/#gradient-monochrome 20 | { 21 | label: 'blue-monogrome', 22 | color: 'text-white bg-gradient-to-r from-blue-400 via-blue-500 to-blue-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800', 23 | }, 24 | { 25 | label: 'green-monogrome', 26 | color: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800', 27 | }, 28 | { 29 | label: 'cyan-monogrome', 30 | color: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800', 31 | }, 32 | { 33 | label: 'teal-monogrome', 34 | color: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800', 35 | }, 36 | { 37 | label: 'lime-monogrome', 38 | color: 'text-black bg-gradient-to-r from-lime-400 via-lime-500 to-lime-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800', 39 | }, 40 | { 41 | label: 'red-monogrome', 42 | color: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800', 43 | }, 44 | { 45 | label: 'pink-monogrome', 46 | color: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800', 47 | }, 48 | { 49 | label: 'purple-monogrome', 50 | color: 'text-white bg-gradient-to-r from-purple-400 via-purple-500 to-purple-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800', 51 | }, 52 | // Gradient duotone Buttons https://flowbite.com/docs/components/buttons/#gradient-outline 53 | { 54 | label: 'purple-to-blue', 55 | color: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800', 56 | }, 57 | { 58 | label: 'cyan-to-blue', 59 | color: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800', 60 | }, 61 | { 62 | label: 'green-to-blue', 63 | color: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800', 64 | }, 65 | { 66 | label: 'purple-to-pink', 67 | color: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800', 68 | }, 69 | { 70 | label: 'pink-to-orange', 71 | color: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800' 72 | }, 73 | { 74 | label: 'teal-to-lime', 75 | color: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700' 76 | }, 77 | { 78 | label: 'red-to-yellow', 79 | color: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400' 80 | }, 81 | // Shadow buttons https://flowbite.com/docs/components/buttons/#colored-shadows 82 | { 83 | label: 'shadow-blue', 84 | color: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80' 85 | }, 86 | { 87 | label: 'shadow-green', 88 | color: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80' 89 | }, 90 | { 91 | label: 'shadow-cyan', 92 | color: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80' 93 | }, 94 | { 95 | label: 'shadow-teal', 96 | color: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80' 97 | }, 98 | { 99 | label: 'shadow-lime', 100 | color: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80' 101 | }, 102 | { 103 | label: 'shadow-red', 104 | color: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80' 105 | }, 106 | { 107 | label: 'shadow-pink', 108 | color: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80' 109 | }, 110 | { 111 | label: 'shadow-purple', 112 | color: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80' 113 | }, 114 | // Normal Outlined buttons https://flowbite.com/docs/components/buttons/#outline-buttons 115 | { 116 | label: 'outline-blue', 117 | color: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300' 118 | }, 119 | { 120 | label: 'outline-dark', 121 | color: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300' 122 | }, 123 | { 124 | label: 'outline-green', 125 | color: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300' 126 | }, 127 | { 128 | label: 'outline-red', 129 | color: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300' 130 | }, 131 | { 132 | label: 'outline-yellow', 133 | color: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300' 134 | }, 135 | { 136 | label: 'outline-purple', 137 | color: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300' 138 | } 139 | ]; 140 | 141 | const buttonOptionsSizes = [ 142 | { 143 | label: 'extra-small', 144 | size: 'px-3 py-2 text-xs', 145 | }, 146 | { 147 | label: 'small', 148 | size: 'px-3 py-2 text-sm', 149 | }, 150 | { 151 | label: false, 152 | size: '', 153 | }, 154 | { 155 | label: 'large', 156 | size: 'px-5 py-3 text-base', 157 | }, 158 | { 159 | label: 'extra-large', 160 | size: 'px-6 py-3.5 text-base', 161 | } 162 | ]; 163 | 164 | const buttonDefault = { 165 | label: 'default', 166 | color: 'text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800', 167 | }; 168 | var items = {}; 169 | 170 | const alwaysClass = 'font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2' 171 | 172 | buttonOptionsColors.forEach((buttonOption, index) => { 173 | buttonOptionsSizes.forEach((buttonOptionSize) => { 174 | if(!buttonOptionSize.label){ 175 | buttonOptionSize.label = "default"; 176 | } 177 | items[buttonOption.label + "-" + buttonOptionSize.label + "-with-pill"] = { 178 | scope: "html", 179 | prefix: "flowbite-button-" + buttonOption.label + "-" + buttonOptionSize.label + "-with-pill", 180 | body: ``, 181 | description: "Flowbite button " + buttonOption.label + " " + buttonOptionSize.label + " with pill" 182 | }; 183 | 184 | items[buttonOption.label + "-" + buttonOptionSize.label] = { 185 | scope: "html", 186 | prefix: "flowbite-button-" + buttonOption.label + "-" + buttonOptionSize.label, 187 | body: ``, 188 | description: "Flowbite button " + buttonOption.label + " " + buttonOptionSize.label 189 | }; 190 | 191 | if (index === 0) { 192 | // Default button 193 | items[buttonOptionSize.label + "-with-pill"] = { 194 | scope: "html", 195 | prefix: "flowbite-button-" + buttonOptionSize.label + "-with-pill", 196 | body: ``, 197 | description: "Flowbite button " + buttonOptionSize.label + " with pill" 198 | }; 199 | 200 | items[buttonOptionSize.label] = { 201 | scope: "html", 202 | prefix: "flowbite-button-" + buttonOptionSize.label, 203 | body: ``, 204 | description: "Flowbite button " + buttonOptionSize.label 205 | }; 206 | } 207 | }); 208 | }); 209 | 210 | const fs = require('fs'); 211 | // Write the file 212 | fs.writeFile('snippets/buttons.json', JSON.stringify(items, null, 2), function (err) { 213 | if (err) return console.log(err); 214 | console.log('Created ' + Object.keys(items).length + ' snippets for buttons'); 215 | }); 216 | 217 | var indicators = { 218 | "indicator-count": { 219 | "scope": "html", 220 | "prefix": "flowbite-indicator-count", 221 | "body": "1", 222 | "description": "Flowbite indicator count" 223 | }, 224 | "indicator-loader": { 225 | "scope": "html", 226 | "prefix": "flowbite-indicator-loader", 227 | "body": `
loading...
`, 228 | "description": "Flowbite indicator loader" 229 | }, 230 | 231 | "indicator-loader-spinner": { 232 | "scope": "html", 233 | "prefix": "flowbite-indicator-spinner", 234 | "body": `
Loading...
`, 235 | "description": "Flowbite indicator spinner" 236 | }, 237 | "indicator-stepper":{ 238 | "scope": "html", 239 | "prefix": "flowbite-indicator-stepper", 240 | "body": `

  1. Step 1

  2. Step 2

  3. Step 2

  4. Step 3

`, 241 | "description": "Flowbite indicator stepper" 242 | }, 243 | "indicator-status":{ 244 | "scope": "html", 245 | "prefix": "flowbite-indicator-status", 246 | "body":`
profile image
`, 247 | "description": "Flowbite indicator status" 248 | } 249 | }; 250 | 251 | // Indicators 252 | const indicatorOptionsColors = [ 253 | { 254 | label: 'white', 255 | color: 'bg-gray-200' 256 | }, 257 | { 258 | label: 'gray', 259 | color: 'bg-gray-900 dark:bg-gray-700' 260 | }, 261 | { 262 | label: 'blue', 263 | color: 'bg-blue-600' 264 | }, 265 | { 266 | label: 'green', 267 | color: 'bg-green-500' 268 | }, 269 | { 270 | label: 'red', 271 | color: 'bg-red-500' 272 | }, 273 | { 274 | label: 'purple', 275 | color: 'bg-purple-500' 276 | }, 277 | { 278 | label: 'indigo', 279 | color: 'bg-indigo-500' 280 | }, 281 | { 282 | label: 'yellow', 283 | color: 'bg-yellow-300' 284 | }, 285 | { 286 | label: 'teal', 287 | color: 'bg-teal-500' 288 | } 289 | ]; 290 | 291 | indicatorOptionsColors.forEach((indicatorOption) => { 292 | indicators[indicatorOption.label] = { 293 | scope: "html", 294 | prefix: "flowbite-indicator-" + indicatorOption.label, 295 | body: ``, 296 | description: "Flowbite indicator " + indicatorOption.label 297 | }; 298 | 299 | indicators[indicatorOption.label + "-with-legend"] = { 300 | scope: "html", 301 | prefix: "flowbite-indicator-" + indicatorOption.label + "-with-legend", 302 | body: `Legend`, 303 | description: "Flowbite indicator " + indicatorOption.label + " with legend" 304 | }; 305 | }) 306 | 307 | indicators['indicator-count'] = { 308 | scope: "html", 309 | prefix: "flowbite-indicator-count", 310 | body: ``, 311 | description: "Flowbite indicator count" 312 | } 313 | 314 | fs.writeFile('snippets/indicators.json', JSON.stringify(indicators, null, 2), function (err) { 315 | if (err) return console.log(err); 316 | console.log('Created ' + Object.keys(indicators).length + ' snippets for indicators'); 317 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flowbite-snippets", 3 | "displayName": "Flowbite Snippets", 4 | "description": "Flowbite Snippets", 5 | "version": "0.0.1", 6 | "publisher": "flowbite", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/themesberg/flowbite-snippets" 10 | }, 11 | "scripts": { 12 | "build": "node build.js", 13 | "publish": "vsce publish" 14 | }, 15 | "license": "MIT", 16 | "engines": { 17 | "vscode": "^1.28.0" 18 | }, 19 | "categories": [ 20 | "Snippets" 21 | ], 22 | "contributes": { 23 | "snippets": [ 24 | { 25 | "language": "html", 26 | "path": "./snippets/alerts.json" 27 | }, 28 | { 29 | "language": "html", 30 | "path": "./snippets/accordion.json" 31 | }, 32 | { 33 | "language": "html", 34 | "path": "./snippets/alerts.json" 35 | }, 36 | { 37 | "language": "html", 38 | "path": "./snippets/badges.json" 39 | }, 40 | { 41 | "language": "html", 42 | "path": "./snippets/breadcrumbs.json" 43 | }, 44 | { 45 | "language": "html", 46 | "path": "./snippets/buttons.json" 47 | }, 48 | { 49 | "language": "html", 50 | "path": "./snippets/buttongroups.json" 51 | }, 52 | 53 | { 54 | "language": "html", 55 | "path": "./snippets/progress.json" 56 | } 57 | ] 58 | }, 59 | "sponsor": { 60 | "url": "https://github.com/sponsors/CorwinDev" 61 | } 62 | } -------------------------------------------------------------------------------- /snippets/accordion.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-accordion": { 3 | "scope": "html", 4 | "prefix": "flowbite-accordion", 5 | "body": [ 6 | "
", 7 | "\t

", 8 | "\t\t", 13 | "\t

", 14 | "\t
", 15 | "\t\t
", 16 | "\t\t\t

Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

", 17 | "\t\t\t

Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.

", 18 | "\t\t
", 19 | "\t
", 20 | "\t

", 21 | "\t\t", 26 | "\t

", 27 | "\t
", 28 | "\t\t
", 29 | "\t\t\t

Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.

", 30 | "\t\t\t

Check out the Figma design system based on the utility classes from Tailwind CSS and components from Flowbite.

", 31 | "\t\t
", 32 | "\t
", 33 | "\t

", 34 | "\t\t", 39 | "\t

", 40 | "\t
", 41 | "\t\t
", 42 | "\t\t\t

The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI", 43 | "\t\t\t\toffers sections of pages.

", 44 | "\t\t\t

However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.

", 45 | "\t\t\t

Learn more about these technologies:

", 46 | "\t\t\t", 50 | "\t\t
", 51 | "\t
", 52 | "
" 53 | ], 54 | "description": "Flowbite Accordion Element" 55 | }, 56 | "flowbite-accordion-flush": { 57 | "scope": "html", 58 | "prefix": "flowbite-accordion-flush", 59 | "body": [ 60 | "
", 61 | "\t

", 62 | "\t\t", 66 | "\t

", 67 | "\t
", 68 | "\t\t
", 69 | "\t\t\t

Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

", 70 | "\t\t\t

Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.

", 71 | "\t\t
", 72 | "\t
", 73 | "\t

", 74 | "\t\t", 78 | "\t

", 79 | "\t
", 80 | "\t\t
", 81 | "\t\t\t

Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.

", 82 | "\t\t\t

Check out the Figma design system based on the utility classes from Tailwind CSS and components from Flowbite.

", 83 | "\t\t
", 84 | "\t
", 85 | "\t

", 86 | "\t\t", 90 | "\t

", 91 | "\t
", 92 | "\t\t
", 93 | "\t\t\t

The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI", 94 | "\t\t\t\toffers sections of pages.

", 95 | "\t\t\t

However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.

", 96 | "\t\t\t

Learn more about these technologies:

", 97 | "\t\t\t", 101 | "\t\t
", 102 | "\t
", 103 | "
" 104 | ], 105 | "description": "Flowbite Flush accordion (removes background and border from the accordion)" 106 | } 107 | } -------------------------------------------------------------------------------- /snippets/alerts.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-alert": { 3 | "prefix": "flowbite-alert", 4 | "body": [ 5 | "
", 6 | "\tInfo alert! Change a few things up and try submitting again.", 7 | "
" 8 | ], 9 | "description": "Flowbite Info Alert", 10 | "scope": "html" 11 | }, 12 | "flowbite-alert-success": { 13 | "prefix": "flowbite-alert-success", 14 | "body": [ 15 | "
", 16 | "\tSuccess alert! Change a few things up and try submitting again.", 17 | "
" 18 | ], 19 | "description": "Flowbite Success Alert", 20 | "scope": "html" 21 | }, 22 | "flowbite-alert-warning": { 23 | "prefix": "flowbite-alert-warning", 24 | "body": [ 25 | "
", 26 | "\tWarning alert! Change a few things up and try submitting again.", 27 | "
" 28 | ], 29 | "description": "Flowbite Warning Alert", 30 | "scope": "html" 31 | }, 32 | "flowbite-alert-danger": { 33 | "prefix": "flowbite-alert-danger", 34 | "body": [ 35 | "
", 36 | "\tDanger alert! Change a few things up and try submitting again.", 37 | "
" 38 | ], 39 | "description": "Flowbite Danger Alert", 40 | "scope": "html" 41 | } 42 | } -------------------------------------------------------------------------------- /snippets/avatars.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-avatar": { 3 | "scope": "html", 4 | "prefix": "flowbite-avatar-default", 5 | "body": [ 6 | "\"Default" 7 | ], 8 | "description": "Flowbite Default Avatar" 9 | }, 10 | "flowbite-avatar-rounded": { 11 | "scope": "html", 12 | "prefix": "flowbite-avatar-rounded", 13 | "body": [ 14 | "\"Rounded" 15 | ], 16 | "description": "Flowbite Rounded Avatar" 17 | }, 18 | "flowbite-avatar-bordered": { 19 | "scope": "html", 20 | "prefix": "flowbite-avatar-bordered", 21 | "body": [ 22 | "\"Bordered" 23 | ], 24 | "description": "Flowbite Bordered Avatar" 25 | }, 26 | "flowbite-avatar-placeholder": { 27 | "scope": "html", 28 | "prefix": "flowbite-avatar-placeholder", 29 | "body": [ 30 | "
", 31 | "\t", 32 | "
" 33 | ], 34 | "description": "Flowbite Placeholder Avatar" 35 | }, 36 | "flowbite-avatar-placeholder-initials": { 37 | "scope": "html", 38 | "prefix": "flowbite-avatar-placeholder-initials", 39 | "body": [ 40 | "
", 41 | "\tJL", 42 | "
" 43 | ], 44 | "description": "Flowbite Placeholder Avatar with Initials" 45 | }, 46 | "flowbite-avatar-tooltip": { 47 | "scope": "html", 48 | "prefix": "flowbite-avatar-tooltip", 49 | "body": [ 50 | "
", 51 | "\t
", 52 | "\t\tJese Leos", 53 | "\t\t
", 54 | "\t
", 55 | "\t\"Medium", 56 | "
" 57 | ] 58 | }, 59 | "flowbite-avatar-dot": { 60 | "scope": "html", 61 | "prefix": "flowbite-avatar-dot", 62 | "body": [ 63 | "
", 64 | "\t\"\"", 65 | "\t", 66 | "
" 67 | ], 68 | "description": "Flowbite Avatar with Dot (status)" 69 | }, 70 | "flowbite-avatar-stacked": { 71 | "scope": "html", 72 | "prefix": "flowbite-avatar-stacked", 73 | "body": [ 74 | "
", 75 | "\t\"\"", 76 | "\t\"\"", 77 | "\t\"\"", 78 | "\t\"\"", 79 | "
" 80 | ], 81 | "description": "Flowbite Avatar stacked (group)" 82 | }, 83 | "flowbite-avatar-text": { 84 | "scope": "html", 85 | "prefix": "flowbite-avatar-text", 86 | "body": [ 87 | "
", 88 | "\t\"\"", 89 | "\t
", 90 | "\t\t
Jese Leos
", 91 | "\t\t
Joined in August 2014
", 92 | "\t
", 93 | "
" 94 | ], 95 | "description": "Flowbite Avatar with text" 96 | }, 97 | "flowbite-avatar-dropdown": { 98 | "scope": "html", 99 | "prefix": "flowbite-avatar-dropdown", 100 | "body": [ 101 | "\"User", 102 | "", 103 | "", 104 | "" 124 | ], 125 | "description": "Flowbite Avatar with dropdown menu" 126 | } 127 | } -------------------------------------------------------------------------------- /snippets/badges.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-badge": { 3 | "scope": "html", 4 | "prefix": "flowbite-badge", 5 | "body": [ 6 | "Default", 7 | "Dark", 8 | "Red", 9 | "Green", 10 | "Yellow", 11 | "Indigo", 12 | "Purple", 13 | "Pink" 14 | ], 15 | "description": "Flowbite default badge" 16 | }, 17 | "flowbite-badge-large": { 18 | "scope": "html", 19 | "prefix": "flowbite-badge-large", 20 | "body": [ 21 | "Default", 22 | "Dark", 23 | "Red", 24 | "Green", 25 | "Yellow", 26 | "Indigo", 27 | "Purple", 28 | "Pink" 29 | ], 30 | "description": "Flowbite large badge" 31 | }, 32 | "flowbite-badge-bordered": { 33 | "scope": "html", 34 | "prefix": "flowbite-badge-bordered", 35 | "body": [ 36 | "Default", 37 | "Dark", 38 | "Red", 39 | "Green", 40 | "Yellow", 41 | "Indigo", 42 | "Purple", 43 | "Pink" 44 | ], 45 | "description": "Flowbite bordered badge" 46 | }, 47 | "flowbite-badge-pills": { 48 | "scope": "html", 49 | "prefix": "flowbite-badge-pills", 50 | "body": [ 51 | "Default", 52 | "Dark", 53 | "Red", 54 | "Green", 55 | "Yellow", 56 | "Indigo", 57 | "Purple", 58 | "Pink" 59 | ], 60 | "description": "Flowbite pill badge" 61 | }, 62 | "flowbite-badge-links": { 63 | "scope": "html", 64 | "prefix": "flowbite-badge-links", 65 | "body": [ 66 | "Badge link", 67 | "Badge link" 68 | ], 69 | "description": "Flowbite badge links" 70 | }, 71 | "flowbite-badge-icon": { 72 | "scope": "html", 73 | "prefix": "flowbite-badge-icon", 74 | "body": [ 75 | "", 76 | " ", 77 | " 3 days ago", 78 | "", 79 | "", 80 | " ", 81 | " 2 minutes ago", 82 | "" 83 | ], 84 | "description": "Flowbite badge with icon" 85 | }, 86 | "flowbite-badge-notification": { 87 | "scope": "html", 88 | "prefix": "flowbite-badge-notification", 89 | "body": [ 90 | "" 95 | ], 96 | "description": "Flowbite badge notification" 97 | }, 98 | "flowbite-badge-button": { 99 | "scope": "html", 100 | "prefix": "flowbite-badge-button", 101 | "body": [ 102 | "" 108 | ], 109 | "description": "Flowbite badge button" 110 | }, 111 | "flowbite-badge-icon-only": { 112 | "scope": "html", 113 | "prefix": "flowbite-badge-icon-only", 114 | "body": [ 115 | "", 116 | " ", 117 | " Icon description", 118 | "", 119 | "", 120 | " ", 121 | " Icon description", 122 | "", 123 | "", 124 | " ", 125 | " Icon description", 126 | "", 127 | "", 128 | " ", 129 | " Icon description", 130 | "" 131 | ], 132 | "description": "Flowbite badge icon only" 133 | }, 134 | "flowbite-badge-dismissable": { 135 | "scope": "html", 136 | "prefix": "flowbite-badge-dismissable", 137 | "body": [ 138 | "", 139 | " Default", 140 | " ", 144 | "", 145 | "", 146 | " Dark", 147 | " ", 151 | "", 152 | "", 153 | " Red", 154 | " ", 158 | "", 159 | "", 160 | " Green", 161 | " ", 165 | "", 166 | "", 167 | " Yellow", 168 | " ", 172 | "", 173 | "", 174 | " Indigo", 175 | " ", 179 | "", 180 | "", 181 | " Purple", 182 | " ", 186 | "", 187 | "", 188 | " Pink", 189 | " ", 193 | "" 194 | ], 195 | "description": "Flowbite dismisable badges" 196 | } 197 | } -------------------------------------------------------------------------------- /snippets/breadcrumbs.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-breadcrumb": { 3 | "scope": "html", 4 | "prefix": "flowbite-breadcrumb", 5 | "body": [ 6 | "" 27 | ], 28 | "description": "Flowbite Breadcrumb" 29 | }, 30 | "flowbite-breadcrumb-solid-background": { 31 | "scope": "html", 32 | "prefix": "flowbite-breadcrumb-solid-background", 33 | "body": [ 34 | "", 35 | "" 56 | ], 57 | "description": "Flowbite Breadcrumb with Solid Background" 58 | }, 59 | "flowbite-breadcrumb-header": { 60 | "scope": "html", 61 | "prefix": "flowbite-breadcrumb-header", 62 | "body": [ 63 | "", 64 | "" 101 | ], 102 | "description": "Breadcrumb with dropdown" 103 | }, 104 | "flowbite-breadcrumb-dropdown": { 105 | "scope": "html", 106 | "prefix": "flowbite-breadcrumb-dropdown", 107 | "body": [ 108 | "", 109 | "" 150 | ], 151 | "description": "Flowbite breadcrumb with dropdowns" 152 | } 153 | } -------------------------------------------------------------------------------- /snippets/buttongroups.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-buttongroup": { 3 | "scope": "html", 4 | "prefix": "flowbite-buttongroup", 5 | "body": [ 6 | "
", 7 | " ", 10 | " ", 13 | " ", 16 | "
" 17 | ], 18 | "description": "Flowbite default buttongroup" 19 | }, 20 | "flowbite-buttongroup-links": { 21 | "scope": "html", 22 | "prefix": "flowbite-buttongroup-links", 23 | "body": [ 24 | "
", 25 | " ", 26 | "\tProfile", 27 | " ", 28 | " ", 29 | "\tSettings", 30 | " ", 31 | " ", 32 | "\tMessages", 33 | " ", 34 | "
" 35 | ], 36 | "description": "Flowbite buttongroup with links" 37 | }, 38 | "flowbite-buttongroup-icons": { 39 | "scope": "html", 40 | "prefix": "flowbite-buttongroup-icons", 41 | "body": [ 42 | "
", 43 | " ", 47 | " ", 51 | " ", 55 | "
", 56 | "" 57 | ], 58 | "description": "Flowbite buttongroup with icons" 59 | }, 60 | "flowbite-buttongroup-outline": { 61 | "scope": "html", 62 | "prefix": "flowbite-buttongroup-outline", 63 | "body": [ 64 | "
", 65 | " ", 68 | " ", 71 | " ", 74 | "
" 75 | ], 76 | "description": "Flowbite buttongroup outline" 77 | }, 78 | "flowbite-buttongroup-outline-icon": { 79 | "scope": "html", 80 | "prefix": "flowbite-buttongroup-outline-icon", 81 | "body": [ 82 | "
", 83 | " ", 87 | " ", 91 | " ", 95 | "
" 96 | ], 97 | "description": "Flowbite Button Group with Outline Icon" 98 | } 99 | } -------------------------------------------------------------------------------- /snippets/indicators.json: -------------------------------------------------------------------------------- 1 | { 2 | "indicator-count": { 3 | "scope": "html", 4 | "prefix": "flowbite-indicator-count", 5 | "body": "", 6 | "description": "Flowbite indicator count" 7 | }, 8 | "indicator-loader": { 9 | "scope": "html", 10 | "prefix": "flowbite-indicator-loader", 11 | "body": "
loading...
", 12 | "description": "Flowbite indicator loader" 13 | }, 14 | "indicator-loader-spinner": { 15 | "scope": "html", 16 | "prefix": "flowbite-indicator-spinner", 17 | "body": "
Loading...
", 18 | "description": "Flowbite indicator spinner" 19 | }, 20 | "indicator-stepper": { 21 | "scope": "html", 22 | "prefix": "flowbite-indicator-stepper", 23 | "body": "

  1. Step 1

  2. Step 2

  3. Step 2

  4. Step 3

", 24 | "description": "Flowbite indicator stepper" 25 | }, 26 | "indicator-status": { 27 | "scope": "html", 28 | "prefix": "flowbite-indicator-status", 29 | "body": "
\"profile
", 30 | "description": "Flowbite indicator status" 31 | }, 32 | "white": { 33 | "scope": "html", 34 | "prefix": "flowbite-indicator-white", 35 | "body": "", 36 | "description": "Flowbite indicator white" 37 | }, 38 | "white-with-legend": { 39 | "scope": "html", 40 | "prefix": "flowbite-indicator-white-with-legend", 41 | "body": "Legend", 42 | "description": "Flowbite indicator white with legend" 43 | }, 44 | "gray": { 45 | "scope": "html", 46 | "prefix": "flowbite-indicator-gray", 47 | "body": "", 48 | "description": "Flowbite indicator gray" 49 | }, 50 | "gray-with-legend": { 51 | "scope": "html", 52 | "prefix": "flowbite-indicator-gray-with-legend", 53 | "body": "Legend", 54 | "description": "Flowbite indicator gray with legend" 55 | }, 56 | "blue": { 57 | "scope": "html", 58 | "prefix": "flowbite-indicator-blue", 59 | "body": "", 60 | "description": "Flowbite indicator blue" 61 | }, 62 | "blue-with-legend": { 63 | "scope": "html", 64 | "prefix": "flowbite-indicator-blue-with-legend", 65 | "body": "Legend", 66 | "description": "Flowbite indicator blue with legend" 67 | }, 68 | "green": { 69 | "scope": "html", 70 | "prefix": "flowbite-indicator-green", 71 | "body": "", 72 | "description": "Flowbite indicator green" 73 | }, 74 | "green-with-legend": { 75 | "scope": "html", 76 | "prefix": "flowbite-indicator-green-with-legend", 77 | "body": "Legend", 78 | "description": "Flowbite indicator green with legend" 79 | }, 80 | "red": { 81 | "scope": "html", 82 | "prefix": "flowbite-indicator-red", 83 | "body": "", 84 | "description": "Flowbite indicator red" 85 | }, 86 | "red-with-legend": { 87 | "scope": "html", 88 | "prefix": "flowbite-indicator-red-with-legend", 89 | "body": "Legend", 90 | "description": "Flowbite indicator red with legend" 91 | }, 92 | "purple": { 93 | "scope": "html", 94 | "prefix": "flowbite-indicator-purple", 95 | "body": "", 96 | "description": "Flowbite indicator purple" 97 | }, 98 | "purple-with-legend": { 99 | "scope": "html", 100 | "prefix": "flowbite-indicator-purple-with-legend", 101 | "body": "Legend", 102 | "description": "Flowbite indicator purple with legend" 103 | }, 104 | "indigo": { 105 | "scope": "html", 106 | "prefix": "flowbite-indicator-indigo", 107 | "body": "", 108 | "description": "Flowbite indicator indigo" 109 | }, 110 | "indigo-with-legend": { 111 | "scope": "html", 112 | "prefix": "flowbite-indicator-indigo-with-legend", 113 | "body": "Legend", 114 | "description": "Flowbite indicator indigo with legend" 115 | }, 116 | "yellow": { 117 | "scope": "html", 118 | "prefix": "flowbite-indicator-yellow", 119 | "body": "", 120 | "description": "Flowbite indicator yellow" 121 | }, 122 | "yellow-with-legend": { 123 | "scope": "html", 124 | "prefix": "flowbite-indicator-yellow-with-legend", 125 | "body": "Legend", 126 | "description": "Flowbite indicator yellow with legend" 127 | }, 128 | "teal": { 129 | "scope": "html", 130 | "prefix": "flowbite-indicator-teal", 131 | "body": "", 132 | "description": "Flowbite indicator teal" 133 | }, 134 | "teal-with-legend": { 135 | "scope": "html", 136 | "prefix": "flowbite-indicator-teal-with-legend", 137 | "body": "Legend", 138 | "description": "Flowbite indicator teal with legend" 139 | } 140 | } -------------------------------------------------------------------------------- /snippets/kbd.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-kbd": { 3 | "scope": "html", 4 | "prefix": "flowbite-kbd", 5 | "body": [ 6 | "Shift" 7 | ], 8 | "description": "Flowbite KBD" 9 | }, 10 | "flowbite-kbd-inside-text": { 11 | "scope": "html", 12 | "prefix": "flowbite-kbd-inside-text", 13 | "body": [ 14 | "

", 15 | "\tPlease press Ctrl + Shift + R to re-render an MDN page.", 16 | "

" 17 | ], 18 | "description": "Flowbite KBD inside text" 19 | }, 20 | "flowbite-kbd-arrow-keys": { 21 | "scope": "html", 22 | "prefix": "flowbite-kbd-arrow-keys", 23 | "body": [ 24 | "", 25 | "\t", 26 | "\tArrow key up", 27 | "", 28 | "", 29 | "\t", 30 | "\tArrow key down", 31 | "", 32 | "", 33 | "\t", 34 | "\tArrow key left", 35 | "", 36 | "", 37 | "\t", 38 | "\tArrow key right", 39 | "" 40 | ], 41 | "description": "Flowbite KBD arrow keys" 42 | }, 43 | "flowbite-kbd-inside-table": { 44 | "scope": "html", 45 | "prefix": "flowbite-kbd-inside-table", 46 | "body": [ 47 | "
", 48 | "\t", 49 | "\t\t", 50 | "\t\t\t", 51 | "\t\t\t\t", 54 | "\t\t\t\t", 57 | "\t\t\t", 58 | "\t\t", 59 | "\t\t", 60 | "\t\t\t", 61 | "\t\t\t\t", 66 | "\t\t\t\t", 69 | "\t\t\t", 70 | "\t\t\t", 71 | "\t\t\t\t", 76 | "\t\t\t\t", 79 | "\t\t\t", 80 | "\t\t\t", 81 | "\t\t\t\t", 100 | "\t\t\t\t", 103 | "\t\t\t", 104 | "\t\t", 105 | "\t
", 52 | "\t\t\t\t\tKey", 53 | "\t\t\t\t", 55 | "\t\t\t\t\tDescription", 56 | "\t\t\t\t
", 62 | "\t\t\t\t\tShift", 63 | "\t\t\t\t\t\tor", 64 | "\t\t\t\t\tTab", 65 | "\t\t\t\t", 67 | "\t\t\t\t\tNavigate to interactive elements", 68 | "\t\t\t\t
", 72 | "\t\t\t\t\tEnter", 73 | "\t\t\t\t\tor", 74 | "\t\t\t\t\tSpacebar", 75 | "\t\t\t\t", 77 | "\t\t\t\t\tEnsure elements with ARIA role=\"button\" can be activated with both key commands.", 78 | "\t\t\t\t
", 82 | "\t\t\t\t\t", 83 | "\t\t\t\t\t\t", 84 | "\t\t\t\t\t\tArrow key up", 85 | "\t\t\t\t\t", 86 | "\t\t\t\t\t", 87 | "\t\t\t\t\t\t", 88 | "\t\t\t\t\t\tArrow key down", 89 | "\t\t\t\t\t", 90 | "\t\t\t\t\tor", 91 | "\t\t\t\t\t", 92 | "\t\t\t\t\t\t", 93 | "\t\t\t\t\t\tArrow key left", 94 | "\t\t\t\t\t", 95 | "\t\t\t\t\t", 96 | "\t\t\t\t\t\t", 97 | "\t\t\t\t\t\tArrow key right", 98 | "\t\t\t\t\t", 99 | "\t\t\t\t", 101 | "\t\t\t\t\tChoose and activate previous/next tab.", 102 | "\t\t\t\t
", 106 | "
" 107 | ], 108 | "description": "Flowbite KBD inside table" 109 | } 110 | } -------------------------------------------------------------------------------- /snippets/popover.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-popover": { 3 | "scope": "html", 4 | "prefix": "flowbite-popover", 5 | "body": [ 6 | "", 7 | "
", 8 | "\t
", 9 | "\t\t

Popover title

", 10 | "\t
", 11 | "\t
", 12 | "\t\t

And here's some amazing content. It's very engaging. Right?

", 13 | "\t
", 14 | "\t
", 15 | "
" 16 | ], 17 | "description": "Flowbite default popover" 18 | }, 19 | "flowbite-popover-user-profile": { 20 | "scope": "html", 21 | "prefix": "flowbite-popover-user-profile", 22 | "body": [ 23 | "", 24 | "
", 25 | "\t
", 26 | "\t\t
", 27 | "\t\t\t", 28 | "\t\t\t\t\"Jese", 29 | "\t\t\t", 30 | "\t\t\t
", 31 | "\t\t\t\t", 32 | "\t\t\t
", 33 | "\t\t
", 34 | "\t\t

", 35 | "\t\t\tJese Leos", 36 | "\t\t

", 37 | "\t\t

", 38 | "\t\t\t@jeseleos", 39 | "\t\t

", 40 | "\t\t

Open-source contributor. Building flowbite.com.

", 41 | "\t\t", 55 | "\t
", 56 | "\t
", 57 | "
" 58 | ], 59 | "description": "Flowbite user profile popover" 60 | }, 61 | "flowbite-popover-company-profile": { 62 | "scope": "html", 63 | "prefix": "flowbite-popover-company-profile", 64 | "body": [ 65 | "", 66 | "
", 67 | "\t
", 68 | "\t\t
", 69 | "\t\t\t
", 70 | "\t\t\t\t", 71 | "\t\t\t\t\t\"Flowbite", 72 | "\t\t\t\t", 73 | "\t\t\t
", 74 | "\t\t\t
", 75 | "\t\t\t\t

", 76 | "\t\t\t\t\tFlowbite", 77 | "\t\t\t\t

", 78 | "\t\t\t\t

", 79 | "\t\t\t\t\tTech company", 80 | "\t\t\t\t

", 81 | "\t\t\t\t

Open-source library of Tailwind CSS components and Figma design system.

", 82 | "\t\t\t\t
    ", 83 | "\t\t\t\t\t
  • ", 84 | "\t\t\t\t\t\t", 85 | "\t\t\t\t\t\t\t", 86 | "\t\t\t\t\t\t", 87 | "\t\t\t\t\t\thttps://flowbite.com/", 88 | "\t\t\t\t\t
    • ", 89 | "\t\t\t\t\t
  • ", 90 | "\t\t\t\t\t\t", 91 | "\t\t\t\t\t\t\t", 92 | "\t\t\t\t\t\t", 93 | "\t\t\t\t\t\t4,567,346 people like this including 5 of your friends", 94 | "\t\t\t\t\t
    • ", 95 | "\t\t\t\t
", 96 | "\t\t\t\t
", 97 | "\t\t\t\t\t\"\"", 98 | "\t\t\t\t\t\"\"", 99 | "\t\t\t\t\t\"\"", 100 | "\t\t\t\t\t+3", 101 | "\t\t\t\t
", 102 | "\t\t\t\t
", 103 | "\t\t\t\t\t", 104 | "\t\t\t\t\t", 108 | "\t\t\t\t
", 109 | "\t\t\t
", 110 | "\t\t
", 111 | "\t
", 112 | "\t
", 113 | "
" 114 | ], 115 | "description": "Flowbite company popover" 116 | } 117 | } -------------------------------------------------------------------------------- /snippets/progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-progress": { 3 | "scope": "html", 4 | "prefix": "flowbite-progress", 5 | "body": [ 6 | "
", 7 | "\t
", 8 | "
" 9 | ], 10 | "description": "Flowbite Progress Bar" 11 | }, 12 | "flowbite-progress-small": { 13 | "scope": "html", 14 | "prefix": "flowbite-progress-small", 15 | "body": [ 16 | "
", 17 | "\t
", 18 | "
" 19 | ], 20 | "description": "Flowbite Progress Bar Small" 21 | }, 22 | "flowbite-progress-large": { 23 | "scope": "html", 24 | "prefix": "flowbite-progress-large", 25 | "body": [ 26 | "
", 27 | "\t
", 28 | "
" 29 | ], 30 | "description": "Flowbite Progress Bar Large" 31 | }, 32 | "flowbite-progress-extra-large": { 33 | "scope": "html", 34 | "prefix": "flowbite-progress-extra-large", 35 | "body": [ 36 | "
", 37 | "\t
", 38 | "
" 39 | ], 40 | "description": "Flowbite Progress Bar Extra Large" 41 | }, 42 | "flowbite-progress-label-inside": { 43 | "scope": "html", 44 | "prefix": "flowbite-progress-label-inside", 45 | "body": [ 46 | "
", 47 | "\t
45%
", 48 | "
" 49 | ], 50 | "description": "Flowbite Progress Bar Label Inside" 51 | }, 52 | "flowbite-progress-label-outside": { 53 | "scope": "html", 54 | "prefix": "flowbite-progress-label-outside", 55 | "body": [ 56 | "
", 57 | "\tFlowbite", 58 | "\t45%", 59 | "
", 60 | "
", 61 | "\t
", 62 | "
" 63 | ], 64 | "description": "Flowbite Progress Bar Label Outside" 65 | } 66 | } -------------------------------------------------------------------------------- /snippets/toast.json: -------------------------------------------------------------------------------- 1 | { 2 | "flowbite-toast": { 3 | "scope": "html", 4 | "prefix": "flowbite-toast", 5 | "body": [ 6 | "
", 7 | "\t
", 8 | "\t\t", 9 | "\t\tFire icon", 10 | "\t
", 11 | "\t
Set yourself free.
", 12 | "\t", 16 | "
" 17 | ], 18 | "description": "Flowbite Toast" 19 | } 20 | } --------------------------------------------------------------------------------