ant-design / ant-design/x

[Feature Request] Component-level Import/Usage Pattern (Similar to shadcn/ui)

Open
#1,397 0 comments 1 reaction 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
4.8k
Forks
1.2k
Avg merge
3d 3h
Merged PRs (30d)
2

Description

### 需求动机

## Component-level Import/Usage Pattern Request (Similar to shadcn/ui)

### Feature Request

Currently, Ant Design X components are typically imported as a full library or using traditional tree-shaking mechanisms for larger modules.

I would like to propose an enhancement to allow developers to adopt a component-level import and usage pattern, similar to how projects like `shadcn/ui` handle components.

### Motivation

This approach offers several significant benefits:

1. **Fine-Grained Control & Customization:** Developers can copy the source code of a specific component into their project, allowing for deep, component-specific customization without needing to fork the entire Ant Design X repository or rely on complex override mechanisms.
2. **Explicit Dependency Management:** Each used component becomes an explicit, standalone file in the user's codebase, making dependencies clearer and simplifying refactoring.
3. **True Tree-Shaking/Smaller Bundle Size:** While modern bundlers handle tree-shaking well, this pattern ensures that only the truly needed component source code (and its direct Ant Design X dependencies, if any) is included, potentially leading to smaller initial bundle sizes or more predictable build outcomes.
4. **Simplified Component Update Strategy:** Users can choose when and how to update individual components, leading to a more controlled update process.

### Proposal

Could Ant Design X explore providing an official or documented method to facilitate this pattern?

This could involve:

1. **A CLI Tool/Script:** Similar to `shadcn/ui`, a tool that allows users to select a component (e.g., `Attachments`, `Sender`) and have its source code (or a highly customizable template) added directly to their project's component directory.
2. **Modularized Source Code Structure:** Ensuring the source code for each component is highly self-contained, relying on minimal external Ant Design X-specific utilities, making them easy to copy and integrate.

### 提议的 API 是什么样的?

_No response_

Contributor guide

No contributing guide indexed for this repository

Research direction

No files, tests, or entry points are identified in the issue, so begin by locating the component source and package or build entry points. Done would require an agreed official component-copying or CLI approach, with its scope and integration behavior defined.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.