Ginga UI is an UI component library for React. This libarary is using LLM to styling components. Components will design based on the Website contents or user's prompt.

Ginga (/ɡiɴɡa/) is a Japanese word meaning "galaxy".

• React 18 or later
• Next.js 13 or later (Recommended to use with App Router)
• React Router v7
• React with Vite

• Chrome on macOS, Windows, and Android
• Firefox on macOS and Windows
• Safari on macOS, iOS, and iPadOS
• Edge (chromium) on Windows

npm install @ginga-ui/core

If you are using Next.js App Router, you can import CSS files in the layout.tsx file.

import "@ginga-ui/core/index.css";
import "@ginga-ui/core/variables.css";

import { Button } from "@ginga-ui/core";

const CustomButton = () => {
  return <Button>Button</Button>;
};

export default CustomButton;

You can generate with your own theme by using ThemeClient class powered by Vercel AI SDK.

ThemeClient uses Vercel AI SDK to generate themes. The SDK automatically reads API keys from environment variables:

• OpenAI: OPENAI_API_KEY
• Anthropic: ANTHROPIC_API_KEY
• Google: GOOGLE_API_KEY or GOOGLE_GENERATIVE_AI_API_KEY

Set these environment variables in your .env file or deployment environment.

import { ThemeClient } from "@ginga-ui/core";

const themeClient = new ThemeClient({
  model: "gpt-4o-mini", // Specify the model name
});

const CustomButton = () => {
  const handleClick = async () => {
    await themeClient.generateTheme("the image of you thought");
  };

  return <Button onClick={handleClick}>Button</Button>;
};

export default CustomButton;

If you want to generate theme on server side, you can write like this. Recommended to use with Next.js App Router.

import { Button, ThemeClient } from "@ginga-ui/core";

export default async function Home() {
  const themeClient = new ThemeClient({
    model: "gpt-4o-mini",
  });

  const { CSSCode } = await themeClient.generateTheme("fairy tale");

  return (
    <div>
      <style>{CSSCode}</style>
      <Button>Button</Button>
    </div>
  );
}

ThemeClient automatically detects the provider based on the model name prefix:

• OpenAI: Models starting with gpt- or o1- (e.g., gpt-4o, gpt-4o-mini, o1)
• Anthropic: Models starting with claude- (e.g., claude-3-7-sonnet-latest, claude-3-5-sonnet-latest)
• Google: Models starting with gemini- (e.g., gemini-2.0-flash-exp, gemini-1.5-pro)

You can use any model supported by the Vercel AI SDK.

// OpenAI
const themeClient = new ThemeClient({
  model: "gpt-4o-mini",
});

// Anthropic
const themeClient = new ThemeClient({
  model: "claude-3-7-sonnet-latest",
});

// Google Gemini
const themeClient = new ThemeClient({
  model: "gemini-2.0-flash-exp",
});

All generated design are delivered by CSS variables. You can use these variables on your own CSS.

Additionaly, --color-primary and --color-secondary are generated more variants. This is color scales with --color-background. Here are initial values.

:root {
  --color-primary: #1677ff;
  --color-primary-0: #e3f4ff;
  --color-primary-1: #cce4ff;
  --color-primary-2: #99c5ff;
  --color-primary-3: #63a5ff;
  --color-primary-4: #3689ff;
  --color-primary-5: #1878ff;
  --color-primary-6: #006fff;
  --color-primary-7: #005ee5;
  --color-primary-8: #0054ce;
  --color-primary-9: #0048b6;
  --color-secondary: #000;
  --color-secondary-0: #f8f9fa;
  --color-secondary-1: #f1f3f5;
  --color-secondary-2: #e9ecef;
  --color-secondary-3: #dee2e6;
  --color-secondary-4: #ced4da;
  --color-secondary-5: #adb5bd;
  --color-secondary-6: #868e96;
  --color-secondary-7: #495057;
  --color-secondary-8: #343a40;
  --color-secondary-9: #212529;
  --color-white: #fff;
  --color-black: #000;
  --color-background: #fff;
}

Usage of components can be found in the Storybook.

• Accordion
• Anchor
• Box
• Button
• Card
• Checkbox
• Dialog
• FormControl
• Heading
• Image
• Input
• List
• Paragraph
• Radio
• Select
• Slider
• Switch
• Tab
• Table