Jin Seed UI

A React design system library that can be published to npm. View UI documentation through Storybook.

Installation

pnpm install jin-seed-ui

or

npm install jin-seed-ui

or

yarn add jin-seed-ui

Usage

Import Styles

Import Jin Seed UI styles in your project:

// main.tsx or App.tsx
import "jin-seed-ui/design-system.scss";

Use Components

import {
  Text,
  Flex,
  Grid,
  Image,
  Skeleton,
  ListRow,
  Spacing,
} from "jin-seed-ui";

function App() {
  return (
    <Flex direction="column" gap="md">
      <Text size="t1" bold>
        Heading
      </Text>
      <Text size="t3">Body text</Text>
    </Flex>
  );
}

Development

# Install dependencies
pnpm install

# Run Storybook (UI documentation)
pnpm storybook

# Build Storybook
pnpm build-storybook

# Build library
pnpm build

Storybook

View and test all components through Storybook:

pnpm storybook

Open http://localhost:6006 in your browser to view the UI documentation.

Project Structure

src/
├── Text/          # Text component
├── Colors/        # Color definitions
├── Flex/          # Flex layout component
├── Grid/          # Grid layout component
├── Image/         # Image component
├── Skeleton/      # Skeleton loading component
├── ListRow/       # ListRow component
├── Spacing/       # Spacing component
├── styles/        # Style files (SCSS)
└── index.ts       # Main entry point

.storybook/        # Storybook configuration
├── main.ts        # Storybook main config
└── preview.ts     # Storybook preview config

Components

• Text: Text component with size, color, and weight controls
• Flex: Flexbox layout component
• Grid: Grid layout component
• Image: Image component
• Skeleton: Loading skeleton component
• ListRow: List row component
• Spacing: Spacing component

For detailed usage of each component, see the Storybook documentation.

Publishing to npm

# Build the library
pnpm build

# Login to npm
npm login

# Publish
pnpm publish

License

MIT