This repository contains Orbital, a demonstration of you can build reusable view components for Ruby on Rails using the ORB Template Language together with TailwindCSS, along with a sample Rails application that showcases how the components and component styles can be imported and used in a real app.
orbital/- The Orbital gem containing view componentsdemo/- A Rails demo application that uses and showcases Orbital components
- Ruby 3.x
- Node.js (for Tailwind CSS processing)
- Bundler gem
Run the following commands to set up the demo application after cloning the repository:
cd demo
bundle install
npm install
# or bun installcd demo
rails serverOpen your browser and navigate to http://localhost:3000 to see the demo application in action.
For development with live CSS reloading:
cd demo
foreman start -f Procfile.devThe Orbital gem includes a variety of demo components:
- Accordion - Collapsible content sections
- Badge - Small status indicators
- Button - Interactive button elements
- Button Group - Grouped button layouts
- Card - Content containers with header, body, and footer
- Checkbox - Form input controls
- Icon - Icon display components
- Image - Responsive image handling
- Navigation Menu - Site navigation components
- Spinner - Loading indicators
- Text - Typography components
- Text Field - Form input fields
- Typography - Text styling utilities
The components are built with Tailwind CSS v4 and can be easily customized through:
- Tailwind Configuration - Modify
tailwind.config.jsin both directories - Component Overrides - Each component accepts custom CSS classes
- Theme Variables - Adjust colors, spacing, and typography through Tailwind's theme system
- Fork the repository
- Create a feature branch
- Make your changes
- Test with the demo application
- Submit a pull request
This project is open source and available under the MIT License.