Litho

A modern React component library for building TrackPath extensions and web applications. Litho provides a comprehensive set of accessible, themeable, and composable UI components, designed for rapid development and seamless integration with Tailwind CSS and Shopify Polaris icons.

Installation

npm install @trackpath/litho

Note: tailwindcss, react, and react-dom (v18+) are required as peer dependencies.

Usage

1. Import the CSS (required for correct styling):

// index.css paths here may differ depending on your project structure
@source "./node_modules/@trackpath/litho";
@import "./node_modules/@trackpath/litho/index.css";

2. Wrap your app with AppProvider (required for Frame and/or Form usage):

import { AppProvider, Page, Button } from "litho";

function App() {
  return (
    <AppProvider darkModeAvailable darkModeStorageKey="my-app-dark-mode">
      <Page title="Welcome to Litho">
        <Button primary onClick={() => alert("Hello!")}>
          Click me
        </Button>
      </Page>
    </AppProvider>
  );
}

3. Use any component:

import { Banner, Card, ResourceList } from 'litho';

<Banner status="success" title="Success!">
  Your operation was successful.
</Banner>

<Card>
  <ResourceList
    items={[{ id: 1, name: 'Item 1' }]}
    renderItem={item => <div key={item.id}>{item.name}</div>}
  />
</Card>

Components

Litho exports a wide range of components, including:

• Layout: Page, Frame, Layout, Card, Grid, Stack
• Forms: TextField, Select, Checkbox, RadioButton, RangeSlider, ChoiceList, DatePicker, ColorField
• Navigation: Navigation, Tabs, Pagination, TopBar, Pane
• Feedback: Banner, Tip, InlineError, EmptyState, Loading, SkeletonText, FooterHelp
• Actions: Button, ButtonGroup, ActionList, Popover, Modal, ContextualSaveBar
• Data Display: Table, ResourceList, List, Badge, Tag, Thumbnail, Image, Tooltip
• Utilities: useIndexResourceState, useTableScrollState, and more

See the source code for full API documentation and JSDoc usage examples for each component.

Theming & Customization

• Litho is designed to work with Tailwind CSS. You can customize themes and extend styles using your Tailwind config.

// index.css paths here may differ depending on your project structure
@source "./node_modules/@trackpath/litho";
@import "./node_modules/@trackpath/litho/index.css";

Peer Dependencies

• react >= 18
• react-dom >= 18
• tailwindcss >= 4

AI Assistant Integration

Litho includes comprehensive guides for AI coding assistants (Claude, ChatGPT, Cursor, Copilot, etc.) to help generate accurate, consistent UI code:

• AI_COMPONENTS_GUIDE.md - Complete component API reference
• AI_PATTERNS_GUIDE.md - Ready-to-use UI patterns and examples
• AI_INTEGRATION_GUIDE.md - Guidelines for AI code generation
• COMPONENT_QUICK_REFERENCE.md - Fast component lookup
• AI_USAGE_IN_PROJECTS.md - How to use these guides in your projects

Using in Your Projects

After installing Litho, the guides are available in node_modules/@trackpath/litho/. Reference them in your AI prompts:

@node_modules/@trackpath/litho/AI_PATTERNS_GUIDE.md

Build a customer list page with search and filtering using Litho components.

See AI_USAGE_IN_PROJECTS.md for detailed instructions on accessing guides from projects using Litho as a dependency.

License

MIT