Introduction

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

You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.

This approach works well until you need to customize a component to fit your design system or require one that isn't included in the library.

This is what codebase aims to solve. It is built around the following principles:

• Open Code: The top layer of your component code is open for modification.
• Composition: Every component uses a common, composable interface, making them predictable.
• Distribution: A flat-file schema and command-line tool make it easy to distribute components.
• Beautiful Defaults: Carefully chosen default styles, so you get great design out-of-the-box.
• AI-Ready: Open code for LLMs to read, understand, and improve.

Open Code

codebase hands you the actual component code. You have full control to customize and extend the components to your needs.

Composition

Every component in codebase shares a common, composable interface. If a component does not exist, we bring it in, make it composable, and adjust its style to match.

Distribution

codebase is also a code distribution system. It defines a schema for components and a CLI to distribute them.

Beautiful Defaults

codebase comes with a large collection of components that have carefully chosen default styles.

AI-Ready

The design of codebase makes it easy for AI tools to work with your code.