Tailwind Graphs Components (67)

Graphs from Trizzle

Money Flow Line Chart Card

A dark-themed card titled Money Flow displaying a two-series line chart comparing Income (blue) and Expenses (yellow) over a time range selected from a 7 Days dropdown in the top right. The legend sits beside the dropdown above the chart area.

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
        <div class="w-auto px-4 mb-4">
          <h4 class="text-lg text-gray-200 font-bold tracking-wide">Money Flow</h4>
        </div>
        <div class="w-full sm:w-auto px-4 mb-4">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center mr-4">
              <span class="inline-block w-3 h-1 mr-2 bg-blue-500 rounded-full"></span>
              <span class="text-xs font-semibold text-gray-100">Income</span>
            </div>
            <div class="flex items-center mr-6">
              <span class="inline-block w-3 h-1 mr-2 bg-yellow-500 rounded-full"></span>
              <span class="text-xs font-semibold text-gray-100">Expenses</span>
            </div>
            <div class="w-full sm:w-auto mt-4 sm:mt-0">
              <div class="relative inline-block max-w-max bg-gray-600 rounded-xl">
                <select class="relative py-3 pl-4 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
                  <option value="">7 Days</option>
                  <option value="">30 Days</option>
                </select>
                <span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
                  <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart mt-8 mb-3" data-type="chart-line" style="min-height: 200px;"></div>
    </div>
  </div>
</section>

Graphs from Artemis Dashboard

Tailwind CSS

Artemis Dashboard

Daily Visitors Bar Chart Card with Month and Period Dropdowns

A white card titled Daily Visitors showing a vertical bar chart of visitor counts for each day of March, with a y-axis from 0 to 500 and dropdown selectors for month and period in the top right. The chart uses purple rounded bars on light gridlines, making it a dashboard analytics widget.

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="bg-white rounded">
      <div class="flex flex-wrap items-center py-5 px-6">
        <h3 class="w-full md:w-auto mb-4 md:mb-0 text-2xl font-bold">Daily Visitiors</h3>
        <div class="ml-auto inline-block py-2 px-3 border rounded text-xs text-gray-500">
          <select class="pr-1" name="" id="">
            <option value="1">March</option>
            <option value="1">June</option>
            <option value="1">September</option>
          </select>
        </div>
        <div class="ml-2 inline-block py-2 px-3 border rounded text-xs text-gray-500">
          <select class="pr-1" name="" id="">
            <option value="1">Daily</option>
            <option value="1">Weekly</option>
            <option value="1">Monthly</option>
          </select>
        </div>
      </div>
      <div class="chart p-6" data-type="columns"></div>
    </div>
  </div>
</section>

Graphs from Flex

Tailwind CSS

Flex

Task distribution pie chart card with new and completed task stats

A white card titled Task distribution showing a blue pie chart split into Frontend, Backend, and Management segments with a legend below. A footer row displays two summary metrics: 1024 new tasks and 442 completed tasks.

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto h-full border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
      <div class="p-6 pb-18 border-b border-coolGray-100">
        <h2 class="mb-18 text-coolGray-900 text-lg font-semibold">Task distribution</h2>
        <div class="chart-chart1-pie"></div>
      </div>
      <div class="flex flex-wrap divide-y md:divide-y-0 md:divide-x divide-coolGray-100 text-center">
        <div class="w-full md:w-1/2">
          <div class="p-6">
            <h3 class="text-2xl text-coolGray-900 font-semibold">1024</h3>
            <p class="text-xs text-coolGray-500 font-medium">New tasks</p>
          </div>
        </div>
        <div class="w-full md:w-1/2">
          <div class="p-6">
            <h3 class="text-2xl text-coolGray-900 font-semibold">442</h3>
            <p class="text-xs text-coolGray-500 font-medium">Completed tasks</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Graphs from Uinel

Tailwind CSS

Uinel

Daily Visitors Bar Chart Card with Month and Year Filters

