78+ componenti pronti per la produzione

La libreria di componenti per Rails

Componenti belli e accessibili costruiti con Stimulus, Turbo e Tailwind. Nessuna dipendenza, nessun vincolo. Copia, incolla e personalizza.

Sfoglia i Componenti
Rails 8
ViewComponent
WCAG 2.1
Accesso GitHub

Guardalo in azione

Ogni componente è disponibile in due formati — scegli quello più adatto al tuo progetto.

Componente Tabs Sottolineato

Componenti pronti per la produzione per applicazioni Rails. Costruiti con controller Stimulus e Tailwind CSS.

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

Costruito da zero per Rails

Non è un port di React. Non è agnostico al framework. Ogni componente è progettato appositamente per applicazioni Rails con rendering lato server e Hotwire.

  • Controller Stimulus per tutti i comportamenti interattivi
  • Compatibile con Turbo — funziona con Frames e Streams
  • Pronto per Importmap — nessun passaggio di build con Node.js richiesto
  • Tailwind CSS — utility-first, nessun foglio di stile personalizzato
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 %>

ERB Classico o ViewComponent — a tua scelta

Stesso stile, stesso comportamento, architettura diversa. Scegli quello più adatto al tuo team.

Classico

Partial ERB + Stimulus

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

Partial Rails standard con variabili locali. Inseriscili in qualsiasi vista.

ViewComponent

Classi Ruby + slot

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

Interfacce tipizzate, slot per contenuti e oggetti Ruby testabili.

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

Codice sorgente completo su GitHub

Ricevi un invito a un repository GitHub privato con il codice sorgente di ogni componente. Clonalo, forkalo, esplora la cronologia — è tuo.

  • Accesso al repository privato — invito inviato dopo l'acquisto
  • Cronologia completa delle versioni — monitora le modifiche tra le release
  • Scarica gli aggiornamenti — git pull per ottenere gli ultimi componenti

Accessibile di default

Ogni componente segue i pattern WAI-ARIA ed è testato con la navigazione da tastiera. L'accessibilità non è un ripensamento.

Navigazione da Tastiera

Frecce, Tab, Escape. Ogni componente interattivo è completamente utilizzabile da tastiera.

Pattern ARIA

Ruoli, stati ed etichette corretti seguendo le pratiche di authoring WAI-ARIA.

Modalità Scura

Supporto completo della modalità scura con le varianti dark: di Tailwind su ogni componente.

Gestione del Focus

Anelli di focus visibili, trapping del focus in modali e dialoghi, e ordine di tabulazione corretto.

Prezzi semplici e trasparenti

Un solo pagamento. Accesso a vita. Nessun abbonamento.

$149

pagamento unico

  • Tutti i componenti attuali e futuri
  • Accesso al repository GitHub privato
  • Aggiornamenti a vita senza costi aggiuntivi
  • Licenza MIT — utilizzabile ovunque

Pagamento sicuro con Stripe

Inizia a costruire con RailsKit

78+ componenti pronti da inserire nella tua app Rails. Un solo pagamento, accesso a vita.

Sfoglia i Componenti