Navigation using Stimulus

The navigation collapses on smaller screens and comes with the option to add a class class on scroll.

Form components

Inline form

Buttons

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)

Buttons

Sign up/log in form

Cards

Kate Bush

Front end Engineer

email

Kate Bush

I create things with Rails, Tailwind and Stimulus

459 photos

320k followers

Pills

Loaders / spinners

Dropdown using Stimulus

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.

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.

Testimonials

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

Jae Gwozdz

@jaegwozdz

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

Mauricio Summerlin

@mauricio

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

Alita Filkey

@alita_f

Grid

A basic grid can easily be created using flexbox

Tables

Comments / messages

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

Not Drew H. 2 days ago

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

Kate Bush 4 days ago

🎵 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…

Pagination

Progress bars

Progress bar with amount

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.