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 CSS 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 variable.

Conversion Utilities

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