78以上の本番対応コンポーネント

Rails用コンポーネントライブラリ

Stimulus、Turbo、Tailwindで構築された美しくアクセシブルなコンポーネント。依存関係なし、ロックインなし。コピーして、貼り付けて、カスタマイズするだけ。

コンポーネントを見る
Rails 8
ViewComponent
WCAG 2.1
GitHub アクセス

実際に見てみましょう

すべてのコンポーネントは2つのフォーマットで提供されます — プロジェクトに合ったものを選んでください。

タブコンポーネント アンダーライン

Railsアプリケーション向けの本番対応コンポーネント。StimulusコントローラーとTailwind CSSで構築。

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

Rails専用にゼロから構築

Reactの移植ではありません。フレームワーク非依存でもありません。すべてのコンポーネントはHotwireを使ったサーバーレンダリングのRailsアプリケーション向けに専用設計されています。

  • Stimulusコントローラー すべてのインタラクティブな動作に
  • Turbo互換 — FramesとStreamsで動作
  • Importmap対応 — Node.jsのビルドステップ不要
  • Tailwind CSS — ユーティリティファースト、カスタムスタイルシート不要
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かViewComponent — お好みで

同じスタイリング、同じ動作、異なるアーキテクチャ。チームに合ったものを選んでください。

Classic

ERBパーシャル + Stimulus

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

ローカル変数を使った標準的なRailsパーシャル。どのビューにもそのまま組み込めます。

ViewComponent

Rubyクラス + スロット

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

型付きインターフェース、コンテンツスロット、テスト可能なRubyオブジェクト。

railskit / components
プライベートリポジトリ
accordion/
tabs/
modal/
README.md
Ruby JavaScript ERB

GitHubで完全なソースコード

すべてのコンポーネントのソースコードが入ったプライベートGitHubリポジトリに招待されます。クローン、フォーク、履歴の閲覧 — すべてあなたのものです。

  • プライベートリポジトリアクセス — 購入後に招待を送信
  • 完全なバージョン履歴 — リリース間の変更を追跡
  • 更新の取得 — git pullで最新のコンポーネントを取得

デフォルトでアクセシブル

すべてのコンポーネントはWAI-ARIAパターンに従い、キーボードナビゲーションでテストされています。アクセシビリティは後付けではありません。

キーボードナビゲーション

矢印キー、Tab、Escape。すべてのインタラクティブなコンポーネントは完全にキーボード操作可能です。

ARIAパターン

WAI-ARIAオーサリングプラクティスに従った適切なロール、ステート、ラベル。

ダークモード

すべてのコンポーネントでTailwind dark: バリアントによる完全なダークモード対応。

フォーカス管理

可視フォーカスリング、モーダルやダイアログでのフォーカストラップ、適切なタブ順序。

シンプルで透明な料金

一回のお支払い。永久アクセス。サブスクリプションなし。

$149

一回払い

  • 現在および将来のすべてのコンポーネント
  • プライベートGitHubリポジトリアクセス
  • 追加費用なしの永久アップデート
  • MITライセンス — どこでも使用可能

Stripeによる安全な決済

RailsKitで構築を始めましょう

78以上のコンポーネントをRailsアプリにすぐに導入可能。一回のお支払いで永久アクセス。

コンポーネントを見る