Dashboard Parts: The example dashboard screen, light — 1 / 7The example dashboard screen, light. Every preview on this page is a render of the files in the ZIP.

#FFFFFF#E1E2DB#BDC4BD#658C7D

PAL-UI-01 / UI kit / Small

Dashboard Parts

The small bits every dashboard needs, as copy-paste HTML.

components: 40
groups: 9
SVG frames: 20

Pick a licence.

PersonalA practice dashboard or a portfolio piece. Nothing earns money.$19CommercialA client's admin panel, or your own free internal tool.$39ExtendedThe interface of a paid SaaS or app that your customers pay to use.$99

What each licence allows
	Personal	Commercial	Extended
Who can use it	One person	Up to 5 team members	Up to 25 team members
Personal projects	Yes	Yes	Yes
Client projects	No	Yes, unlimited	Yes, unlimited
Free end products	No	Yes	Yes
Products where users pay	No	No	Yes
Credit required	None	None	None

None of the licences let you resell or share the files, upload them to a marketplace, or use them to train AI models. Compare licences in full

Need a bigger licence later? Pay the difference.

Sample content only. The page is the shipped HTML, nothing added.

Instant download after payment. Links also arrive by email.
One-time purchase, no subscription.
No account. Guest checkout.

Files: 90 files
Formats: HTML, CSS, SVG frames (vector, text as outlines), PNG frames 1x
Built for: Tailwind CSS v4 · Chrome, Safari, Firefox, Edge (current versions)
Size: 2.8 MB zipped, 10 MB unzipped
Version: 1.0.0

USD. Taxes such as VAT, GST or sales tax, where they apply, are added at checkout.

One-time purchase. Licence: Commercial. Read the licence agreement

Digital files can't be returned. If something's broken or missing, we fix it or refund you. Refund policy

You'll pay on Stripe's secure page. We never see your card number.

What it's for

You've got an app and half a dashboard. You need a decent stat card, a table that behaves, a chart that's just SVG, and a form that doesn't look like 2009. This is that. It's the small kit on purpose. For a whole set of screens, Admin Kit is the bigger one.

What's in the ZIP

40 components in plain HTML with Tailwind classes, sorted into 9 groups: stat cards, charts drawn as SVG (no chart library to install), tables, forms, filters, feedback and more. One theme in light and dark, one example dashboard screen, and SVG frames for each component group and for the example screen, light and dark, so you can drag them into Figma and see how they sit in a layout. 90 files, 2.8 MB zipped.

Folders on the left are the layers on the right. Counts and sizes are read from the ZIP itself.

components/40 files76 KB
- badges/4 files6 KB
  - badge-dot.html637 B
  - badges-pill-count.html1 KB
  - badges-status.html1 KB
  - tag-removable.html3 KB
- charts/7 files18 KB
  - chart-area.html2 KB
  - chart-bar-horizontal.html2 KB
  - chart-bar.html4 KB
  - chart-donut.html2 KB
  - chart-line.html3 KB
  - chart-sparkline-row.html1 KB
  - chart-stacked.html4 KB
- empty-states/3 files4 KB
  - empty-error.html1 KB
  - empty-no-data.html1 KB
  - empty-search.html1 KB
- feedback/2 files3 KB
  - alert-banner.html2 KB
  - progress-bars.html1 KB
- filters/4 files6 KB
  - filter-chips.html2 KB
  - filter-search-bar.html2 KB
  - filter-segmented.html1 KB
  - filter-select-row.html2 KB
- forms/7 files8 KB
  - checkbox-radio.html1 KB
  - form-card.html2 KB
  - input-text.html489 B
  - input-with-icon.html1 KB
  - select-field.html503 B
  - textarea.html524 B
  - toggle-switch.html1 KB
- pagination/3 files4 KB
  - pagination-load-more.html698 B
  - pagination-numbered.html3 KB
  - pagination-simple.html1 KB
- stat-cards/5 files4 KB
  - stat-basic.html313 B
  - stat-icon-split.html924 B
  - stat-progress.html623 B
  - stat-sparkline.html1 KB
  - stat-trend.html810 B
- tables/5 files22 KB
  - table-avatars.html8 KB
  - table-basic.html4 KB
  - table-compact.html1 KB
  - table-selectable.html4 KB
  - table-sortable.html5 KB
css/4 files76 KB
- fonts/2 files41 KB
  - dm-sans-latin-wght-normal.woff237 KB
  - OFL.txt5 KB
