@lssm/lib.design-system

High-level design system components, patterns, and layouts for LSSM applications. Built on top of @lssm/lib.ui-kit.

Installation

npm install @lssm/lib.design-system
# or
bun add @lssm/lib.design-system

What It Provides

  • Composite Components: Molecules and Organisms that solve common UI problems
  • Layouts: Ready-to-use page structures for dashboards, marketing sites, and lists
  • Data Views: Standardized renderers for lists, tables, and detail views
  • Forms: Zod-integrated form layouts and components
  • Platform Utilities: Hooks for responsive and adaptive design
  • Legal Templates: Compliant templates for Terms, Privacy, and GDPR

Example: App Layout

import { AppLayout } from '@lssm/lib.design-system/components/organisms/AppLayout';
import { AppSidebar } from '@lssm/lib.design-system/components/organisms/AppSidebar';

export default function Layout({ children }) {
  return (
    <AppLayout sidebar={<AppSidebar />}>
      {children}
    </AppLayout>
  );
}

Example: Zod Form

import { ZodForm } from '@lssm/lib.design-system/components/forms/ZodForm';
import * as z from "zod";

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
});

export function SignupForm() {
  return (
    <ZodForm
      schema={schema}
      onSubmit={(data) => console.log(data)}
      submitLabel="Sign Up"
    />
  );
}

Key Exports

Organisms

  • AppLayout, AppHeader, AppSidebar
  • MarketingLayout, HeroSection
  • ListCardPage, ListTablePage

Data & Forms

  • DataViewRenderer
  • ZodForm
  • FormLayout, FormDialog
Previous: UI KitNext: Accessibility