Petal Components VSCode Snippets

A set of snippets for the Petal Components HEEX library.

Snippets

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.
prose	Creates a div with Tailwind's prose classes.
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.
form_full	Creates an entire form for you to start with.
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.

Contributing

We welcome contributions from the community. Please feel free to open an issue or pull request.

You can research snippet creation here.

In VScode: cmd-shift-p -> Preferences: Configure User Snippets -> "phoenix-heex.json".

You can use this extension to help convert large blocks of code to snippets.

Once you're happy with a snippet, clone this repo, add the snippet to `/snippets/heex.code-snippets" and do a PR.