@sagecurator/ui

Shared UI component library for the Sagecurator product suite. Built with React 19, Tailwind CSS 4, and powered by @sagewai/tokens design system.

Install

pnpm add @sagecurator/ui

Usage

Add to your Next.js config:

// next.config.js
module.exports = {
  transpilePackages: ['@sagecurator/ui'],
};

Import the global styles in your CSS:

@import "@sagecurator/ui/src/globals.css";
@source "../../node_modules/@sagecurator/ui/src";

Use components:

import { Button, Card, FormField, TextInput } from '@sagecurator/ui';

export default function MyPage() {
  return (
    <Card>
      <FormField label="Name">
        <TextInput value="" onChange={() => {}} />
      </FormField>
      <Button>Submit</Button>
    </Card>
  );
}

Components

• Layout: PageLayout, Card, FormCard, SidebarProvider, SidebarShell
• Forms: FormField, TextInput, TextArea, Select, Toggle, Button
• Feedback: ToastProvider, useToast, ErrorAlert, LoadingSpinner, Skeleton
• Navigation: NavHeader, Tabs, DropdownMenu
• Data: Table, Badge, StatusDot
• Overlay: Dialog, ConfirmDialog, Tooltip
• Display: EmptyState, ResponseCard, ChatBubble, ChatPanel
• Theme: ThemeToggle, APP_THEMES

License

MIT