Pro component

Slideover Components

Slide-in panels that overlay content from the edge of the screen. Perfect for navigation menus, forms, filters, and contextual information.

Installation

1. Stimulus Controller Setup

Start by adding the following controller to your project:

This code is available to Pro users only.

This code is available to Pro users only. 

// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!

class SecretMessage {
  constructor() {
    this.message = "Thanks for checking out Rails Blocks!";
    this.compliment = "You're awesome!";
  }

  reveal() {
    console.log(this.message);
    return this.compliment;
  }
}

const secret = new SecretMessage();
secret.reveal();

2. Custom CSS

Here are the custom CSS classes that we used on Rails Blocks to style the slideover components. You can copy and paste these into your own CSS file to style & personalize your slideovers.

This code is available to Pro users only.

This code is available to Pro users only. 

/* Hey curious person! */
/* You seem to be sneaking around the code... */
/* I hope you're enjoying the components! */
/* Have a great day! */
.secret-message {
  /* Thanks for checking out Rails Blocks! */
  opacity: 0.7;
  transform: scale(0.95);
  filter: blur(2px);
}

.awesome-btn:hover {
  /* You're awesome! */
  animation: wiggle 0.5s ease-in-out;
}

Examples

Right Slideover

A slideover panel that slides in from the right edge of the screen.

Right Slideover

This is a right slideover panel that slides in from the right edge of the screen.

Perfect for forms, details views, or secondary navigation.
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Left Slideover

A slideover panel that slides in from the left edge of the screen.

Left Slideover

This is a left slideover panel that slides in from the left edge of the screen.

Great for navigation menus, filters, or settings panels.
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Top Slideover

A slideover panel that slides down from the top of the screen.

Top Slideover

This is a top slideover panel that slides down from the top of the screen.

Ideal for notifications, search interfaces, or quick actions.
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Bottom Slideover

A slideover panel that slides up from the bottom of the screen.

Bottom Slideover

This is a bottom slideover panel that slides up from the bottom of the screen.

Perfect for mobile-style action sheets, product details, or contextual options.
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Lazy Loading Slideover

A slideover that loads its content only when opened, improving performance for heavy content. Uses data-slideover-lazy-load-value="true".

Loading settings...
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Turbo Slideover

A modal that loads content from the server using Turbo Frames. Uses data-modal-lazy-load-value="true" & data-modal-turbo-frame-src-value="<%= modal_content_path %>".

Loading from server...
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>
This code is available to Pro users only.

This code is available to Pro users only. 

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal
This code is available to Pro users only.

This code is available to Pro users only. 

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal

Nested Slideovers

A slideover that can open another slideover from within it. Useful for multi-level navigation, detailed views, or sub-forms within slideovers.

Parent Slideover

This is the parent slideover. You can open another slideover from within this one by clicking the button below.

Example Use Cases:

  • Multi-level navigation menus
  • Detailed views within filters
  • Settings with sub-categories
  • Form wizards with sub-forms

Nested Slideover

This slideover was opened from within another slideover. Notice how both slideovers can coexist, with the nested one appearing from the opposite side.

Design Tip

The nested slideover has a higher z-index (z-[60]) and slides from the opposite direction to create visual hierarchy.

Z-Index Management

Parent: z-50, Nested: z-[60]

Scrollbar Compensation

Shared counter ensures proper handling

Pro tip: You can also mix modals and slideovers. Try opening a modal from this slideover or vice versa!

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Configuration

The slideover component is powered by a Stimulus controller that provides smooth animations, backdrop click handling, and Turbo integration.

Controller Setup

Basic slideover structure with required data attributes:

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Lazy Loading

Enable lazy loading to improve performance by loading content only when the slideover is opened:

Template-based Lazy Loading

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Turbo Frame Lazy Loading

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Configuration Values

Prop Description Type Default
open
Controls whether the slideover is open on initial load Boolean false
lazyLoad
Whether to load slideover content only when opened Boolean false
turboFrameSrc
URL for Turbo Frame lazy loading String ""

Targets

Target Description Required
dialog
The dialog element that contains the slideover panel Required
template
Template element for lazy loading content Optional

Actions

Action Description Usage
show
Opens the slideover panel data-action="slideover#show:prevent"
hide
Closes the slideover panel with animations data-action="slideover#hide:prevent"
backdropClose
Closes the slideover when clicking outside the panel data-action="mousedown->slideover#backdropClose"
open
Alias for show method data-action="slideover#open:prevent"
close
Alias for hide method data-action="slideover#close:prevent"

CSS Classes

Position the slideover panel using these CSS classes on the dialog element:

Direction Class Description
Right (Default) slideover-right Slides in from the right edge of the screen
Left slideover-left Slides in from the left edge of the screen
Top slideover-top Slides down from the top of the screen
Bottom slideover-bottom Slides up from the bottom of the screen

Key Features

  • Native Dialog Element: Uses the HTML dialog element for better accessibility and browser support
  • Smooth Animations: CSS-based slide and fade animations with closing state handling
  • Backdrop Click: Closes when clicking outside the panel content
  • Turbo Integration: Automatically closes before Turbo caches the page
  • Body Scroll Lock: Prevents body scrolling when slideover is open
  • Lazy Loading: Load content only when slideover is opened for better performance
  • Turbo Frame Support: Load slideover content from server using Turbo Frames

Accessibility Features

  • Focus Management: Uses native dialog focus trapping
  • Screen Reader Support: Proper ARIA attributes with close button labels
  • Keyboard Navigation: ESC key closes the slideover (native dialog behavior)

Usage Notes

  • The dialog element must have both slideover and a direction class (e.g., slideover-right)
  • Use :prevent modifier on actions to prevent default link/button behavior
  • The controller handles animation cleanup to ensure smooth closing transitions
  • Content inside the dialog should be wrapped in a container div for proper styling
Select
Switch

Table of contents

Get notified when new components come out