shadcn HSL Preview

Overview

The shadcn HSL Preview extension for Visual Studio Code provides a simple color preview feature for the shadcn syntax for HSL in CSS files. It enhances your coding experience by displaying a live preview of colors defined using the shadcn syntax directly in your CSS files.

Features

• Does what it says on the box: Provides a preview of HSL colors defined using the shadcn css variable syntax in files.
• Spicy extras like conversion utilities

Usage

1. Install the extension from the Visual Studio Code Marketplace.
2. Open a CSS file containing HSL color declarations using the shadcn css variable syntax.
3. As you use HSL color values, the color preview will update automatically.

Whats it look like?

More color information on hover of the value. Includes a color mixer, cool!

Conversion Utilities

NOTE: HEX color highlighting is not included with this extension on purpose as most people will have a different addon that does this, which will cause a conflict.

File Support

This addon works with the following file types

• CSS
• SCSS
• LESS
• PostCSS
• JS & JSX
• TS & TSX
• TailwindCSS files (files which the Tailwind LSP recognizes as on of it's own)

Requirements

• Visual Studio Code version 1.88.0 or higher.

Issues and Feedback

If you encounter any issues or have feedback for the shadcn HSL Preview extension, open an issue on GitHub.

License

This extension is licensed under the MIT License.

VSCode Theme Used in examples