Introduction
The DIG is a set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.
This is not a component library — it is how you build your own 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. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.
This is what The DIG 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.
- Easy Customization: Modify any part of a component to fit your design and functionality requirements.
- 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.
- AI Integration: Access to the code makes it straightforward for LLMs to read, understand, and even improve your components.
Features
- ✅ Build your own component library with open, customizable code.
- ✅ Based on Tailwind CSS v4.
- ✅ Extend, customize, and adapt to your design system.
- ✅ Open Source and framework‑agnostic.
- ✅ Easy initialization and component scaffolding CLI.