A collection of handy code snippets for the Calcite Design System components, designed to boost your productivity when building web applications with Calcite in Visual Studio Code.
- Quickly insert Calcite component HTML with simple prefixes
- Consistent, ready-to-use markup for all major Calcite components
- Works in HTML files and templates
To use Calcite Design System components in your HTML, you must first add the Calcite script to your page header. You can do this quickly by typing the clt-script snippet.
Type the prefix for a Calcite component in an HTML file and select the desired snippet from the suggestions.
Below is the complete list of available snippets and their prefixes:
| Prefix | Description |
|---|---|
| clt-script | Add Calcite JS library script tag |
| clt-css | Add Calcite CSS link tag |
| clt-accordion | Create a calcite-accordion |
| clt-action | Create a calcite-action |
| clt-action-bar | Create a calcite-action-bar |
| clt-action-group | Create a calcite-action-group |
| clt-action-pad | Create a calcite-action-pad |
| clt-alert | Create a calcite-alert |
| clt-avatar | Create a calcite-avatar |
| clt-block | Create a calcite-block |
| clt-button | Create a calcite-button |
| clt-card | Create a calcite-card |
| clt-carousel | Create a calcite-carousel |
| clt-checkbox | Create a calcite-checkbox |
| clt-chip | Create a calcite-chip |
| clt-color-picker | Create a calcite-color-picker |
| clt-combobox | Create a calcite-combobox |
| clt-date-picker | Create a calcite-date-picker |
| clt-dialog | Create a calcite-dialog |
| clt-dropdown | Create a calcite-dropdown |
| clt-fab | Create a calcite-fab |
| clt-filter | Create a calcite-filter |
| clt-flow | Create a calcite-flow |
| clt-flow-item | Create a calcite-flow-item |
| clt-icon | Create a calcite-icon |
| clt-inline-editable | Create a calcite-inline-editable |
| clt-input | Create a calcite-input |
| clt-input-message | Create a calcite-input-message |
| clt-label | Create a calcite-label |
| clt-link | Create a calcite-link |
| clt-list | Create a calcite-list |
| clt-loader | Create a calcite-loader |
| clt-menu | Create a calcite-menu |
| clt-meter | Create a calcite-meter |
| clt-modal | Create a calcite-modal |
| clt-navigation | Create a calcite-navigation |
| clt-notice | Create a calcite-notice |
| clt-pagination | Create a calcite-pagination |
| clt-panel | Create a calcite-panel |
| clt-popover | Create a calcite-popover |
| clt-progress | Create a calcite-progress |
| clt-radio-button | Create a calcite-radio-button |
| clt-radio-button-group | Create a calcite-radio-button-group |
| clt-rating | Create a calcite-rating |
| clt-select | Create a calcite-select |
| clt-scrim | Create a calcite-scrim |
| clt-segmented-control | Create a calcite-segmented-control |
| clt-shell | Create a calcite-shell |
| clt-slider | Create a calcite-slider |
| clt-stepper | Create a calcite-stepper |
| clt-switch | Create a calcite-switch |
| clt-tabs | Create a calcite-tabs |
| clt-text-area | Create a calcite-text-area |
| clt-tile | Create a calcite-tile |
| clt-tile-select | Create a calcite-tile-select |
| clt-tile-select-group | Create a calcite-tile-select-group |
| clt-time-picker | Create a calcite-time-picker |
| clt-tip | Create a calcite-tip |
| clt-tooltip | Create a calcite-tooltip |
| clt-tip-manager | Create a calcite-tip-manager |
| clt-tree | Create a calcite-tree |
| clt-tree-item | Create a calcite-tree-item |
- Search Calcite Snippets in Extensions Tab.
- Click on install.
- Enjoy.
- Visual Studio Code 1.80.0 or higher
If you find a bug or have a suggestion, please open an issue on the GitHub repository.
© 2025 K-dev. Not affiliated with Esri. All Calcite Design System trademarks belong to their respective owners.