Components

Flash message (notification) components with Tailwind CSS

Rails Designer’s NotificationComponent works tightly with Rails’ flash mechanism. Allowing you to show simple text messages to more advanced notifications that include actions. This component works a bit different as configuration is done by adding attributes to the flash object, eg. flash[:notice] {message: 'Password change successful'}. Position of the notification can be any of the four corners. Have an action that takes some time? Show a spinner or a progress bar to indicate the remaining running time.

  • Integrates with Rails' flash mechanism

  • Basic # Get this component

    • Password change successful

  • Basic with icon # Get this component

    Next to `warning`, also support for `success` and `alert`
    • Backup completed, but with warnings

  • Basic with icon and description # Get this component

    • Upload Failed: 'image.png'

      The upload of 'image.png' was unsuccessful. Please try again or check your file format.

  • Basic with icon and dark theme # Get this component

    • Profile update confirmed

  • With button, horizontal # Get this component

    • File 'report.docx' uploaded successfully

  • With link, horizontal # Get this component

    • File 'report.docx' uploaded successfully

  • With two buttons, vertical # Get this component

    • New tutorial

      'Getting Started with Rails Designer' was just added

  • With two buttons, horizontal # Get this component

    • Suspicious Login Attempt

      We've prevented a login from an unrecognized source.

  • With two links, horizontal # Get this component

    • Suspicious Login Attempt

      We've prevented a login from an unrecognized source.

  • Undoable action (for 10 seconds) # Get this component

    • Your message was deleted

  • Infinite, with spinner indicator # Get this component

    • Just a second, we’re finalizing things

  • With loading indicator (for 30 seconds) # Get this component

    • Setting things up for you… almost there!

The library of components is continuously evolving, with new components added regularly. See the roadmap for a glimpse of future enhancements, and check out the changelog for the latest additions and updates.

UI components for Ruby on Rails apps

$ 129 one-time
payment

Get Access

  • One-time Payment

  • Access to the Entire Library

  • Built for Ruby on Rails (inc. Rails 8)

  • Designed with Tailwind CSS and Enhanced with Hotwire

  • Updates for 12 months