Cherry Rails Component System

A modern ViewComponent design system with BEM CSS, design tokens, and atomic composition.

Features

Component Library

Browse 5+ production-ready ViewComponents with comprehensive documentation and interactive previews.

BEM + Design Tokens

Semantic CSS using BEM naming convention with GitHub Primer-inspired design tokens.

Atomic Composition

Build complex components by composing simpler, reusable atomic components (RubyUI approach).

Interactive Playground

Test components with live editable parameters using Lookbook's preview system.

Sample Components

A quick preview of some components. Visit Lookbook to explore all components and their variants.

Buttons

Avatars

SM MD LG

Messages

Alice Hey! How're you?
Bob Fine, and you?