Sprout is a lightweight, sustainable component library. One CSS file. One JS file. No build tools. No frameworks. Just semantic HTML that looks exceptional.
Real browser metrics — measured right now on this page.
Everything you need — nothing you don't.
Zero-dependency UI library. 27 components. ~8 KB gzip.
Project overview content.
Settings panel content.
Activity logs appear here.
A lightweight, zero-dependency UI library for the modern web.
No. Drop in two files — CSS and JS. That's it.
Yes. Semantic HTML, ARIA, and keyboard nav throughout.
<button class="danger">Delete</button>
<div role="alert" class="success">
Saved!
</div>Three ways to get Sprout into your project.
Drop two tags into your <head>. Nothing else required.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@akhildesai20/sprout-ui@latest/dist/sprout.min.css" />
<script defer
src="https://cdn.jsdelivr.net/npm/@akhildesai20/sprout-ui@latest/dist/sprout.min.js"></script>Install via npm and import into your build pipeline.
npm install @akhildesai20/sprout-uiimport '@akhildesai20/sprout-ui/dist/sprout.min.css';
import Sprout from '@akhildesai20/sprout-ui';Download the files and self-host — no CDN dependency, full control.
<!-- Button -->
<button class="danger">Delete</button>
<!-- Alert -->
<div role="alert" class="success">Saved successfully.</div>
<!-- Modal trigger -->
<button data-modal-open="my-modal">Open</button>
<dialog id="my-modal">
<div class="modal-header">…</div>
<div class="modal-body">…</div>
</dialog>
<!-- Toast -->
<script>
Sprout.toast('Saved!', { type: 'success' });
</script>