Tailwind Stimulus Components Examples

View on Github

To view examples locally, run npm install && npm run build && npx serve and then open localhost:3000 in your browser.

Alerts

Dropdowns

When open, you can navigate menu items with Up and Down keys.

Modals

Modals use the <dialog> html element and can be closed with Esc or a button. See the dialog element MDN docs.

This modal dialog has a groovy backdrop!

Slideovers

Slideovers use the <dialog> html element and can be closed with Esc or a button. See the dialog element MDN docs.

This slideover dialog has a groovy backdrop!

Popovers

Hover me
Click me

Tabs

These tabs can be navigated with the keyboard using Left, Right, Home, and End.

Change tab by data-index Change tab by data-id or change by select

Radios as Tabs

Toggle

This is toggleable text...

Color Picker and Preview

A

#