A white card showing a bar chart titled Daily Visitors for November 2021, with one bar per day from 1 to 31 on a 0 to 500 value axis. Two pill-shaped dropdown selectors for month and year sit in the top right of the card.

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 md:px-12 lg:px-20 pt-14 pb-12 sm:pb-16 bg-white rounded-3xl">
      <div class="flex mb-6 sm:mb-12 flex-wrap items-center justify-between">
        <h3 class="mb-8 sm:mb-0 text-xl font-heading font-medium leading-8">Daily Visitors</h3>
        <div class="w-full sm:w-auto">
          <div class="relative inline-block mr-1 text-xxs border-2 border-gray-200 border-opacity-50 rounded-full tracking-wide hover:border-gray-300">
            <svg class="absolute top-1/2 right-0 mr-3 -mt-px" width="5" height="3" viewBox="0 0 5 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.35807 0.115939C4.50534 -0.0386464 4.74336 -0.0386464 4.88955 0.115939C5.03627 0.270525 5.03736 0.520284 4.88955 0.67487L2.76581 2.88406C2.61908 3.03865 2.3816 3.03865 2.23378 2.88406L0.110045 0.67487C-0.0366818 0.520861 -0.0366818 0.270525 0.110045 0.115939C0.257316 -0.0386464 0.49534 -0.0386464 0.641524 0.115939L2.50061 1.92771L4.35807 0.115939Z" fill="#1D1C1D"></path>
            </svg>
            <select class="py-1 pl-3 pr-6 font-bold tracking-wide bg-transparent outline-none appearance-none cursor-pointer" name="" id="">
              <option value="1">NOVEMBER</option>
              <option value="2">DECEMBER</option>
              <option value="3">JANUARY</option>
            </select>
          </div>
          <div class="relative inline-block text-xxs border-2 border-gray-200 border-opacity-50 rounded-full tracking-wide hover:border-gray-300">
            <svg class="absolute top-1/2 right-0 mr-3 -mt-px" width="5" height="3" viewBox="0 0 5 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.35807 0.115939C4.50534 -0.0386464 4.74336 -0.0386464 4.88955 0.115939C5.03627 0.270525 5.03736 0.520284 4.88955 0.67487L2.76581 2.88406C2.61908 3.03865 2.3816 3.03865 2.23378 2.88406L0.110045 0.67487C-0.0366818 0.520861 -0.0366818 0.270525 0.110045 0.115939C0.257316 -0.0386464 0.49534 -0.0386464 0.641524 0.115939L2.50061 1.92771L4.35807 0.115939Z" fill="#1D1C1D"></path>
            </svg>
            <select class="py-1 pl-3 pr-6 font-bold tracking-wide bg-transparent outline-none appearance-none cursor-pointer" name="" id="">
              <option value="1">2021</option>
              <option value="2">2022</option>
              <option value="3">2023</option>
            </select>
          </div>
        </div>
      </div>
      <div class="chart" data-type="columns"></div>
    </div>
  </div>
</section>

Graphs from Dashy

Tailwind CSS

Dashy

Activity Area Chart Card with Weekly Dropdown

A white card containing an Activity title, a 'This week' dropdown selector in the top right, and a smooth blue line area chart plotting daily values from Sunday to Saturday on a 0.0 to 10.0 y-axis. The layout is a single contained card focused on displaying analytics data.

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Activity</h3>
        </div>
        <div class="w-auto p-2">
          <div class="relative h-full overflow-hidden rounded-full">
            <select class="appearance-none py-1.5 pl-3.5 pr-10 text-sm text-neutral-600 font-medium w-full h-full bg-light outline-none cursor-pointer">
              <option value="USD">This week</option>
              <option value="CHF">This month</option>
              <option value="EUR">This year</option>
            </select>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.1673 6L8.50065 10.6667L3.83398 6" stroke="#0C1523" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="chart" data-type="line-graph1"></div>
    </div>
  </div>
</section>

Graphs from Sirius Dashboard

