Is the Components Package in Dify Chat Still Supported?

The @dify-chat/components package is officially marked for deprecation ("即将废弃") and is no longer considered a long-term supported part of the lexmin0412/dify-chat codebase, though it remains at version 0.7.1 and still builds today.

While the package continues to exist in the repository and can be imported into existing projects, maintainers explicitly advise against adding new dependencies on it. According to the project's internal guidelines and roadmap, the UI component library is slated for removal, with @dify-chat/theme serving as the actively maintained alternative for themed UI primitives.

Current Deprecation Status

The deprecation notice appears in two critical repository documents. In AGENTS.md (lines 7-9), the package is explicitly labeled "即将废弃" (to be deprecated soon), with maintainers warning developers not to import this package from other sub-packages or modify its source without explicit consent.

Additionally, the archived roadmap at docs/archived/roadmap.md (lines 46-48) lists the components package as a completed item that is scheduled for removal from the codebase. The most recent changelog entry publishes version 0.7.1, but no further feature development is planned.

Architectural Context and Migration Path

The Dify Chat monorepo has shifted toward a theme-centric architecture. While @dify-chat/components historically provided pure React components like HeaderLayout and ThemeSelector, the modern approach centralizes UI primitives within @dify-chat/theme.

Layer	Package	Status	Recommended Action
UI Components	@dify-chat/components	Deprecated	Do not add new dependencies
Theme System	@dify-chat/theme	Actively maintained	Migrate existing UI code here
Core Logic	@dify-chat/core	Supported	Continue usage
App Front-ends	react-app, platform	Moving away	Update imports

Deprecated Pattern (Discouraged)

The following import from packages/components/src/layout/header.tsx still functions but should be avoided in new code:

import HeaderLayout from '@dify-chat/components/src/layout/header';

// Example usage - still builds but not supported long-term
function AppHeader() {
  return (
    <HeaderLayout
      title="Dify Chat"
      logoText="Dify"
    />
  );
}

Recommended Alternative

Migrate to @dify-chat/theme, which now re-exports icon components and provides themed primitives via CSS variables:

import { ThemeSelector, LucideIcon } from '@dify-chat/theme';
import { Space } from 'antd';

function NewHeader() {
  return (
    <div className="flex h-16 items-center justify-between px-4">
      <Space className="flex items-center">
        <ThemeSelector>
          <LucideIcon name="moon-star" size={20} />
        </ThemeSelector>
      </Space>
    </div>
  );
}

Key Source Files Referenced

• AGENTS.md: Contains the official deprecation notice at lines 7-9 stating the package will be deprecated soon
• docs/archived/roadmap.md: Lines 46-48 confirm the package is marked for removal in the project roadmap
• packages/components/package.json: Defines version 0.7.1 as the latest published version
• packages/components/src/layout/header.tsx: Implements the HeaderLayout component showing the legacy API surface

Summary

• @dify-chat/components is deprecated and explicitly marked "即将废弃" in AGENTS.md
• Version 0.7.1 is the latest available build, but no future development is planned
• Do not import this package into new sub-packages or features without explicit maintainer consent
• Use @dify-chat/theme for all new UI component needs, including ThemeSelector and LucideIcon
• Migrate existing code away from HeaderLayout and other components in packages/components/src/

Frequently Asked Questions

Can I still use @dify-chat/components in production code?

You can technically import and build with version 0.7.1, but this carries stability risks. According to the repository's AGENTS.md, the maintainers do not guarantee long-term support for this package, and it may be removed in future refactors without a formal migration path.

What replaces the HeaderLayout component from @dify-chat/components?

There is no direct drop-in replacement. As implemented in lexmin0412/dify-chat, you should construct header layouts directly using primitives from @dify-chat/theme (such as ThemeSelector and themed CSS variables) combined with your own layout components or Ant Design's Space and flexbox utilities.

Why is the components package being deprecated while the theme package remains supported?

The architectural shift consolidates UI concerns. @dify-chat/theme provides a more maintainable system of CSS variables and themed primitives that reduces code duplication across the react-app and platform front-ends, whereas @dify-chat/components contained static React components that were difficult to customize across different application contexts.

Will existing apps break if @dify-chat/components is removed from the repository?

If the package is physically deleted from the source, any application still importing from packages/components/src/ will fail to build. The roadmap at docs/archived/roadmap.md indicates this removal is planned, so dependent applications should migrate their imports to @dify-chat/theme or internal component libraries before that occurs.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}