42.1 kB
to ship the page
shadcn-vue ships 2.6× as much, Nuxt UI 4.3×.
Ermine UI 0.6.1
Light. Fast. Yours.
143 accessible Vue components and 14 blocks, written in plain CSS. No Tailwind. No runtime dependencies beyond Vue. Copied into your project, so every line is yours to change.
npx ermineui init
Overview
Revenue
$221,500
+5.5%vs last month
Refunds
$6,620
-13.6%vs last month
Orders
8
Average paid order
$158.96
Revenue
Money taken and money given back, by month.
| Month | Revenue | Refunds |
|---|---|---|
| Jan | $18,400 | $620 |
| Feb | $19,750 | $540 |
| Mar | $22,300 | $810 |
| Apr | $21,100 | $700 |
| May | $24,900 | $660 |
| Jun | $27,600 | $930 |
| Jul | $26,200 | $720 |
| Aug | $29,800 | $880 |
| Sep | $31,450 | $760 |
Top products
Units sold this quarter.
Recent orders
Press a column heading to sort by it.
| #4821 | Tomás Ortega | Paid | Sep 28 | $184.50 |
| #4820 | Priya Nair | Pending | Sep 28 | $62.00 |
| #4819 | Jonas Weber | Paid | Sep 27 | $310.25 |
| #4818 | Aiko Tanaka | Refunded | Sep 27 | $48.00 |
| #4817 | Lucía Fernández | Paid | Sep 26 | $129.90 |
These are the real blocks, running on their sample data. See all 14
Performance
A fraction of the weight.
We built the same page with Ermine, shadcn-vue and Nuxt UI, then measured what reached the browser and how fast it drew.
120 ms
to draw 1,000 rows
shadcn-vue takes 3.3× as long, Nuxt UI 7.0×.
18.5 MB
of memory to hold them
shadcn-vue uses 3.8× as much, Nuxt UI 8.8×.
One settings page using 13 components, built with Vite and run in Chromium on one machine. Shipped size is JavaScript and CSS, gzipped. Your results will differ.
How it works
From one command
to code you own.
Set up once.
Run npx ermineui init in a Vue, Nuxt or Astro project. It finds the framework, suggests where the files go and copies in one stylesheet that holds the theme.
Add what you need.
npx ermineui add dialog copies the dialog's source into your project, with the helpers it needs. Add a block such as dashboard and you get a whole page section, built from the same parts.
Pick your colours.
Choose a base for the greys and an accent for the primary colour, or set the CSS variables yourself. Every pairing is checked for contrast in light and dark. Try one from the palette at the top of this page, or see the themes.
Project settings
Then it is yours.
The card beside this is real: the same components, running on this page. In your project they are plain .vue files, so change the markup, the styles or the behaviour, and nothing is overwritten on your next update. Read the installation guide.
Components
143 components.
Try a few.
Everything below is live. Open the dialog, drag a card, press Tab. Then switch your system to dark and watch it follow.
Forms
Native inputs underneath, so they are small, fast and work in a plain form.
1024 MB
Charts
Plain SVG. Read values with the pointer or the arrow keys, or switch to a table.
| Week starting | Requests | Served from cache |
|---|---|---|
| Aug 3 | 41,200 | 28,100 |
| Aug 10 | 43,800 | 30,400 |
| Aug 17 | 47,100 | 31,900 |
| Aug 24 | 45,300 | 33,800 |
| Aug 31 | 52,600 | 37,200 |
| Sep 7 | 58,900 | 43,100 |
| Sep 14 | 61,400 | 46,800 |
| Sep 21 | 59,200 | 47,900 |
| Sep 28 | 66,800 | 52,300 |
Stats
Requests
1.8M
+12.4%vs last month
Error rate
0.42%
-8.1%vs last month
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Overlays
Focus is trapped and returned, Escape closes, and the page behind does not scroll.
Kanban
Drag cards between columns, or focus one and hold Alt with an arrow key.
To do2cards
- Add saved addresses
- Search filters
In progress1card
- Checkout redesign
Done1card
- Cart rounding fix
To move a card, focus it, hold Alt and press an arrow key.
Small parts
LivePreviewDraft
IKTOPN+1
Now $96.00Was $120.00Save 20%
3 deployments this week, all healthy. Median build time 48 s.
Ownership
Not a dependency. Your code.
The command line copies each component's source into your project, with the helpers it needs. Nothing is imported from node_modules, so there is no version to wait for and nothing you cannot change.
Terminal
npx ermineui init
npx ermineui add button dialog select
npx ermineui add dashboardApp.vue
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>
<template>
<Button variant="outline">Save</Button>
</template>Built to be depended on,
without the dependency.
Plain CSS.
Every colour, radius and shadow is a CSS variable in one stylesheet. Change a value and the whole library follows. There is no styling framework to configure, and it sits happily beside Tailwind if you use it.
Accessible by test.
771 browser tests drive every component by keyboard and mouse in Chromium, Firefox and WebKit, with axe scans in both themes and a simulated screen reader checking what would be spoken.
Vue, Nuxt and Astro.
Every component and block has been installed into a fresh project in each, then type-checked, built and run. Server rendering and hydration included.
Light and dark.
Dark mode follows the system through light-dark(). Force a theme on the page, or on any element to theme only what is inside it. The black band above is done that way.
Directory
Find the one you need.
Each component has its own page with the command to add it, the files it copies and its source.
Start with one.
Add a button. Read its source. Decide from there.
npx ermineui add button