Tailwind CSS

Sirius Dashboard

Three-Up Streaming Metric Stat Cards with Sparkline Charts

A row of three light stat cards showing Twitch-style metrics (subscribers, donations, ranking) with large numeric values, small change indicators, and wave-style area sparkline charts at the bottom of each card. Cards use green, blue, and purple accent colors respectively.

<section class="py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <div class="mx-auto border border-gray-200 shadow-md rounded-2xl overflow-hidden">
                    <div class="flex justify-end">
                        <a class="block mt-5 mr-5" href="#">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.5 11.5C14.3284 11.5 15 10.8284 15 10C15 9.17157 14.3284 8.5 13.5 8.5C12.6716 8.5 12 9.17157 12 10C12 10.8284 12.6716 11.5 13.5 11.5Z" fill="#7A899B"></path>
                            <path d="M6.5 11.5C7.32843 11.5 8 10.8284 8 10C8 9.17157 7.32843 8.5 6.5 8.5C5.67157 8.5 5 9.17157 5 10C5 10.8284 5.67157 11.5 6.5 11.5Z" fill="#7A899B"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="px-8">
                        <span class="flex mb-6 items-center justify-center bg-green-50 rounded-2xl w-10 h-10">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.43291 0L0.35791 2.746V14H3.99991V16H6.32791L8.35791 14H11.4579L15.6369 9.791V0H1.43291ZM14.2089 9.075L11.8209 11.463H7.99991L5.99991 13.493V11.463H2.74591V1.433H14.2089V9.075Z" fill="#4CA899"></path>
                            <path d="M11.8209 4.17902H10.3879V8.35402H11.8209V4.17902Z" fill="#4CA899"></path>
                            <path d="M7.99989 4.17902H6.56689V8.35402H7.99989V4.17902Z" fill="#4CA899"></path>
                            </svg>
                        </span>
                        <h3 class="mb-4 text-blue-900 text-4xl font-semibold">15.6k</h3>
                        <div class="mb-8 flex items-center">
                            <p class="text-gray-500 text-xs font-medium">Subscribers</p>
                            <span class="ml-2 mr-1 inline-block text-green-500">
                            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.27492 0.136213C4.2427 0.0938681 4.20114 0.0595451 4.1535 0.0359186C4.10586 0.0122921 4.05341 0 4.00024 0C3.94708 0 3.89463 0.0122921 3.84699 0.0359186C3.79935 0.0595451 3.75779 0.0938681 3.72557 0.136213L0.0587778 5.47725C0.0244161 5.52737 0.00437491 5.58593 0.000817132 5.64662C-0.00274064 5.70731 0.0103201 5.76782 0.0385898 5.82163C0.0668595 5.87543 0.109265 5.92048 0.161229 5.95191C0.213194 5.98335 0.272744 5.99998 0.333454 6H7.66703C7.72774 5.99998 7.78729 5.98335 7.83926 5.95191C7.89122 5.92048 7.93363 5.87543 7.9619 5.82163C7.99017 5.76782 8.00323 5.70731 7.99967 5.64662C7.99611 5.58593 7.97607 5.52737 7.94171 5.47725L4.27492 0.136213Z" fill="#4CA899"></path>
                            </svg>
                            </span>
                            <p class="text-green-500 text-xs font-medium">5.5%</p>
                        </div>
                    </div>
                    <div class="chart" data-type="area-small" data-variant="green" style="min-height: 100px;"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="mx-auto border border-gray-200 shadow-md rounded-2xl overflow-hidden">
                    <div class="flex justify-end">
                        <a class="block mt-5 mr-5" href="#">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.5 11.5C14.3284 11.5 15 10.8284 15 10C15 9.17157 14.3284 8.5 13.5 8.5C12.6716 8.5 12 9.17157 12 10C12 10.8284 12.6716 11.5 13.5 11.5Z" fill="#7A899B"></path>
                            <path d="M6.5 11.5C7.32843 11.5 8 10.8284 8 10C8 9.17157 7.32843 8.5 6.5 8.5C5.67157 8.5 5 9.17157 5 10C5 10.8284 5.67157 11.5 6.5 11.5Z" fill="#7A899B"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="px-8">
                        <span class="flex mb-6 items-center justify-center bg-blue-50 rounded-2xl w-10 h-10">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.43291 0L0.35791 2.746V14H3.99991V16H6.32791L8.35791 14H11.4579L15.6369 9.791V0H1.43291ZM14.2089 9.075L11.8209 11.463H7.99991L5.99991 13.493V11.463H2.74591V1.433H14.2089V9.075Z" fill="#2796CE"></path>
                            <path d="M11.8209 4.17902H10.3879V8.35402H11.8209V4.17902Z" fill="#2796CE"></path>
                            <path d="M7.99989 4.17902H6.56689V8.35402H7.99989V4.17902Z" fill="#2796CE"></path>
                            </svg>
                        </span>
                        <div class="flex items-start mb-4">
                            <h3 class="text-blue-900 text-4xl font-semibold">3’750</h3>
                            <p class="text-gray-500 font-medium ml-1">$</p>
                        </div>
                        <div class="mb-8 flex items-center">
                            <p class="text-gray-500 text-xs font-medium">Donations</p>
                            <span class="ml-2 mr-1 inline-block text-green-500">
                            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.27492 0.136213C4.2427 0.0938681 4.20114 0.0595451 4.1535 0.0359186C4.10586 0.0122921 4.05341 0 4.00024 0C3.94708 0 3.89463 0.0122921 3.84699 0.0359186C3.79935 0.0595451 3.75779 0.0938681 3.72557 0.136213L0.0587778 5.47725C0.0244161 5.52737 0.00437491 5.58593 0.000817132 5.64662C-0.00274064 5.70731 0.0103201 5.76782 0.0385898 5.82163C0.0668595 5.87543 0.109265 5.92048 0.161229 5.95191C0.213194 5.98335 0.272744 5.99998 0.333454 6H7.66703C7.72774 5.99998 7.78729 5.98335 7.83926 5.95191C7.89122 5.92048 7.93363 5.87543 7.9619 5.82163C7.99017 5.76782 8.00323 5.70731 7.99967 5.64662C7.99611 5.58593 7.97607 5.52737 7.94171 5.47725L4.27492 0.136213Z" fill="#4CA899"></path>
                            </svg>
                            </span>
                            <p class="text-green-500 text-xs font-medium">5.5%</p>
                        </div>
                    </div>
                    <div class="chart" data-type="area-small" data-variant="blue" style="min-height: 100px;"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="mx-auto border border-gray-200 shadow-md rounded-2xl overflow-hidden">
                    <div class="flex justify-end">
                        <a class="block mt-5 mr-5" href="#">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5 11.5C14.3284 11.5 15 10.8284 15 10C15 9.17157 14.3284 8.5 13.5 8.5C12.6716 8.5 12 9.17157 12 10C12 10.8284 12.6716 11.5 13.5 11.5Z" fill="#7A899B"></path>
                                <path d="M6.5 11.5C7.32843 11.5 8 10.8284 8 10C8 9.17157 7.32843 8.5 6.5 8.5C5.67157 8.5 5 9.17157 5 10C5 10.8284 5.67157 11.5 6.5 11.5Z" fill="#7A899B"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="px-8">
                        <span class="flex mb-6 items-center justify-center bg-gray-50 rounded-2xl w-10 h-10">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M1.43291 0L0.35791 2.746V14H3.99991V16H6.32791L8.35791 14H11.4579L15.6369 9.791V0H1.43291ZM14.2089 9.075L11.8209 11.463H7.99991L5.99991 13.493V11.463H2.74591V1.433H14.2089V9.075Z" fill="#5F27CE"></path>
                                <path d="M11.8209 4.17902H10.3879V8.35402H11.8209V4.17902Z" fill="#5F27CE"></path>
                                <path d="M7.99989 4.17902H6.56689V8.35402H7.99989V4.17902Z" fill="#5F27CE"></path>
                            </svg>
                        </span>
                        <div class="flex items-start mb-4">
                            <h3 class="text-blue-900 text-4xl font-semibold">75</h3>
                            <p class="text-gray-500 font-medium ml-1">/ 1560</p>
                        </div>
                        <div class="mb-8 flex items-center">
                            <p class="text-gray-500 text-xs font-medium">Ranking</p>
                            <span class="ml-2 mr-1 inline-block text-red-500">
                                <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3.72532 5.86379C3.75755 5.90613 3.7991 5.94045 3.84675 5.96408C3.89439 5.98771 3.94684 6 4 6C4.05317 6 4.10561 5.98771 4.15326 5.96408C4.2009 5.94045 4.24245 5.90613 4.27468 5.86379L7.94147 0.522754C7.97583 0.472634 7.99587 0.414068 7.99943 0.353377C8.00299 0.292686 7.98992 0.232175 7.96165 0.178373C7.93339 0.124571 7.89098 0.0795221 7.83902 0.0480871C7.78705 0.0166521 7.7275 2.47717e-05 7.66679 -2.91301e-08L0.33321 -6.70252e-07C0.2725 2.412e-05 0.21295 0.0166514 0.160985 0.0480864C0.109021 0.0795214 0.0666161 0.124571 0.0383463 0.178373C0.0100766 0.232175 -0.0029845 0.292686 0.000573175 0.353377C0.00413085 0.414068 0.0241723 0.472633 0.0585341 0.522753L3.72532 5.86379Z" fill="#EB3838"></path>
                                </svg>
                            </span>
                            <p class="text-red-500 text-xs font-medium">#3</p>
                        </div>
                    </div>
                    <div class="chart" data-type="area-small" data-variant="blue" style="min-height: 100px;"></div>
                </div>
            </div>
        </div>
    </div>
