NoodleGPT UI Kit

A UI Kit for NoodleGPT applications built with React and TypeScript.

Installation

npm install @noodleseed/gpt-ui-kit

Usage

First, import the CSS file in your application's entry point:

import "@noodleseed/gpt-ui-kit/styles.css";

Then use the components:

import { Button } from "@noodleseed/gpt-ui-kit";

function App() {
  return (
    <Button variant="primary" size="md">
      Click me
    </Button>
  );
}

Components

Every primitive in the kit ships as a typed React component. Import only what you need:

import {
  Box,
  Text,
  Button,
  ButtonIcon,
  Avatar,
  Image,
  Card,
  CardHeader,
  CardContent,
  List,
  ListItem,
  SingleItemCard,
  Carousel,
} from "@noodleseed/gpt-ui-kit";

| Component | Highlights | | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Button, ButtonIcon | Variants for primary/secondary/outline/ghost/danger and inverted themes, sizing tokens (sm, md, lg), full-width support. | | Box | Low-level layout primitive with Tailwind-powered spacing, flex/grid-style props, sizing helpers, and background/border utilities. | | Text | Typography tokens aligned with the design system (heading-*, body-*, caption-*) with theme-aware color presets. | | Avatar | Circular avatars with image support, automatic fallback initials, and size presets. | | Image | Aspect-ratio aware responsive images with objectFit and full-width options. | | Card, CardHeader, CardContent | Composable surfaces with elevation, radius, and action slots. | | List, ListItem | Flexible list layouts with divided/bordered variants, icons/actions, and interactive states. | | SingleItemCard | Higher-level card optimized for menu/catalog style content with media overlays or side media. | | Carousel | Horizontal scroll container with autoplay, looping, custom item sizing, and accessible controls. | | Icons/* | Rich SVG icon set grouped by category (arrows, interface, misc, etc.). |

Full usage snippets and prop tables for each component live in the interactive docs.

Development

# Install dependencies
npm install

# Build the library
npm run build

# Development mode
npm run dev

# Build the docs playground (used for GitHub Pages)
npm run build:docs

GitHub Pages Documentation

The ./dev playground is deployed automatically to GitHub Pages via the Deploy Docs workflow. Whenever changes land on main, the workflow runs npm run build:docs and publishes the contents of docs-dist/.

• Live docs: https://NoodleSeed-com.github.io/noodle-gpt-uikit/

License

ISC