Installation

Get started with the Sourceful Design System in your project.

Install the package

Install the Sourceful UI package using npm, yarn, or pnpm:

# npm
npm install @sourceful-energy/ui

# yarn
yarn add @sourceful-energy/ui

# pnpm
pnpm add @sourceful-energy/ui

Import styles

Import the CSS file in your app's entry point (e.g., layout.tsx or _app.tsx):

import "@sourceful-energy/ui/styles.css"

Use components

Import and use components directly:

import { Button, Card, Input, Badge } from "@sourceful-energy/ui"

export function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter device name" />
      <Button>Add Device</Button>
      <Badge variant="success-soft">Online</Badge>
    </Card>
  )
}

Peer dependencies

The package requires the following peer dependencies:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

Tailwind CSS setup (optional)

If you want to use the Sourceful color tokens in your own styles, extend your Tailwind config:

// tailwind.config.ts
import type { Config } from "tailwindcss"

const config: Config = {
  theme: {
    extend: {
      colors: {
        sourceful: {
          green: {
            500: "#00FF84",
            600: "#00cc6a",
          },
          gray: {
            900: "#111827",
            950: "#0a0a0a",
          },
        },
      },
    },
  },
}

export default config

TypeScript

The package includes TypeScript definitions. All components are fully typed with autocompletion support in your IDE.

import type { ButtonProps, BadgeProps } from "@sourceful-energy/ui"