78+ componentes listos para producción

La biblioteca de componentes para Rails

Componentes bonitos y accesibles construidos con Stimulus, Turbo y Tailwind. Sin dependencias, sin ataduras. Copia, pega y personaliza.

Ver Componentes
Rails 8
ViewComponent
WCAG 2.1
Acceso a GitHub

Míralo en acción

Cada componente se entrega en dos formatos — elige el que mejor se adapte a tu proyecto.

Componente Tabs Underline

Componentes listos para producción para aplicaciones Rails. Construidos con controladores Stimulus y Tailwind CSS.

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

Construido desde cero para Rails

No es un port de React. No es agnóstico al framework. Cada componente está diseñado específicamente para aplicaciones Rails renderizadas en servidor con Hotwire.

  • Controladores Stimulus para todo el comportamiento interactivo
  • Compatible con Turbo — funciona con Frames y Streams
  • Listo para Importmap — sin paso de compilación con Node.js
  • Tailwind CSS — utility-first, sin hojas de estilo personalizadas
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 clásico o ViewComponent — tú eliges

Mismo estilo, mismo comportamiento, diferente arquitectura. Elige lo que mejor funcione para tu equipo.

Classic

Parciales ERB + Stimulus

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

Parciales Rails estándar con variables locales. Insértalos en cualquier vista.

ViewComponent

Clases Ruby + slots

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

Interfaces tipadas, slots de contenido y objetos Ruby testeables.

railskit / components
Repositorio privado
accordion/
tabs/
modal/
README.md
Ruby JavaScript ERB

Código fuente completo en GitHub

Recibe una invitación a un repositorio privado de GitHub con el código fuente de cada componente. Clónalo, haz fork, navega el historial — es tuyo.

  • Acceso al repo privado — invitación enviada después de la compra
  • Historial de versiones completo — rastrea cambios entre versiones
  • Actualiza con pull — git pull para obtener los últimos componentes

Accesible por defecto

Cada componente sigue los patrones WAI-ARIA y está probado con navegación por teclado. La accesibilidad no es un extra.

Navegación por Teclado

Flechas, Tab, Escape. Cada componente interactivo es completamente operable por teclado.

Patrones ARIA

Roles, estados y etiquetas apropiados siguiendo las prácticas de autoría WAI-ARIA.

Modo Oscuro

Soporte completo para modo oscuro con variantes dark: de Tailwind en cada componente.

Gestión del Foco

Anillos de foco visibles, captura de foco en modales y diálogos, y orden de tabulación correcto.

Precios simples y transparentes

Un solo pago. Acceso de por vida. Sin suscripciones.

$149

pago único

  • Todos los componentes actuales y futuros
  • Acceso al repositorio privado de GitHub
  • Actualizaciones de por vida sin costo adicional
  • Licencia MIT — úsalo donde quieras

Pago seguro con Stripe

Empieza a construir con RailsKit

78+ componentes listos para tu aplicación Rails. Un solo pago, acceso de por vida.

Ver Componentes