other-emerald•7h ago
Migration guide from AntD to Shadcn?
Any guides available if we want to migrate to Shadcn?
2 Replies
Hi @bombillazo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Short answer: there isn’t an official “Ant Design → shadcn/ui” migration guide in the refine docs yet.
What we do have:
- Official UI integrations today are Ant Design, Material UI, Mantine, and Chakra UI. These are first-class packages with refine-specific hooks/components. shadcn/ui is not listed as an official UI package at this time. [UI Libraries; List of packages]
- There is an in-depth blog tutorial showing how to integrate shadcn/ui into a headless refine app using Vite, TailwindCSS, and the shadcn CLI, and how to build a list page with refine’s useTable plus shadcn Table/Pagination/Button/Select. This is the best available “how to adopt shadcn in refine” resource today. [Building a CRUD app; Refine with Shadcn; Integrating Shadcn; Initializing and configuring shadcn; Resource list with shadcn]
- The team has publicly shared they’re working on an official shadcn/ui integration. [Discussion]
What this means for migration:
- There’s no step-by-step “AntD → shadcn” codemod or guide like the AntD v4→v5 migration docs. [AntD migration guide; 3x→4x notes]
- If you want to move from AntD to shadcn/ui today, treat it as:
1) Keep your data/resource logic in refine’s headless hooks (e.g., useTable, useList, useShow),
2) Replace AntD UI components with shadcn/ui components incrementally at the page/component level, following the blog’s integration steps (Tailwind + Vite alias + shadcn CLI), and
3) Rebuild List/Create/Edit/Show UIs using shadcn components while reusing the same refine hooks. [Building a CRUD app; Refine with Shadcn; Integrating Shadcn] If you share a specific AntD page (e.g., a List or Edit) you want to migrate, I can map it to the corresponding shadcn components using the patterns from the blog. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
2) Replace AntD UI components with shadcn/ui components incrementally at the page/component level, following the blog’s integration steps (Tailwind + Vite alias + shadcn CLI), and
3) Rebuild List/Create/Edit/Show UIs using shadcn components while reusing the same refine hooks. [Building a CRUD app; Refine with Shadcn; Integrating Shadcn] If you share a specific AntD page (e.g., a List or Edit) you want to migrate, I can map it to the corresponding shadcn components using the patterns from the blog. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@260960777010151436> Kapa.ai is still learning and improving, please let me know how I did by reacting below.