Feature

UI components built with Tailwind and Stimulus

Sjabloon comes with many UI components used in almost every SaaS applications and a fully-designed user dashboard. All these components are built using Tailwind's utility classes. With Tailwind as the basis everything is really easy and quick to modify to fit your needs. Stimulus 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 %>

Navigation using Stimulus

Form components

Inline form

Buttons

Button Primary Button Secondary Button Outline Text Button

Checkbox- / radio-buttons

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

Loading…

Loading…

Dropdown using Stimulus

Modals using Stimulus

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

Collapsible/Accordion using Stimulus

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

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.

Pagination

Progress bars

Progress bar with amount

75%

A Rails SaaS starter kit to focus on your core product

Get started

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