moai-library-shadcn

Run the shadcn/cli v4 init command, choose a framework template such as Next.js, Vite, or Astro, and optionally pass a preset code. The CLI generates components.json, configures Tailwind CSS, sets path aliases, and selects Radix UI or Base UI as the primitive library.

Run the shadcn CLI migrate radix command. It rewrites imports like import * as DialogPrimitive from @radix-ui/react-dialog into direct named imports such as import { Dialog } from radix-ui across the project.

Yes, shadcn/ui provides first-class RTL support. The CLI converts physical CSS classes to logical equivalents at install time, and the migrate rtl command transforms existing projects. Positioned components also accept side values like inline-start and inline-end.

Define a Zod schema with z.object, infer the form values type, and pass zodResolver(schema) to useForm. Wire the form element through form.handleSubmit so validation errors map to each field automatically.

OKLCH replaces HSL as the default color system in shadcn/cli v4, offering perceptually uniform lightness and wider gamut. Only the CSS variable definitions in globals.css change; component code stays identical, and HSL themes continue to work.

Keyboard navigation comes from the underlying Radix UI primitives. If customization removes or overrides those primitives, Tab, Enter, Escape, and arrow-key behavior breaks. Preserve the primitive structure and modify only styling layers.