@whytea/lemongrass

A collection of beautiful, reusable React components built with TypeScript, React, Next.js, and Tailwind CSS.

Installation

npm install @whytea/lemongrass
# or
yarn add @whytea/lemongrass

Requirements

This library is designed to be used with Next.js applications and requires:

• Next.js 15.x or later
• React 18.x or later
• React DOM 18.x or later

Usage

You can import components directly:

import { AvatarCircularAvatars } from '@whytea/lemongrass';

function MyComponent() {
  return (
    <AvatarCircularAvatars 
      avatars={[
        { src: '/images/avatar1.jpg', alt: 'User 1', sizeClass: 'size-8' },
        { src: '/images/avatar2.jpg', alt: 'User 2', sizeClass: 'size-10' }
      ]} 
    />
  );
}

Or you can import specific components by path:

import { default as AvatarCircularAvatars } from '@whytea/lemongrass/application/elements/avatar/circular-avatars';

Component Categories

The library includes various components organized by category:

Application Elements

• Avatar components (circular avatars, rounded avatars, with notifications, etc.)
• Badges, buttons, cards, dropdowns, and more UI elements

Application Forms

• Input components, checkboxes, radio buttons, toggles, etc.
• Form layouts and validation

Application Feedback

• Alerts, notifications, and other feedback elements

Application Navigation

• Breadcrumbs, menus, tabs, navigation bars, etc.

Application Overlays

• Modals, drawers, notifications, and other overlay components

Marketing Components

• Hero sections, feature sections, headers, and other marketing elements

Next.js Integration

This library includes components that use Next.js features like next/link and next/image. These are kept as external dependencies and not bundled with the library to avoid conflicts with your application's Next.js instance. This approach ensures proper compatibility with Next.js routing, SSR, and image optimization.

Build & Architecture

Overview

This library uses Rollup as a bundler, with rollup-plugin-esbuild for fast TypeScript and JSX compilation, and rollup-plugin-dts for generating type definitions.

We use preserveModules: true to keep modules tree-shakable and readable, and a secondary copy of .tsx source files is preserved for Tailwind CSS compatibility during content scanning.

Build Output

After running yarn build, the following structure is generated:

dist/         # Compiled .js files (ESM)
dist/*.d.ts   # TypeScript definitions
dist/components.json   # Metadata describing components
dist-tw/      # Raw .tsx files (for Tailwind content scanning only)

Tailwind Compatibility

Tailwind's JIT mode doesn't reliably detect class names in minified or compiled React.createElement output. To solve this:

• We copy all .tsx files into dist-tw/
• Consuming apps must include dist-tw/**/*.tsx in their tailwind.config.ts:

content: [
  './src/**/*.{ts,tsx}',
  './node_modules/@whytea/lemongrass/dist-tw/**/*.{tsx}'
]

This ensures Tailwind sees all literal class strings and builds the correct CSS.

Build Features

• "use client" directives are preserved with a custom plugin to support RSC
• components.json is copied from src/components/components.json to dist/
• .tsx files are copied for dev/scan purposes (not executed at runtime)

How to Build

yarn build

This will:

1. Clean output folders
2. Compile TypeScript to ESM in dist/
3. Emit .d.ts files
4. Copy components.json
5. Copy .tsx files to dist-tw/

Publishing

Only the necessary files are published:

"files": [
  "dist",
  "dist-tw"
]

Apps consume dist/index.js + dist/index.d.ts, and Tailwind scans dist-tw/**/*.tsx.

Contributing

See CONTRIBUTING.md for details on how to contribute to this project.

License

MIT