Devsnips

The largest free & open-source UI library for web developers

Reusable Tailwind CSS, Vanilla HTML/CSS/JS, and React components, sections, and full multi-page templates — including production-ready AI SaaS platforms.

License: MIT GitHub stars Variants Templates npm

---

Why DevSnips?

DevSnips is a free, open-source UI library built for developers who want production-ready interfaces without starting every project from an empty file.

• 1000+ UI variants
• 15+ visual styles
• Tailwind CSS, React, and Vanilla
• Full multi-page templates
• Reusable components and sections
• Design-token driven interfaces
• MIT licensed
• CLI for installing source directly into your project

From individual buttons and forms to complete AI SaaS platforms, dashboards, agencies, portfolios, and conference websites.

---

What's Included?

Components

Reusable UI components for common interface patterns.

• Buttons
• Inputs
• Forms
• Cards
• Navigation
• Modals
• Dropdowns
• Breadcrumbs
• Checkboxes
• Radios
• And more

Sections

Complete page sections ready to drop into your projects.

• Hero sections
• Features
• Pricing
• Testimonials
• Contact
• Footers
• AI product sections
• Dashboard sections
• And more

Templates

Complete multi-page websites built from composed sections and components.

Featured templates include:

• AI SaaS Platform
• Northstar Vanilla Dashboard
• Stratum
• Northline Atelier
• Baseline Conference

---

Supported Technologies

Technology	Library
Tailwind CSS	Components, sections & templates
React	Components, sections & templates
Vanilla	HTML, CSS & JavaScript

Browse the libraries:

• Tailwind
• React
• Vanilla

---

DevSnips CLI

DevSnips now includes an official CLI for installing components, sections, and templates directly into your project.

Install with npx

npx devsnips add <path>

Examples

npx devsnips add Tailwind/Sections/AI-Product/agent-workflow/vercel

npx devsnips add React/Components/Buttons/solid-button

npx devsnips add Vanilla/Components/Buttons/split-button

The CLI fetches the requested source directly from DevSnips and installs it into:

./devsnips/<technology>/<category>/<family>/<variant>/

For example:

npx devsnips add Tailwind/Sections/AI-Product/agent-workflow/vercel

becomes:

./devsnips/tailwind/sections/ai-product/agent-workflow/vercel/

CLI commands

npx devsnips --help
npx devsnips --version

Node.js 18 or newer is required.

Read the full CLI documentation.

---

Quick Start

Option 1: Use the CLI

Install what you need directly into your project:

npx devsnips add <path>

Option 2: Clone the repository

git clone https://github.com/sarthakbystander/DevSnips.git
cd DevSnips

To browse the library locally:

python3 -m http.server 8080

Then open:

http://localhost:8080/

---

Documentation

Full documentation lives in docs/. Start with the documentation index, which routes you by role and task:

You are…	Start with
An AI coding agent integrating DevSnips into a project	Introduction → Agent overview → CLI
A developer evaluating DevSnips	What is DevSnips → Architecture → Resources
A contributor adding a resource	Resource model → Creating resources → Validation
An integrator consuming the registry programmatically	Machine-readable overview → Registry schema
Connecting DevSnips to an MCP client	DevSnips MCP

Key references:

• CLI reference — commands, project context, troubleshooting
• Registry schema — the shape of snippets-index.json
• Terminology · FAQ
• Contributing guide · Component structure spec
• Engineering reports — audits and investigations
• AGENTS.md — entry point for AI agents working on this repository

---

Design System

DevSnips follows a consistent design philosophy across its component library.

The system is built around:

• Reusable design tokens
• Consistent spacing
• Structured typography
• Responsive layouts
• Neutral-first foundations
• Controlled visual variation
• Accessibility-conscious interfaces
• Developer-friendly source code

The goal is simple: different designs, consistent engineering.

---

Built For

DevSnips can be used for:

• AI SaaS products
• Dashboards
• Admin panels
• Business websites
• Agency websites
• Developer tools
• Landing pages
• Portfolios
• Conferences and events
• Product websites
• Personal projects

---

Repository Structure

DevSnips/
├── React/
├── Tailwind/
├── Vanilla/
├── cli/
├── docs/
├── scripts/
├── snippets-index.json
├── CHANGELOG.md
├── LICENSE
└── README.md

The snippets-index.json registry provides the structured index of available library content.

---

Open Source

DevSnips is completely free and open source under the MIT License.

Use it in personal projects, commercial products, experiments, and anything else the MIT license permits.

Contributions, improvements, bug fixes, and new components are welcome.

---

Links

• GitHub Repository
• Documentation
• DevSnips CLI on npm
• Tailwind Library
• React Library
• Vanilla Library
• Changelog
• License

---

License

MIT © Sarthak Bystander