Installation
How to install and configure mdxui
Installation
Package Installation
pnpm add mdxuiTypeScript Configuration
mdxui is written in TypeScript and provides full type definitions. No additional configuration is needed.
Peer Dependencies
mdxui requires:
react^18.0.0 or ^19.0.0zod^3.24.0 (only if using runtime validation)
Usage
Import Types
import type { SiteComponents, AppComponents } from 'mdxui'
import type { HeroProps, DashboardProps } from 'mdxui'Import from Subpaths
// Site-specific types
import type { SiteComponents, HeroProps } from 'mdxui/site'
// App-specific types
import type { AppComponents, APIKeysProps } from 'mdxui/app'
// Zod schemas for runtime validation
import { HeroPropsSchema, APIKeysPropsSchema } from 'mdxui/zod'Editor Support
mdxui provides excellent editor support with:
- Full IntelliSense for all component props
- JSDoc comments with examples
- Auto-imports in supported editors
Validation
For runtime prop validation, use the Zod schemas:
import { HeroPropsSchema } from 'mdxui/zod'
function Hero(props: unknown) {
const result = HeroPropsSchema.safeParse(props)
if (!result.success) {
console.error('Invalid Hero props:', result.error)
return null
}
const { title, subtitle, cta } = result.data
// ...
}