Components
Installation
Set up the gem once. Then call any component directly from ERB.
Before you start
Use Rails 8 or later with Propshaft, importmap, Stimulus and tailwindcss-rails 4.4 or later. Tailwind CSS v4 is required: it compiles the component styles and the utilities in your views. A Rails app created with Tailwind includes this setup.
1. Add the gem
Add this to your Gemfile, then run bundle install.
gem "lostcoords-ui", "~> 0.5.0"The engine makes all lc_* helpers available to views. There are no per-component Ruby or JavaScript imports. Commit Gemfile.lock to pin the version your app uses.
2. Add the stylesheet
For a new app, save the starter stylesheet as app/assets/tailwind/application.css. The engine import includes the default light and dark theme.
@layer theme, base, layout, components, modules, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
@plugin "@tailwindcss/typography";
@import "../builds/tailwind/lostcoords_ui.css";
For an existing app, add the starter's layer order and typography plugin if needed. Keep your Tailwind imports and add the engine import:
@import "../builds/tailwind/lostcoords_ui.css";Run bin/rails tailwindcss:build. The build generates that import path from the installed gem. Components work with the defaults immediately. To customize colors or fonts, add overrides after the import using the theming guide.
3. Load the assets
Your layout needs the compiled Tailwind stylesheet and importmap tags. Keep your existing tags if they already load these assets.
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>The engine adds its Stimulus pins to the importmap. Load controllers with lazyLoadControllersFrom("controllers", application) in controllers/index.js, so each page downloads only the controllers it uses. To ship less CSS, import core.css and the components you use instead of the whole library; the README lists the entries.
4. Use a component
<%= lc_button "Create project", icon: "plus" %>Helpers render native HTML. Use class: for additional utilities, data: and aria: for attributes, and blocks for custom content. Browse the button examples to see variants, sizes, links and Rails forms.