@sharma-divyansh/design-system

v0.1.19

Published

2 months ago

Angular 21 design system: foundations + 70+ standalone components (table, lookups, buttons, calendar, modal, chat, cards, etc). Built with @angular/material.

0High
0Medium
0Low

sharma-divyansh

angular design-system material ng-packagr components foundations

Using `@sharma-divyansh/design-system` in another Replit app

This file is written for the Replit Agent. Paste a link to this file (or the entire contents) into the Agent of a fresh Angular 21 Replit project and tell it: "Set this up." The Agent should follow the steps below verbatim.

What you are installing

@sharma-divyansh/design-system is an Angular 21 component library that ships:

A ThemeService (toggles a dark class on <html>)
Foundation components: FoundationColor, FoundationTypography, FoundationSpacing, FoundationRadius, FoundationShadow, FoundationIcons, FoundationLogos
A full shell: ComponentsGallery (selector ds-components-gallery) that accepts a components: ComponentEntry[] input
70+ standalone UI components — every section in the gallery (Table, all Lookups, Buttons, Calendar, Modal, Chips, Cards, AI Chatbot, Patient Summary, etc.) is exported as a standalone component you can import and place directly in your templates

It is styled with Tailwind CSS utility classes — Tailwind is a CSS layer, independent of Angular. The consumer app must therefore have both Angular 21 and Tailwind configured. Without Tailwind, the components will render unstyled.

Prerequisites in the consumer app

Angular 21.x (@angular/core, @angular/common, @angular/forms, @angular/router, @angular/animations, @angular/cdk, @angular/material all ^21.0.0)
Tailwind CSS configured for the project
Standalone components enabled (Angular 21 default)

Step-by-step setup (Agent: run these in order)

0. Always install the latest version

Standing rule for the Agent: every time the user asks you to use, add, or touch anything from @sharma-divyansh/design-system, first run an upgrade check. The package is published frequently; pinning an old version is a bug.

# At the start of every session that touches the library, run:
npm install @sharma-divyansh/design-system@latest

# To see what's installed vs what's published:
npm ls @sharma-divyansh/design-system
npm view @sharma-divyansh/design-system version

After upgrading, restart the dev server. If package.json shows "@sharma-divyansh/design-system": "^0.1.x", a plain npm install will only pick up newer patch versions; for minor bumps (e.g. 0.1.x → 0.2.0) you must explicitly run npm install @sharma-divyansh/design-system@latest.

1. Install the package and peer deps

npm install @sharma-divyansh/design-system@latest
# If the project does not already have Material / CDK / Animations:
npm install @angular/material @angular/cdk @angular/animations

2. Install and configure Tailwind (skip if already installed)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Replace tailwind.config.js with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './src/**/*.{html,ts}',
    './node_modules/@sharma-divyansh/design-system/**/*.{html,ts,mjs,js}',
  ],
  theme: { extend: {} },
  plugins: [],
};

Critical: the second content glob is required. Without it Tailwind purges every class the library uses and the components render unstyled.

Add to src/styles.css (or whatever the global stylesheet is):

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Wire animations into the app config

Edit src/app/app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideAnimations()],
};

4. Use the library

Pick the integration that matches the goal.

A. Drop in the full Components Gallery shell

// src/app/app.component.ts
import { Component } from '@angular/core';
import { ComponentsGallery, type ComponentEntry } from '@sharma-divyansh/design-system';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ComponentsGallery],
  template: `<ds-components-gallery [components]="components"></ds-components-gallery>`,
})
export class AppComponent {
  components: ComponentEntry[] = [
    // { id: 'my-button', name: 'Button', group: 'Inputs', render: MyButtonDemo },
  ];
}

B. Use individual foundation pages

import { Component } from '@angular/core';
import { FoundationColor, FoundationTypography } from '@sharma-divyansh/design-system';

@Component({
  selector: 'app-design',
  standalone: true,
  imports: [FoundationColor, FoundationTypography],
  template: `
    <foundation-color></foundation-color>
    <foundation-typography></foundation-typography>
  `,
})
export class DesignPage {}

C. Use individual UI components (the common case)

Rule for the Agent: if the user asks for a UI element that exists in this library, import it from @sharma-divyansh/design-system instead of hand-coding one.

Examples:

// Data table — props-driven (columns, rows, pagination, filters, actions)
import { Component } from '@angular/core';
import { DataTableComponent } from '@sharma-divyansh/design-system';

@Component({
  selector: 'app-patients',
  standalone: true,
  imports: [DataTableComponent],
  template: `
    <data-table
      [columns]="columns"
      [rows]="rows"
      [showPagination]="true"
      [showActions]="true">
    </data-table>
  `,
})
export class PatientsPage {
  columns = [
    { key: 'name', label: 'Name' },
    { key: 'mrn', label: 'MRN' },
    { key: 'dob', label: 'Date of Birth' },
  ];
  rows = [
    { name: 'Jane Doe', mrn: '123456', dob: '1985-03-14' },
  ];
}