- app.css29 KB
- input.css6 KB
frames/40 files9.9 MB
- components/18 files1.3 MB
  - badges-dark.png32 KB
  - badges-light.png32 KB
  - charts-dark.png172 KB
  - charts-light.png170 KB
  - empty-states-dark.png48 KB
  - empty-states-light.png48 KB
  - feedback-dark.png45 KB
  - feedback-light.png44 KB
  - filters-dark.png33 KB
  - filters-light.png33 KB
  - forms-dark.png93 KB
  - forms-light.png92 KB
  - + 6 more files
    pagination-dark.png24 KB
    pagination-light.png24 KB
    stat-cards-dark.png51 KB
    stat-cards-light.png51 KB
    tables-dark.png157 KB
    tables-light.png156 KB
- screens/2 files314 KB
  - example-dashboard-dark.png157 KB
  - example-dashboard-light.png157 KB
- svg/20 files8.3 MB
  - components/18 files7.5 MB
    badges-dark.svg157 KB
    badges-light.svg156 KB
    charts-dark.svg498 KB
    charts-light.svg614 KB
    empty-states-dark.svg178 KB
    empty-states-light.svg198 KB
    feedback-dark.svg157 KB
    feedback-light.svg157 KB
    filters-dark.svg195 KB
    filters-light.svg200 KB
    forms-dark.svg461 KB
    forms-light.svg475 KB
    + 6 more files
    pagination-dark.svg114 KB
    pagination-light.svg113 KB
    stat-cards-dark.svg173 KB
    stat-cards-light.svg206 KB
    tables-dark.svg1.7 MB
    tables-light.svg1.7 MB
  - screens/2 files784 KB
    example-dashboard-dark.svg361 KB
    example-dashboard-light.svg423 KB
js/1 file3 KB
- ui.js3 KB
screens/1 file26 KB
- example-dashboard.html26 KB
index.html216 KB
LICENSE.txt172 B
README.md4 KB
THIRD-PARTY-NOTICES.txt2 KB

frames/badges-dark.pngbadges-light.pngcharts-dark.pngcharts-light.pngempty-states-dark.pngempty-states-light.png

frames/ · 40 files · 9.9 MB

css/dm-sans-latin-wght-normal.woff2OFL.txtapp.cssinput.css

css/ · 4 files · 76 KB

js/ui.js

js/ · 1 file · 3 KB

Built for

HTML and Tailwind CSS v4, current Chrome, Safari, Firefox and Edge. The SVG frames drag into Figma, Sketch or Illustrator.

Not a .fig file. UI kits are HTML/Tailwind code plus SVG frames you can import into Figma.

What you need

A browser. The compiled CSS is included, so there's no build step. The Tailwind source file is in the ZIP if you want to rebuild.

Not in the ZIP

Chart logic or live data
Backend code
A .fig file
More than one theme
Editable text in the SVG frames (text there is outlined)

Fonts and notices

DM Sans licence: SIL OFL 1.1 · fonts.google.com/specimen/DM+Sans
Tailwind CSS (compiled output) licence: MIT · tailwindcss.com

Third-party parts keep their own licences: Tailwind CSS (compiled output) (MIT).

Which licence do you need?

Making money for someone else with it? Commercial. Selling a product that others pay to use? Extended. Just for you? Personal.

What each licence allows
	Personal$19	Commercial$39	Extended$99
In plain words	A practice dashboard or a portfolio piece. Nothing earns money.	A client's admin panel, or your own free internal tool.	The interface of a paid SaaS or app that your customers pay to use.
Who can use it	One person	Up to 5 team members	Up to 25 team members
Personal projects	Yes	Yes	Yes
Client projects	No	Yes, unlimited	Yes, unlimited
Free end products	No	Yes	Yes
Products where users pay	No	No	Yes
Credit required	None	None	None

None of the licences let you resell or share the files, upload them to a marketplace, or use them to train AI models. Compare licences in full. The full legal text is on the licence page.

Updates

This is version 1.0.0. If we post a fix, the new ZIP replaces the old one and the changelog below says what changed. You can get fresh links for an order any time from the resend page. Get new download links

1.0.0November 4, 2026

First release. Everything in the ZIP is listed above.

Goes well with

Admin Kit, cover render of the files in the ZIP

Line 120, cover render of the files in the ZIP

Launchpad, cover render of the files in the ZIP

Not sure about the quality? Try the free pack first. See the free pack

Questions

Can I paste one component into my React project?

Yes. It's HTML and class names, so turn it into JSX the usual way.

Do the charts need a library?

No. They're SVG in the markup, with a little CSS.

Is dark mode included?

Yes. Add class="dark" to the html element. The compiled CSS already has the dark values.

Refund and delivery. Instant download after payment. Links also arrive by email. Digital files can't be returned. If something's broken or missing, we fix it or refund you. Refund policy

Commercial · $39