78+ composants prêts pour la production

La bibliothèque de composants pour Rails

Des composants élégants et accessibles construits avec Stimulus, Turbo et Tailwind. Aucune dépendance, aucun verrouillage. Copiez, collez et personnalisez.

Parcourir les composants
Rails 8
ViewComponent
WCAG 2.1
Accès GitHub

Voyez-le en action

Chaque composant est livré en deux formats — choisissez celui qui convient à votre projet.

Composant Tabs Souligné

Composants prêts pour la production pour les applications Rails. Construits avec des contrôleurs Stimulus et Tailwind CSS.

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

Conçu de A à Z pour Rails

Pas un portage de React. Pas agnostique de framework. Chaque composant est spécialement conçu pour les applications Rails avec rendu serveur et Hotwire.

  • Contrôleurs Stimulus pour tous les comportements interactifs
  • Compatible Turbo — fonctionne avec Frames et Streams
  • Compatible Importmap — aucune étape de build Node.js requise
  • Tailwind CSS — utilitaire d'abord, aucune feuille de style personnalisée
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 classique ou ViewComponent — à vous de choisir

Même style, même comportement, architecture différente. Choisissez ce qui convient à votre équipe.

Classique

Partiels ERB + Stimulus

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

Partiels Rails standards avec des variables locales. À insérer dans n'importe quelle vue.

ViewComponent

Classes Ruby + slots

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

Interfaces typées, slots de contenu et objets Ruby testables.

railskit / components
Dépôt privé
accordion/
tabs/
modal/
README.md
Ruby JavaScript ERB

Code source complet sur GitHub

Recevez une invitation à un dépôt GitHub privé contenant le code source de chaque composant. Clonez-le, forkez-le, parcourez l'historique — il est à vous.

  • Accès au dépôt privé — invitation envoyée après l'achat
  • Historique complet des versions — suivez les modifications entre les versions
  • Récupérer les mises à jour — git pull pour obtenir les derniers composants

Accessible par défaut

Chaque composant suit les modèles WAI-ARIA et est testé avec la navigation au clavier. L'accessibilité n'est pas une réflexion après coup.

Navigation au clavier

Touches fléchées, Tab, Échap. Chaque composant interactif est entièrement utilisable au clavier.

Modèles ARIA

Rôles, états et labels appropriés suivant les pratiques d'écriture WAI-ARIA.

Mode sombre

Support complet du mode sombre avec les variantes Tailwind dark: sur chaque composant.

Gestion du focus

Indicateurs de focus visibles, piégeage du focus dans les modales et dialogues, et ordre de tabulation correct.

Tarification simple et transparente

Un seul paiement. Accès à vie. Aucun abonnement.

149 $

paiement unique

  • Tous les composants actuels et futurs
  • Accès au dépôt GitHub privé
  • Mises à jour à vie sans frais supplémentaires
  • Licence MIT — utilisable partout

Paiement sécurisé par Stripe

Commencez à construire avec RailsKit

78+ composants prêts à intégrer dans votre application Rails. Un seul paiement, accès à vie.

Parcourir les composants