Introduction

FolioKit

This is not a component library. It is how you build your component library.

Foliokit is a collection of open-code, reusable React components built on the shadcn/ui registry. We provide carefully crafted components that you can copy, modify, and customize directly in your codebase—no wrapper overhead, no styling workarounds.

Not a library—an open component distribution

Like shadcn/ui, Foliokit is not a typical install-from-NPM library. Instead, you get the actual component source code. This "open code" approach means:

• You own your components. The code lives in your project, not locked away in node_modules.
• Full customization. Modify any component to match your design system without fighting against library constraints.
• Zero abstraction overhead. No wrapper components or prop-drilling complexity—just clean, direct code.
• AI-friendly. Your components are transparent to AI tools, making it easy for LLMs to understand and improve your codebase.

How it works

1. Use CLI / Copy the component from the Foliokit repository into your components/ui folder
2. Customize as needed - Edit the code to match your design system
3. Use in your app - Import and use like any local component
4. Get updates - Selectively pull in improvements from upstream

That's it. No package managers, no version conflicts, no wrapper hell.

Philosophy

Good design builds trust. When visitors land on your site, they evaluate everything in seconds:

• Is this company professional?
• Does this feel polished?
• Can I trust this team?

Poor design communicates carelessness. It signals that the team doesn't care about details or user experience.

Good design signals that the team has their act together. When every detail is thoughtfully crafted—from button hover states to loading transitions—visitors trust that the entire product reflects that same care.

Foliokit exists to help you create that polish without fighting component libraries. With full control over your component code, you can craft interfaces that genuinely reflect your brand and values.

Who is Foliokit for?

• Developers building design systems - Full control to implement your exact design language
• Teams with specific customization needs - No more fighting library limitations
• Projects using AI coding tools - Open code that AI can read and understand
• Anyone who wants ownership - Your components, your rules

Getting started

Ready to build something great? Start with the Getting Started guide to copy your first component.

Open Source

Foliokit is completely open source. Contribute, suggest improvements, or create your own distribution. The code is yours.