</section>

Freedom and clarity in presenting data is a key feature of good desig. Tailwind graphs components allow you to choose how to present data in order to reflect key aspects of the data. It is important to vary the appearance of the data presentation if you show more data. This way you will keep the attention of the recipient and the data will be easier to understand. Choose from line graphs, pie charts, bar graphs, and other types of data visualization.

Don't forget to take a look at our stats, tables and workflows components.

On this subpage, you can browse the different Tailwind graphs component themes that are available in our UI libraries. You will also find many other types of components that will follow a similar style. Each of these libraries has been developed by experienced designers along with our in-house development team.

Get access to all Tailwind graphs components, code and our editor. Test the editor demo for free.

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Tailwind CSS Graphs Components

Framework

UI Library

Components

Graphs from Trizzle

Money Flow Line Chart Card

Graphs from Artemis Dashboard

Daily Visitors Bar Chart Card with Month and Period Dropdowns

Graphs from Flex

Task distribution pie chart card with new and completed task stats

Your next website starts here

Graphs from Uinel

Daily Visitors Bar Chart Card with Month and Year Filters

Graphs from Dashy

Activity Area Chart Card with Weekly Dropdown

Graphs from Sirius Dashboard

Three-Up Streaming Metric Stat Cards with Sparkline Charts

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

Extensions

UI Components

Company

Support

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Graphs Components

Framework

UI Library

Components

Graphs from Trizzle

Money Flow Line Chart Card

Graphs from Artemis Dashboard

Daily Visitors Bar Chart Card with Month and Period Dropdowns

Graphs from Flex

Task distribution pie chart card with new and completed task stats

Your next website starts here

Graphs from Uinel

Daily Visitors Bar Chart Card with Month and Year Filters

Graphs from Dashy

Activity Area Chart Card with Weekly Dropdown

Graphs from Sirius Dashboard

Three-Up Streaming Metric Stat Cards with Sparkline Charts

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support