@landtrustinc/design-system

Design system components for LandTrust applications.

Storybook

📦 Installation

npm install @landtrustinc/design-system react-loading-skeleton

🚀 Setup

Required CSS Imports

⚠️ Important: You must import the following CSS files in your app's entry point (e.g., _app.js or _app.tsx for Next.js):

// pages/_app.tsx (Next.js) or main entry file
import '@landtrustinc/design-system/dist/variables.css';
import 'react-loading-skeleton/dist/skeleton.css';

Why?

• The design system uses react-loading-skeleton for loading states in some components
• Next.js and other frameworks require global CSS to be imported in the app entry point, not from npm packages
• This prevents build errors and ensures proper styling

Next.js Configuration

If you're using Next.js, make sure these imports are at the top of your pages/_app.tsx or pages/_app.js:

import 'react-loading-skeleton/dist/skeleton.css';
import '@landtrustinc/design-system/dist/variables.css';

// ... rest of your imports

📖 Usage

import { Button, Box, Typography } from '@landtrustinc/design-system';

function App() {
  return (
    <Box>
      <Typography variant="h1">Hello World</Typography>
      <Button variant="primary">Click Me</Button>
    </Box>
  );
}

🎨 Styling

Following Figma styles try to use tokens from variables.css. Avoid using colors from the theme (these are legacy).

Keep the styles in separate file *.styles.ts

🔧 Development

npm run dev       # Start development server
npm run build     # Build package
npm run storybook # Run Storybook

📦 Publishing

npm build
npm version patch/minor/major
npm publish

📝 TODO

• [ ] Migrate to Changesets - Replace manual version bumping with Changesets for automated versioning and changelog generation. This would prevent version conflicts and streamline the release process.