component.yml files and brings
component names, props, slots, and documentation directly into your VS Code workflow.
No more switching between editor and docs.
Features
Component Autocomplete
Type ui. to see all available components with descriptions. Instantly discover what's available.
Slot Suggestions
Access nested slots like ui.alert_title through autocomplete. Navigate complex component hierarchies with ease.
Prop Suggestions
Get contextual property suggestions with types and default values displayed inline as you type.
Enum Value Hints
Properties with predefined values show dropdown suggestions automatically, e.g. variant: :default, :outline, :danger.
Hover Documentation
Hover over any ui.component_name to see full docs: description, props table, and usage examples.
Auto-Refresh
Automatically detects changes to component.yml files and re-indexes without manual reloads.
How it works
ui. to trigger autocomplete
As soon as you type ui. in any ERB file, the extension shows a list of all available components
with their descriptions, pulled directly from your component.yml files.
After selecting a component, the extension suggests all available properties with their types and defaults.
Enum properties like variant or size show all valid options.
Hover over any ui.component_name call to see comprehensive documentation
including a description, full properties table, and usage examples — all without leaving your editor.
What's supported
Installation
Search for JetRockets UI Autocomplete in the VS Code Extensions panel, or install directly:
code --install-extension JetRocketsUI.jetrockets-ui-autocomplete
Customize the extension in your VS Code settings.json:
{
"jetrocketsUI.componentsPath": "app/components/ui",
"jetrocketsUI.helperPrefix": "ui."
}Component YAML structure
The extension reads component.yml files to power autocomplete.
Every component in this library already includes one.
# app/components/ui/btn/component.yml
name: Button
description: A clickable button with variants and sizes
props:
- name: variant
type: Symbol
default: ":default"
values: ":default, :outline, :secondary, :danger, :ghost, :link"
description: Visual style of the button
- name: size
type: Symbol
default: ":md"
values: ":xs, :sm, :md, :lg"
description: Size of the button
slots:
- name: icon
description: Icon slot for the button
accepts_html_attributes: trueReady to supercharge your workflow?
Get the extension and start building faster.