shadcn-ui

Run pnpm dlx shadcn@latest add followed by the component name, installing foundation components like button, input, and card first. Feature components such as form, dialog, and table are added afterward as needed, with external dependencies installed separately via pnpm add.

Install the form component plus react-hook-form, zod, and @hookform/resolvers, then define a zod schema and use FormField with FormItem, FormLabel, FormControl, and FormMessage. Pass field props individually with value={field.value ?? ''} instead of spreading to avoid null value errors.

Radix Select does not accept empty strings as item values, so <SelectItem value=""> throws an error. Use a sentinel value like "__any__" for options such as "All", then convert it back to an empty string when reading the selected value.

Yes, by combining the table component with @tanstack/react-table. Use useReactTable with getSortedRowModel, getFilteredRowModel, and getPaginationRowModel to enable column sorting, global search, and page navigation controls.

Dynamic imports like LucideIcons[iconName] get tree-shaken in production, so icons fail to render. Use an explicit icon map with direct named imports such as { Home, Users, Settings } to guarantee the icons are bundled.

Set up the Tailwind theme infrastructure first, including CSS variables, ThemeProvider, dark mode, components.json, and the cn() utility. shadcn/ui components rely on these semantic tokens, so installing components before the theme exists produces unstyled output.