Introduction

What is Leucine DS

Leucine Design System is a portfolio design system built for Next.js applications. It provides a complete set of design tokens, components, and page examples that you can browse and copy directly into your project — no npm package installation required.

Built with shadcn/ui and Tailwind CSS, Leucine offers 50+ components, semantic color palettes, typography scales, and full application patterns like dashboards, forms, and data tables. Everything is themed with Leucine Blue and ready to customize.

Key Principles

• Copy-paste first — No installation. Copy the component code into your project and customize as needed.
• Token-driven — All colors, spacing, and typography come from design tokens. Never hardcode values in components.
• Accessible by default — WCAG compliant palettes, semantic HTML, and Radix UI primitives for keyboard and screen reader support.
• Mobile first — Every layout works at 375px and scales up. Responsive patterns are built in.

Built On

Leucine is built on industry-standard tools that you likely already use:

How to Use

Copy the component code into your project. Each component page includes a live preview and a Code tab with the full implementation. Paste it into your codebase, adjust imports if needed, and you're ready to go. No installation required.