78+ produktionsreife Komponenten

Die Komponentenbibliothek für Rails

Schöne, barrierefreie Komponenten mit Stimulus, Turbo und Tailwind. Keine Abhängigkeiten, kein Lock-in. Einfach kopieren, einfügen und anpassen.

Komponenten durchsuchen
Rails 8
ViewComponent
WCAG 2.1
GitHub-Zugang

In Aktion erleben

Jede Komponente wird in zwei Formaten geliefert — wähle, was zu deinem Projekt passt.

Tabs-Komponente Unterstrichen

Produktionsreife Komponenten für Rails-Anwendungen. Erstellt mit Stimulus-Controllern und Tailwind CSS.

_tabs.html.erb 
<%= render partial: "components/tabs/underline",
    locals: {
      tabs: [
        { id: "overview", label: "Overview",
          content: "Your content..." },
        { id: "features", label: "Features" },
      ]
    } %>

Von Grund auf für Rails entwickelt

Kein React-Port. Nicht Framework-agnostisch. Jede Komponente ist speziell für serverseitig gerenderte Rails-Anwendungen mit Hotwire entwickelt.

  • Stimulus-Controller für alle interaktiven Verhaltensweisen
  • Turbo-kompatibel — funktioniert mit Frames und Streams
  • Importmap-fähig — kein Node.js-Build-Schritt erforderlich
  • Tailwind CSS — Utility-first, keine eigenen Stylesheets
app/views/dashboard/index.html.erb 
<%# Just render the component %>
<%= render partial: "components/tabs/underline",
    locals: { tabs: @tabs } %>

<%# Or use ViewComponent %>
<%= render TabsUnderlineComponent.new do |tabs|
  tabs.with_tab(id: "stats", label: "Stats")
  tabs.with_tab(id: "users", label: "Users")
end %>

Classic ERB oder ViewComponent — deine Wahl

Gleiches Styling, gleiches Verhalten, unterschiedliche Architektur. Wähle, was zu deinem Team passt.

Classic

ERB-Partials + Stimulus

<%= render partial:
    "components/accordion/basic",
    locals: {
      items: [
        { title: "Section 1",
          content: "Content..." }
      ]
    } %>

Standard-Rails-Partials mit lokalen Variablen. Einfach in jede View einfügen.

ViewComponent

Ruby-Klassen + Slots

<%= render AccordionBasicComponent.new do |c| %>
  <% c.with_item(
    title: "Section 1"
  ) do %>
    Content...
  <% end %>
<% end %>

Typisierte Schnittstellen, Content-Slots und testbare Ruby-Objekte.

railskit / components
Privates Repository
accordion/
tabs/
modal/
README.md
Ruby JavaScript ERB

Vollständiger Quellcode auf GitHub

Erhalte eine Einladung zu einem privaten GitHub-Repository mit dem Quellcode jeder Komponente. Klone es, forke es, durchsuche die Historie — es gehört dir.

  • Privater Repo-Zugang — Einladung wird nach dem Kauf versendet
  • Vollständige Versionshistorie — Änderungen über Releases hinweg verfolgen
  • Updates abrufen — git pull für die neuesten Komponenten

Standardmäßig barrierefrei

Jede Komponente folgt WAI-ARIA-Mustern und ist mit Tastaturnavigation getestet. Barrierefreiheit ist kein nachträglicher Gedanke.

Tastaturnavigation

Pfeiltasten, Tab, Escape. Jede interaktive Komponente ist vollständig per Tastatur bedienbar.

ARIA-Muster

Korrekte Rollen, Zustände und Labels gemäß den WAI-ARIA-Autorenpraktiken.

Dark Mode

Vollständige Dark-Mode-Unterstützung mit Tailwind dark:-Varianten für jede Komponente.

Fokus-Management

Sichtbare Fokusringe, Fokus-Trapping in Modals und Dialogen sowie korrekte Tab-Reihenfolge.

Einfache, transparente Preise

Einmalige Zahlung. Lebenslanger Zugang. Keine Abonnements.

$149

einmalige Zahlung

  • Alle aktuellen und zukünftigen Komponenten
  • Zugang zum privaten GitHub-Repository
  • Lebenslange Updates ohne Zusatzkosten
  • MIT-Lizenz — überall einsetzbar

Sicherer Checkout powered by Stripe

Beginne mit RailsKit zu bauen

78+ Komponenten, bereit für deine Rails-App. Einmalige Zahlung, lebenslanger Zugang.

Komponenten durchsuchen