Feature

UI components built with Tailwind and Stimulus

Sjabloon comes with many UI components used in almost every SaaS applications and a fully-designed homepage 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 (can use the html5 pattern 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

Loaders / spinners


Modals using Stimulus

The position of the modal can easily be changed by changing the flex properties on .modal-wrapper.

Collapsible/Accordion using Stimulus

  • This is a one-time payment?
    Yes, you pay once and then get access to Sjabloon and updates and improvements for the next 12 months. You won't be billed automatically after those 12 months.
  • What exactly is a Rails application template?
    Application templates are simple Ruby files containing DSL for adding gems/initializers etc. to your freshly created Rails project or an existing Rails project. To read more about it, head over to the Rails Guides.
  • What do I get? How does it work?
    From your dashboard you can customise the template to fit your needs. It can have many diffent options (authentication, payments, default rails --flags) enabled or disabled.

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. Semiotics cardigan tote bag, banjo readymade man bun iceland VHS ugh brunch sriracha pitchfork.”

avatar of this author

Jae Gwozdz

@jaegwozdz

“Semiotics paleo tofu tacos viral shoreditch ennui swag. Retro pok pok hammock woke distillery mumblecore air plant migas paleo waistcoat. Humblebrag fam chambray next level.”

avatar of this author

Mauricio Summerlin

@mauricio

“Twee cardigan hoodie drinking vinegar, lo-fi mustache bushwick hell of brooklyn etsy. Polaroid food truck cloud bread art party, drinking vinegar normcore literally vape migas forage yr +1 asymmetrical coloring book bitters.”

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 starter kit.

Not Drew Houston, 2 days ago

Out on the wiley, windy moors. We'd roll and fall in green. You had a temper like my jealousy. Too hot, too greedy.

Kate Bush, 4 days ago

Out on the wiley, windy moors. We'd roll and fall in green. You had a temper like my jealousy. Too hot, too greedy.

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%

A Rails SaaS starter kit to focus on your core product

Get started

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