DEV Community

Cover image for Tailwind Pricing Components Spotlight
Sławomir Pawlak for Shuffle Editor

Posted on • Originally published at shuffle.dev

Tailwind Pricing Components Spotlight

A post about how to build a good pricing component for a website

We'll go through some examples from over 78 (!) different versions of pricing components for Tailwind CSS available in the Shuffle Editor libraries.

Vertical and horizontal split in pricing component

Zospace UI by Shuffle - a vertical split with a clear suggestion of which package to choose. Highlighting one of the plans in a clear way is a common requirement when creating a price list.

Vertical split

In this case, it is not done with text, but clearly communicated visually. It is impossible not to pay attention to the middle plan.

Sometimes, however, there isn't as much text and features to make it worthwhile to make columns. Then the variants can be placed horizontally, giving more space for the price. The second (of five) pricing variant within the Zospace UI by Shuffle library.

Horizontal split

See all Zospace UI in our Tailwind components gallery with code ready to copy* and use in your project. You can see free code examples without logging in. While copying, take note, that you'll probably need to use our editor to get config files and graphic assets for components.

Code example view of components

Using Icons in pricing components design

Things get a little more complicated when there are more plans.

Here Uinel UI by Shuffle deftly incorporates 4 possible plans to choose from, additionally giving each of them an icon. This makes it easier to instinctively see the difference between them.

pricing with icons

This is one of the 6 pricing variations in this library. Check out all of them here: Uinel UI

Add switch when you need more options on one screen

Flex is an amazing library that has a staggering number of stylistic variations.

Below is one of the 8 basic pricing components. Each of these eight has 5 style variants.

pricing with annual/monthly switch

Here there is also a montly/annualy button that allows you to blend in the payment type.

Highlight CTA with colors

Pstls UI operates with delicate pastel colors, which allows using black as an eye-catching color.

This allows it to act as both a CTA and to highlight a key component.

component with highlighted colors

Backlight prefered option

The Bold UI deserves its name. The extravagance of the font, backlight, and fine lines separating the plans allows you to create a truly different website.

This makes it perfect for unconventional projects that want to stand out.

pricing component with backlight

Start from basic design and add your own style

Plain UI is a library that allows you to set your own style.

Therefore, its components have a minimalist look and neutral colors.

This way, you can easily give them character without fighting the designer's intentions.

plain component with accessibility

These are just a few select examples. Check out the 2700+ components for Tailwind CSS in the Shuffle editor. Each one has hundreds of matching components that will allow you to build a beautiful site in minutes.

If you want, you can also find examples of our designs in different frameworks. We have Bootstrap Components, Bulma Components, and Material-UI Components available both in gallery or in visual editor.

Discussion (0)