Component playground

Get a better idea of how our components work by exploring our live playground.

  1. Step 1Find a component

    Every component is embedded live directly on the page, and you can even see what they look like at different breakpoints by dragging the slider on the right.

  2. Step 2Copy the snippet

    Click the "Code" tab to see the code for a component and grab the part that you need, or click the clipboard button to quickly copy the entire snippet in one step.

  3. Step 3Make it yours

    Every component is built entirely out of Tailwind utility classes, so you can easily dive in and adjust anything you want to better fit your use case.

Images provided by Ugmonk

Images provided by Ugmonk

Images provided by Ugmonk

Images provided by Ugmonk

Images provided by Ugmonk and QWSTION

Images provided by QWSTION

Images provided by Ugmonk

Images provided by QWSTION

Images provided by Ugmonk