@forsyteco/product-ui

React component library for Forsyte app, built with React 19, TypeScript, and Tailwind CSS 4.

Installation

npm install @forsyteco/product-ui
# or
pnpm add @forsyteco/product-ui
# or
yarn add @forsyteco/product-ui

Peer Dependencies

This package requires React 19.x and Tailwind CSS 4.x:

npm install react@^19.2.1 react-dom@^19.2.1 tailwindcss@^4.1.17

Setup

1. Import Tailwind base styles

Make sure Tailwind CSS is imported in your application:

/* src/index.css or your main CSS file */
@import 'tailwindcss';

2. Import the design system styles

Pull in the design tokens, fonts, and utilities provided by the library:

/* src/index.css or your main CSS file, after tailwindcss */
@import '@forsyteco/product-ui/styles.css';

3. Import components

import { Spinner } from '@forsyteco/product-ui'
import type { SpinnerProps } from '@forsyteco/product-ui'

Example

import { Spinner } from '@forsyteco/product-ui'

function App() {
  return (
    <div>
      <Spinner />
    </div>
  )
}

Components

All components use Tailwind CSS classes directly. Make sure Tailwind CSS is configured in your project.

Spinner

A loading spinner component.

import { Spinner } from '@forsyteco/product-ui'

// Basic usage
<Spinner />

// Full-width centered spinner
<Spinner full />

// Custom styling with Tailwind classes
<Spinner className="text-blue-500 w-8 h-8" />

Development

This package is part of a Turborepo monorepo. For local development:

# Install dependencies
pnpm install

# Build the package
pnpm turbo run build --filter=@forsyteco/product-ui

# Run Storybook
pnpm --filter @forsyteco/product-ui storybook

License

MIT