Strive UI Snippets
Strive UI Snippets is a Visual Studio Code extension that provides autocomplete snippets for commonly used utility classes. It is designed to reduce repetitive typing and improve development speed when working with utility-based UI styling.
Features
- Autocomplete snippets for common UI utility classes
- Compatible with HTML, JSX, TSX, and similar file types
- Dropdown placeholders for selecting values quickly
- Helps maintain consistent styling in UI development
Supported Snippets
| Utility |
Prefix |
Example |
| Padding |
p- |
p-4, p-8, p-16 |
| Margin |
m- |
m-2, m-6, m-auto |
| Width |
w- |
w-full, w-64, w-screen |
| Height |
h- |
h-20, h-screen, h-full |
| Flexbox |
flex |
flex, flex-col, items-center |
| Grid |
grid |
grid, grid-cols-2, gap-4 |
| Font Size |
text- |
text-sm, text-xl, text-4xl |
| Font Weight |
font- |
font-light, font-semibold |
| Border Radius |
rounded- |
rounded-md, rounded-full |
| Shadow |
shadow- |
shadow, shadow-lg, shadow-md |
| Position |
pos- |
absolute, relative, fixed |
| Z Index |
z- |
z-10, z-20, z-auto |
Installation
- Open Visual Studio Code
- Go to the Extensions Marketplace
- Search for Strive UI Snippets
- Click Install
After installation, start typing prefixes such as p-, text-, or w- to view available suggestions.
Example
"Padding": {
"prefix": "p-",
"body": "p-${1|0,1,2,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96|}",
"description": "Padding utility"
}
This snippet provides a list of selectable padding values through the VS Code suggestion menu.
License
This project is licensed under the MIT License.
| |
