Introduction

Welcome to the Sourceful Design System documentation.

What is this?

The Sourceful Design System is a collection of reusable components, design tokens, and guidelines for building consistent, accessible interfaces across all Sourceful Energy products.

Key Features

50+ production-ready React components
Built on Radix UI primitives for accessibility
Styled with Tailwind CSS
Full TypeScript support
Dark mode support
WCAG 2.1 AA compliant
Machine-readable component schemas for AI tooling

Claude Code Integration

This design system is optimized for AI-assisted development. Add our CLAUDE.md template to your project and Claude Code will automatically use the design system.

View the Claude Code setup guide →

Quick Start

npm install @sourceful-energy/ui

# In your app
import { Button, Card, Input } from "@sourceful-energy/ui"
import "@sourceful-energy/ui/styles.css"

Patterns & Examples

Learn how to combine components effectively:

Form Patterns

Validation, layout, and best practices for forms

Energy Flow

Visualize real-time energy distribution

Sites Map

Interactive maps for site locations

AI Chat

Conversational AI interface component

Charts

Area, bar, line, pie, and more

Dashboard Examples

Full dashboard layouts on the home page

Credits

This design system is built on top of shadcn/ui, a collection of beautifully designed components by @shadcn. Components are built with Radix UI primitives and styled with Tailwind CSS.