78+ componentes prontos para produção

A biblioteca de componentes para Rails

Componentes bonitos e acessíveis feitos com Stimulus, Turbo e Tailwind. Sem dependências, sem lock-in. Basta copiar, colar e personalizar.

Explorar Componentes
Rails 8
ViewComponent
WCAG 2.1
Acesso ao GitHub

Veja em ação

Cada componente é enviado em dois formatos — escolha o que se encaixa no seu projeto.

Componente Tabs Underline

Componentes prontos para produção em aplicações Rails. Feitos com controladores 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" },
      ]
    } %>

Construído do zero para Rails

Não é um port de React. Não é agnóstico de framework. Cada componente é feito especificamente para aplicações Rails renderizadas no servidor com Hotwire.

  • Controladores Stimulus para todo comportamento interativo
  • Compatível com Turbo — funciona com Frames e Streams
  • Pronto para Importmap — sem necessidade de build com Node.js
  • Tailwind CSS — utility-first, sem folhas de estilo customizadas
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ássico ou ViewComponent — você escolhe

Mesma estilização, mesmo comportamento, arquitetura diferente. Escolha o que se encaixa na sua equipe.

Clássico

Partials ERB + Stimulus

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

Partials Rails padrão com variáveis locais. Insira em qualquer view.

ViewComponent

Classes Ruby + slots

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

Interfaces tipadas, slots de conteúdo e objetos Ruby testáveis.

railskit / components
Repositório privado
accordion/
tabs/
modal/
README.md
Ruby JavaScript ERB

Código-fonte completo no GitHub

Receba um convite para um repositório privado no GitHub com o código-fonte de cada componente. Clone, faça fork, navegue pelo histórico — é seu.

  • Acesso ao repositório privado — convite enviado após a compra
  • Histórico completo de versões — acompanhe mudanças entre releases
  • Puxe atualizações — git pull para obter os componentes mais recentes

Acessível por padrão

Cada componente segue os padrões WAI-ARIA e é testado com navegação por teclado. Acessibilidade não é algo secundário.

Navegação por Teclado

Setas, Tab, Escape. Cada componente interativo é totalmente operável pelo teclado.

Padrões ARIA

Roles, estados e labels adequados seguindo as práticas de autoria WAI-ARIA.

Modo Escuro

Suporte completo a modo escuro com variantes Tailwind dark: em cada componente.

Gerenciamento de Foco

Anéis de foco visíveis, captura de foco em modais e diálogos, e ordem de tabulação adequada.

Preço simples e transparente

Um pagamento. Acesso vitalício. Sem assinaturas.

$149

pagamento único

  • Todos os componentes atuais e futuros
  • Acesso ao repositório privado no GitHub
  • Atualizações vitalícias sem custo adicional
  • Licença MIT — use em qualquer lugar

Checkout seguro fornecido por Stripe

Comece a construir com RailsKit

78+ componentes prontos para usar no seu app Rails. Um pagamento, acesso vitalício.

Explorar Componentes