Other components

Navbar

It's a fully responsive navbar that works on desktop as well as in mobile, with a collapsible menu.

Use it like:

<%= render 'layouts/partials/navbar', variant: 'floating' %>

variant can be:

• floating (default; the main layout uses it)
• sticky
• regular (the auth screens use it)

Footer

The footer (layouts/partials/footer) grows by itself. It starts as a one-line footer (footer_simple) and switches to a multi-column one (footer_full) as soon as you publish blog posts or cornerstone pages with a footer_section in their frontmatter (see Blog and content (CMS)). The footer also carries the language switcher (components/railsfast/locale_switcher), which renders nothing while your app has a single locale.

Hero, logos and inline features

A few more marketing partials ship next to the ones documented in their own pages. The hero, logos and inline features partials list their parameters in a comment at the top of the file; the star rating's are listed below.

• Hero (components/railsfast/marketing/hero): the top section of a landing page. Requires title: and primary_button: { text:, url: }; optional subtitle:, badge:, secondary_button:, alignment: ("center" or "left"), image: with image_position:, gradient: true with gradient_colors:, and color overrides. The dark demo landing page (app/views/demo/dark_landing_page.html.erb) shows it in use.
• Logos (components/railsfast/marketing/logos): a row of customer logos. logos: is an array of { image_url:, alt_text:, display_name:, link: }, plus an optional title: and theme: ("default", "grayscale", "white").
• Inline features (components/railsfast/marketing/inline_features): a horizontal line of icon plus short label, such as "Auth · Payments · Secure". items: is an array of { icon:, text: } with Heroicons names.
• Star rating (components/railsfast/marketing/star_rating): rating:, size:, css_class:, show_value: and value_class:. The number of stars comes from star_max in config/railsfast/testimonials.yml.

<%= render "components/railsfast/marketing/logos",
    title: "Trusted by companies worldwide",
    theme: "grayscale",
    logos: [
      { image_url: "/logo.svg", alt_text: "Company", display_name: "Company" }
    ] %>

Interactive components

RailsFast registers these Stimulus controllers for interface behaviour. Use them through their identifiers:

• railsfast--ui--dropdown, railsfast--ui--modal, railsfast--ui--slideover, railsfast--ui--toggle and railsfast--ui--alert: thin wrappers around the tailwindcss-stimulus-components library, so its documentation describes their targets, actions and values.
• railsfast--ui--disclosure: closes a <details> menu on an outside click or Escape.
• railsfast--ui--copy: copy-to-clipboard.
• railsfast--ui--share: shares a link through the native share sheet in the apps, the Web Share API in browsers, or a copy fallback.
• railsfast--ui--tooltip, railsfast--ui--password-visibility and railsfast--ui--theme-toggle (the light, dark and system switch).

The library has more components (Autosave, Color Preview, Popover, Tabs) that RailsFast does not register. To use one, add a two-line controller of your own under app/javascript/controllers/app/, the way app/javascript/controllers/railsfast/ui/modal_controller.js does for Modal.