A comprehensive collection of modern, production-ready UI components built with Rails, Tailwind CSS, and Stimulus. Perfect for developers who want beautiful, accessible components without the complexity of heavy JavaScript frameworks.
- Basic Components: Buttons, Badges, Avatars
- Layout Components: Cards, Breadcrumbs, Tabs, Accordions
- Interactive Components: Alerts, Modals, Popovers, Toasts
- Data Components: Tables with sorting/filtering, Progress bars
- Form Components: Inputs, Selects, Checkboxes, Validation states
- Navigation Components: Breadcrumbs, Pagination
- Rails 8.0.2 with latest features
- ViewComponent for clean, testable components
- Tailwind CSS for utility-first styling
- Stimulus for lightweight JavaScript interactions
- Turbo for seamless page updates
- Solid Queue/Cache/Cable for production infrastructure
- Copy-paste ready code snippets
- Interactive examples with live demos
- Comprehensive documentation for each component
- Responsive design out of the box
- Accessibility compliant components
- TypeScript-ready Stimulus controllers
- Docker support with optimized Dockerfile
- Kamal deployment configuration
- Security headers and CSRF protection
- Performance optimized with caching
- Health checks and monitoring ready
- Ruby 3.4.1 or higher
- Rails 8.0 or higher
- Node.js 18+ (for Tailwind CSS)
- SQLite3
- Clone the repository
git clone https://github.com/yourusername/tailview-ui.git
cd tailview-ui- Install dependencies
bundle install
npm install- Setup the database
rails db:create
rails db:migrate- Start the development server
rails server- Visit the application Open http://localhost:3000 in your browser
<!-- Copy this button code into your Rails view -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Click me
</button><!-- In your view -->
<%= render AlertComponent.new(
variant: :success,
title: "Success!",
message: "Your action was completed successfully.",
dismissible: true
) %><!-- Add interactivity -->
<div data-controller="alert" data-alert-auto-dismiss-value="5000">
<%= render AlertComponent.new(variant: :info, message: "Auto-dismissing alert") %>
</div>| Component | Description | Example |
|---|---|---|
| Buttons | Various button styles and states | View Examples |
| Alerts | Success, error, warning, info notifications | View Examples |
| Cards | Content containers with headers/footers | View Examples |
| Tables | Data tables with sorting and filtering | View Examples |
| Modals | Overlay dialogs and popups | View Examples |
| Forms | Input fields and form controls | View Examples |
| Tabs | Tabbed content organization | View Examples |
| Accordions | Collapsible content sections | View Examples |
| Badges | Status indicators and labels | View Examples |
| Avatars | User profile images and initials | View Examples |
| Toasts | Toast notifications and messages | View Examples |
| Popovers | Contextual tooltips and hints | View Examples |
| Breadcrumbs | Navigation breadcrumb trails | View Examples |
The project uses Tailwind CSS with a custom configuration. You can modify config/tailwind.config.js to customize colors, spacing, and other design tokens.
All components are built with ViewComponent, making them easy to customize:
# app/components/custom_button_component.rb
class CustomButtonComponent < ButtonComponent
def initialize(variant: :primary, **options)
super(variant: variant, **options)
end
private
def button_classes
# Override default classes
"custom-button #{super}"
end
endComponents support multiple color variants:
- Primary: Blue theme
- Success: Green theme
- Warning: Yellow theme
- Error: Red theme
- Info: Blue theme
- Neutral: Gray theme
# Run all tests
rails test
# Run specific test files
rails test test/components/alert_component_test.rb
# Run with coverage
COVERAGE=true rails test- Component Tests: Comprehensive test coverage for all ViewComponents
- Controller Tests: Full test coverage for all controllers
- Integration Tests: End-to-end testing for user workflows
- System Tests: Browser-based testing with Capybara
# Build the image
docker build -t tailview-ui .
# Run the container
docker run -d -p 80:80 -e RAILS_MASTER_KEY=<your-key> tailview-ui# Deploy to production
kamal deploy
# Deploy with specific environment
kamal deploy -d production# Required for production
RAILS_MASTER_KEY=your_master_key
RAILS_ENV=production
# Optional
RAILS_LOG_LEVEL=info
WEB_CONCURRENCY=2
JOB_CONCURRENCY=3- Component Guide - Detailed component documentation
- API Reference - Component API documentation
- Guidelines - Development and contribution guidelines
- Examples - Real-world usage examples
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Add tests for your changes
- Run the test suite:
rails test - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow Rails conventions
- Use RuboCop for code formatting
- Write tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Rails Team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
- Hotwire for Stimulus and Turbo
- ViewComponent for component architecture
- Contributors who help make this project better
- Documentation: View Documentation
- Issues: Report Issues
- Discussions: Join Discussions
- Email: support@tailview-ui.com
Built with ❤️ using Rails, Tailwind CSS, and Stimulus