@contractspec/lib.design-system

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

Installation

bun add @contractspec/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
  • Code Display: Syntax-highlighted code blocks with package manager tabs
  • Platform Utilities: Hooks for responsive and adaptive design
  • Legal Templates: Compliant templates for Terms, Privacy, and GDPR

Example: App Layout

import { AppLayout } from '@contractspec/lib.design-system';
import { AppSidebar } from '@contractspec/lib.design-system';

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

Example: Zod Form

import { ZodForm } from '@contractspec/lib.design-system';
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="Submit"
    />
  );
}

Example: Code Block with Package Manager Tabs

import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';

// For installation commands with package manager tabs
<InstallCommand package="my-package" />
<InstallCommand package={["react", "react-dom"]} dev />

// For code examples with syntax highlighting
<CodeBlock
  language="typescript"
  code={`const hello = "world";`}
  filename="example.ts"
/>

Key Exports

Organisms

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

Data & Forms

  • DataViewRenderer
  • ZodForm
  • FormLayout, FormDialog

Code Display

  • CodeBlock (syntax highlighting)
  • CommandTabs (package manager tabs)
  • InstallCommand (convenience wrapper)
  • CopyButton

Providers

  • PackageManagerProvider
Previous: UI KitNext: Accessibility