20% Summer Sale Discount ☀️

Learn more

UI components built with Tailwind and Stimulus

Sjabloon comes with many UI components used in almost every SaaS applications and three custom-designed homepages and an user dashboard. All these components are built using Tailwind's utility classes. With TailwindCss as the basis everything is really easy and quick to modify to fit your needs. StimulusJS is used where mentioned.

close minimise maximise
<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "card p-4" }) do |f| %> <h1 class="mt-2 mb-6 text-xl">Log in</h1> <div class="field"> <%= f.label :email %> <%= f.email_field :email, autocomplete: "email", class: "input" %> </div> <div class="field"> <%= f.label :password %> <%= f.password_field :password, autocomplete: "current-password", class: "input" %> </div> <div class="buttons"> <%= f.submit "Log in", class: "btn btn--primary" %> </div> <% end %>

Form components

Inline form

Checkbox- / radio-buttons


Stylish checkbox- / radio-buttons

Form validation using Stimulus

The form can only be submitted when all required fields are filled (uses the HTML5 regex).

Switches (checkbox)

Sign up/log in form

Create an account

Welcome to sjabloon

Already have any account?

Log in

Create an account


Example card with a white background.

Do not go gentle into that good night…

Do not go gentle into that good night

Old age should burn and rave at close of day; Rage, rage against the dying of the light.

Dylan Thomas, 1914 - 1953

Kate Bush

Front end Engineer


Kate Bush

I create things with Rails, Tailwind and Stimulus

459 photos


Coming soon New Update

Announcements dropdown using Stimulus

The announcements dropdown shows the last three announcements in a dropdown. Similar like Headway and Beamer. It is feeded with the JSON response coming from the AnnouncementsController. It's a nice example on how to use JSON to render an UI component (just like the "big" frameworks).

Dropzone using Stimulus

The dropzone component uses dropzone.js to allow for files (images, documents, etc.) to be dropped onto an element after which it's uploaded (needs ActiveStorage in your app). Feature is disabled on this site.

Drag here to upload or click to browse

2 MB file size maximum. Maximum of five files.

Modals using Stimulus

The position of the modal can easily be changed by changing the flex properties on .modal-wrapper. The modal takes multiple arguments data-modal-interval-time-in-seconds='10' to show the modal after 10 seconds. And data-modal-stop-scroll=false to allow the page to scroll (default is true).

Collapsible/Accordion using Stimulus

  • This can be a question?
    And this would be the answer to said question. How smart!
  • Or you could place other content here too.
    And this content would linked to that. Makes sense, right?
  • The uses cases are near endless. It's up to you.
    The same with the content here. What are you gonna use this UI component for?

Tabs using Stimulus

Tabs come by default with a dark and light theme.

Heading 1
Heading 2
Heading 3

Heading 1

This is some text in this panel

Heading 2

This is some text in this panel

Heading 3

This is some text in this panel

Heading 1
Heading 2
Heading 3

Heading 1

This is some text in this panel

Heading 2

This is some text in this panel

Heading 3

This is some text in this panel


“Selfies direct trade swag next level, pickled photo booth vexillologist kombucha subway tile ennui.”

avatar of this author

Jae Gwozdz


“Semiotics paleo tofu tacos viral shoreditch ennui swag. Retro pok pok hammock woke distillery.”

avatar of this author

Mauricio Summerlin


“Twee cardigan hoodie drinking vinegar, lo-fi mustache bushwick hell of brooklyn etsy.”

avatar of this author

Alita Filkey



A basic grid can easily be created using flexbox



# first last handle
1 mathias inga
2 franciska fleurette
3 kostadin abeba

Comments / messages

I have a few qualms with this Rails SaaS starter kit. 😛

avatar of this author

Not Drew H. 2 days ago

🎵 Out on the wiley, windy moors. We'd roll and fall in green.

avatar of this author

Kate Bush 4 days ago

🎵 You had a temper like my jealousy. Too hot, too greedy.

avatar of this author

Kate Bush 4 days ago

Flash messages using Stimulus

Flash messages are a built in function from Rails, communicating action were either successful or not. Sjabloon comes with various (animated) styles you can change to match your needs with ease.

  • I am the default flash message style
  • Success That went really well
  • Alert Looks like something went wrong
  • Success! Houston, we have lift off.
  • Alert! Houston, we have a problem…

Progress bars

Progress bar with amount



Sjabloon comes with various little animations you can add dynamically (eg. Javascript), on :hover, or on :focus. These animations can add just that little bit extra to an otherwise static UI/UX.

Slide Up hover for preview

Slide Down hover for preview

Slide Left hover for preview

Slide Right hover for preview

FadeIn hover for preview

FadeOut hover for preview

ZoomIn hover for preview

ZoomOut hover for preview

Heartbeat hover for preview

A Rails SaaS starter kit to build successful products

Get started

30+ developers, companies and freelancers bought Sjabloon in the last 4 weeks