shadcnui-helper

shadcn/ui Helper

When to use

• To integrate or upgrade shadcn/ui in React/Next.js/Vite/Remix/Astro frameworks
• To install components via the CLI, view props/dependencies, and debug interactions or themes
• When conflicts arise in integrations such as Tailwind, Radix, and dark mode, or when you need to troubleshoot SSR/CSR, hydration, and TS configuration issues

You must consult the documentation first

1. Visit the sole entry point https://ui.shadcn.com/llms.txt(the official index).
2. Search the index for the topic or component you need, and copy the corresponding Markdown URL.
3. Use webfetch <URL> to fetch the content, read the dependencies, props, slots, and accessibility notes in full, and only then start implementing.
4. If you encounter new issues during implementation, go back to the index to look up the relevant entries; never write from memory.

Example workflow

Example 1: Installing the Button component

1. Open llms.txt, find the Button entry and get its URL.
2. webfetch Read the Button documentation, and confirm the dependencies (such as lucide-react) and the variant/size props.
3. Run npx shadcn-ui@latest add button, and check the components/ and lib/ new files.
4. Reference the new component in the page, and test the hover/focus/disabled states according to the documentation.

Example 2: Enabling the dark theme

1. In llms.txt , search for the two entries Dark mode/Theming, and use webfetch to read each one.
2. Update components.jsonaccording to the documentation (such as style: "default"）、tailwind.config.ts、globals.css CSS variables in
3. Add class="dark" toggle logic to the root node, and verify the light/dark modes and token mapping.
4. If you have custom tokens, go back to the index to find the extended sections of the Theming documentation to confirm the approach.