DOCS

Installation

Build consistent legal-tech interfaces without rebuilding the basics. Follow these steps to start a new project, or to add the DigiLawyer Design System to one you already have.

GETTING STARTED

Start a New Project

Scaffold a React app, authenticate against GitHub Packages, then install the library.

STEP 1

Scaffold your project

Choose your framework and run the create command.

$npx create-next-app@latest my-app

STEP 2

Point the scope at GitHub Packages

The library is published to GitHub Packages rather than the public npm registry, so the @adeshsingh0604 scope needs its own registry line. Add an .npmrc at the project root, with a personal access token that carries the read:packages scope.

.npmrc

1@adeshsingh0604:registry=https://npm.pkg.github.com
2//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

STEP 3

Install the library

$npm install @adeshsingh0604/digilawyer-ds

STEP 4

Import the stylesheet once

One import at your app root brings in every design token and all component styles. Importing it per-component is unnecessary and will cost you duplicate CSS.

main.jsx

1// main.jsx — import the stylesheet once, at the root of your app
2import React from 'react';
3import ReactDOM from 'react-dom/client';
4import '@adeshsingh0604/digilawyer-ds/styles.css';
5import App from './App.jsx';
6 
7ReactDOM.createRoot(document.getElementById('root')).render(<App />);

EXISTING CODEBASE

Add to Existing Project

Already running React 18 or 19? Two steps: authenticate, then install.

STEP 1

Add the registry line

.npmrc

1@adeshsingh0604:registry=https://npm.pkg.github.com
2//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

STEP 2

Install and import

$npm install @adeshsingh0604/digilawyer-ds

main.jsx

1import '@adeshsingh0604/digilawyer-ds/styles.css';

THEMING

Dark Mode

Every colour in the system resolves from a CSS custom property. Dark mode swaps the token values on the root element — no component takes a theme prop, and nothing needs to re-render.

index.html

1<!-- Dark mode is a single attribute on the root element -->
2<html data-theme="dark">

USAGE

Usage Example

Components are named exports from the package root. Import what you need.

App.jsx

1import { Button, Alert, Tag } from '@adeshsingh0604/digilawyer-ds';

3export default function App() {
return (
  <div style={{ padding: 32, display: 'grid', gap: 16 }}>
    <Alert color="info" variant="semi" title="Notice scheduled">
      Your legal notice will be dispatched on 20 August 2026.
    </Alert>

    <div style={{ display: 'flex', gap: 8 }}>
      <Tag color="blue" variant="semi">Draft</Tag>
      <Tag color="green" variant="semi">Verified</Tag>
    </div>

    <Button variant="primary">Send Notice</Button>
  </div>
);
18}