@spark-ai/design NPM

💬 Spark Chat: A free AI Chat framework for building an excellent LLM Chat experience similar to ChatGPT 🔀 Spark Flow: A free, open source workflow suite for building low-code, visual AI operation workflows

✨ Features

Based on Ant Design, compatible with the Ant Design ecosystem.
🛡 Written in TypeScript with predictable static types.
🎨 Multiple preset themes.
⚙️ Lightweight configuration, ready to use out of the box.
☀️ Supports light and dark modes.

📦 Install

npm install antd @ant-design/icons @spark-ai/design

🔨 Usage

import {
  Button,
  ConfigProvider,
  purpleDarkTheme,
  purpleTheme,
} from '@spark-ai/design';
import { Flex } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useState } from 'react';

const App = () => {
  const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;

  const prefix = 'consume';
  return (
    <ConfigProvider
      {...theme} // you can choose from purpleTheme, purpleDarkTheme, carbonTheme and carbonDarkTheme
      prefix={prefix} // prefix for Ant Design and Spark Design
      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // optional parameter, you can get it from https://www.iconfont.cn/
      locale={zhCN} // language pack from Ant Design
    >
      <Flex
        style={{
          backgroundColor: `var(--${prefix}-ant-color-bg-base)`,
          padding: '16px 24px',
        }}
        vertical
        gap={16}
      >
        <div style={{ color: `var(--${prefix}-ant-color-text-base)` }}>
          Hello World!
        </div>
        <Button
          type="primary"
          onClick={() => {
            setColorMode(colorMode === 'light' ? 'dark' : 'light');
          }}
        >
          {colorMode === 'light' ? 'dark' : 'light'} mode
        </Button>
      </Flex>
    </ConfigProvider>
  );
};

export default App;

Built-in Themes

We provide four built-in themes: purpleTheme purpleDarkTheme (for dark mode) carbonTheme carbonDarkTheme (for dark mode)

🏗️ Coming Soon

Our website featuring design language, component documentation, theme switching, icon library and more is coming soon. Stay tuned!