new

Announcing the biggest new release since launch

Learn more
Feature

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

Checkboxes

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

Cards

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

email

Kate Bush

I create things with Rails, Tailwind and Stimulus

459 photos
320k followers

Pills

Coming soon New Update

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

Testimonials

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

avatar of this author

Jae Gwozdz

@jaegwozdz

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

avatar of this author

Mauricio Summerlin

@mauricio

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

avatar of this author

Alita Filkey

@alita_f

Grid

A basic grid can easily be created using flexbox

col
col
col
col
col
col
col
col
col
col
col

Tables

# first last handle
1 mathias inga mathias@ingamail.com
2 franciska fleurette franciska@fleurettemail.com
3 kostadin abeba kostadin@abebamail.com

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

75%

Animations

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