Components Snippets cheatsheet

VSCode Snippets Cheatsheet

Snippets allow you to quickly create components in VS Code. It can also help you when you forget all the props for a component. For example button all props will produce a <.button> component with all the props visible.

Snippet Description
container Creates a container.
link Creates a link.
link method Creates a link with method.
button Creates a button.
button link Creates a button that is a link.
button all props Creates a button with all possible props.
icon button Creates an icon button.
icon button all props Creates an icon button with all possible props.
h1 Creates an h1 heading.
h2 Creates an h2 heading.
h3 Creates an h3 heading.
h4 Creates an h4 heading.
h5 Creates an h5 heading.
p tag Creates a paragraph tag.
h1 modified Creates a modified h1 heading.
h1 fancy Creates a fancy h1 heading.
heroicons solid Creates a solid Heroicon.
heroicons outline Creates an outline Heroicon.
badge Creates a badge.
badge button all props Creates a badge with all possible props.
badge with icon Creates a badge containing an icon.
alert Creates an alert.
alert dismissable Creates a dismissable alert with icon.
text_input Form field - type text input.
email_input Form field - type email input.
number_input Form field - type number input.
password_input Form field - type password input.
search_input Form field - type search input.
telephone_input Form field - type telephone input.
url_input Form field - type url input.
time_input Form field - type time input.
time_select Form field - type time select.
date_input Form field - type date input.
date_select Form field - type date select.
datetime_local_input Form field - type datetime local input.
datetime_select Form field - type datetime select.
color_input Form field - type color input.
file_input Form field - type file input.
range_input Form field - type range input.
textarea Form field - type textarea.
select Form field - type select.
checkbox_group_col Form field - type checkbox group with col layout.
checkbox_group_row Form field - type checkbox group with row layout.
radio_group_col Form field - type radio group with col layout.
radio_group_row Form field - type radio group with row layout.
dropdown Dropdown with various menu item options.
dropdown custom trigger Dropdown with custom trigger element.
dropdown live view Dropdown that works with Live View.
spinner Creates a spinner.
breadcrumbs slash Creates breadcrumbs with slash.
breadcrumbs chevron Creates breadcrumbs with chevron.
breadcrumbs custom css Creates breadcrumbs with custom css.
avatar Creates an avatar with image.
avatar placeholder Creates an avatar with placeholder.
avatar initials Creates an avatar with placeholder initials.
avatar random color initials Creates an avatar with random color placeholder initials.
avatar group Creates an avatar group with images.
progress bar Creates a progress bar.
pagination Creates pagination.
pagination Creates pagination.
pagination live view Pagination that works with Live View.
tabs Creates tabs.
tabs number Creates tabs with a number.
tabs underline icon Creates underlined tabs with icons.
card Creates a card.
card media Creates a card with media.
card footer Creates a card with footer.
table Creates a table.
table multi-lined avatar Creates a multi-lined table with avatar.
modal live view Creates a modal that works with Live View.
slide over Creates a Slide Over.