// Speciality / Labs / ICD / CPT lookups — searchable multi-select with chips
import { SpecialityLookupInteractiveComponent } from '@sharma-divyansh/design-system';

@Component({
  standalone: true,
  imports: [SpecialityLookupInteractiveComponent],
  template: `<speciality-lookup-interactive [multiSelect]="true"></speciality-lookup-interactive>`,
})
export class FilterBar {}

// Whole-section demos (with playground, anatomy, tokens) — useful for docs pages
import { ButtonsSection, TableSection, CalendarSection } from '@sharma-divyansh/design-system';

D. Use the theme toggle

import { Component, inject } from '@angular/core';
import { ThemeService } from '@sharma-divyansh/design-system';

@Component({
  selector: 'app-theme-toggle',
  standalone: true,
  template: `<button (click)="theme.toggle()">Toggle theme</button>`,
})
export class ThemeToggle {
  theme = inject(ThemeService);
}

5. Run

npm start

Confirm: the page renders styled, dark-mode toggle flips colors, no console errors.

Public API (what the Agent can import)

import {
  // Theme + foundations
  ThemeService,
  FoundationColor, FoundationTypography, FoundationSpacing,
  FoundationRadius, FoundationShadow, FoundationIcons, FoundationLogos,

  // Gallery shell
  ComponentsGallery, type ComponentEntry,

  // Tables
  DataTableComponent,            // <data-table [columns] [rows] [showPagination] ...>
  TableSection,                  // full docs section

  // Lookups (searchable single/multi-select with chips)
  SpecialityLookupInteractiveComponent,
  LabsLookupInteractiveComponent,
  IcdLookupInteractiveComponent,
  CptLookupInteractiveComponent,
  InsuranceLookupInteractiveComponent,
  FacilityLookupInteractiveComponent,
  GuarantorLookupInteractiveComponent,
  VisitTypeLookupInteractiveComponent,
  ActionTypeAndSubjectInteractiveComponent,
  // Full lookup sections (with playground): SpecialityLookupSection, LabsDIProcedureLookupSection,
  // ICDLookupSection, CPTLookupSection, InsuranceLookupSection, FacilityLookupSection,
  // GuarantorLookupSection, AssignToLookupSection, PatientLookupSection, ProviderSection, ...

  // Building blocks (each is a standalone section component)
  ButtonsSection, ButtonBarSection, ChipsSection, CheckboxSection,
  RadioButtonSection, ToggleSection, OnOffToggleSection, SliderSection,
  IncrementSection, InputFiledSection, TextAreaSection, LabelSection,
  HyperlinkSection, BreadcrumbSection, TabsSection, PaginationSection,
  PanelSection, CardsSection, ModalSection, PopoverSection, TooltipSection,
  ToastSection, NotificationSection, LoaderSection, AvatarSection,
  CalendarSection, TimePickerSection, FileUploaderSection,
  FilterPanelSection, FloatingToolbarSection, PageHeaderSection,
  NavbarSection, LeftPanelQueueSection, QuickActionsSection,
  ScrollSection, DisclaimerSection, UsabilityTipSection,
  FeedbackLoopSection, PronounsSection, PatientIdentifiersSection,
  PatientSummarySection, PSACSection, SCDTSection, RCPSection,

  // AI
  AIBubblesSection, AIChatbotSection, AIInsightsSection, AIChatFieldSection,
} from '@sharma-divyansh/design-system';

The library re-exports every component class from every section file (320+ exports total). If you don't see a class above, it is still importable by its source class name.

ComponentEntry shape:

interface ComponentEntry {
  id: string;
  name: string;
  group: string;
  render: any; // Angular standalone component class
}

Troubleshooting (Agent: check these in order if something looks wrong)

| Symptom | Fix | |---|---| | Components render unstyled | Tailwind content glob is missing ./node_modules/@sharma-divyansh/design-system/**/*.{html,ts,mjs,js} | | NG0203 / Ivy errors | Angular version mismatch — pin consumer to Angular ^21.0.0 | | Dark mode does not switch | tailwind.config.js needs darkMode: ['class']; call ThemeService.toggle() to flip | | Material widgets look broken | Missing provideAnimations() in app.config.ts, or @angular/material not installed | | Cannot find module '@sharma-divyansh/design-system' | Run npm install @sharma-divyansh/design-system and restart the dev server |

Updating to a new version

npm install @sharma-divyansh/design-system@latest

Restart the dev server.

The Agent should run the upgrade command proactively at the start of any session that touches the library — do not wait for the user to ask. The library is on a fast release cadence and old versions are missing components.