Zod Schemas
Runtime validation schemas for all mdxui types
Zod Schemas
All mdxui types are backed by Zod schemas for runtime validation. Import schemas from mdxui/zod to validate component props, API payloads, or user inputs.
Installation
Zod is a peer dependency of mdxui:
pnpm add zodUsage
import { HeroPropsSchema, AgentPropsSchema } from 'mdxui/zod'
// Validate props
const result = HeroPropsSchema.safeParse(data)
if (!result.success) {
console.error(result.error)
return
}
// Type-safe access
const validHero = result.data
// Or use parse() to throw on error
const hero = HeroPropsSchema.parse(data)Common Schemas
CTA (Call-to-Action)
import { CTASchema } from 'mdxui/zod'
const cta = CTASchema.parse({
text: 'Get Started',
href: '/signup'
})NavItem
import { NavItemSchema } from 'mdxui/zod'
const nav = NavItemSchema.parse({
label: 'Products',
href: '/products',
icon: 'ShoppingCart',
children: [
{ label: 'Analytics', href: '/products/analytics' },
{ label: 'CRM', href: '/products/crm' }
]
})ThemeMode
import { ThemeModeSchema } from 'mdxui/zod'
const theme = ThemeModeSchema.parse('dark') // 'light' | 'dark' | 'system'Site Component Schemas
All Site component props have corresponding Zod schemas:
import {
SitePropsSchema,
HeaderPropsSchema,
FooterPropsSchema,
FooterLinkGroupSchema,
LandingPagePropsSchema,
PagePropsSchema,
HeroPropsSchema,
FeatureItemSchema,
FeaturesPropsSchema,
PricingTierSchema,
PricingPropsSchema,
TestimonialSchema,
TestimonialsPropsSchema,
CTASectionPropsSchema,
FAQItemSchema,
FAQPropsSchema,
BlogPropsSchema,
BlogPostPropsSchema,
DocsPropsSchema,
DocsPagePropsSchema,
} from 'mdxui/zod'Example:
const hero = HeroPropsSchema.parse({
title: 'Build faster',
subtitle: 'Ship production-ready apps in days',
cta: { text: 'Get Started', href: '/signup' },
variant: 'centered'
})App Component Schemas
All App component props have corresponding Zod schemas:
import {
AuthProviderSchema,
AppPropsSchema,
ShellPropsSchema,
SidebarPropsSchema,
AppHeaderPropsSchema,
DashboardPropsSchema,
SettingsPropsSchema,
DeveloperDashboardPropsSchema,
APIKeysPropsSchema,
WebhooksPropsSchema,
UsagePropsSchema,
TeamPropsSchema,
BillingPropsSchema,
ListViewPropsSchema,
EditViewPropsSchema,
CreateViewPropsSchema,
} from 'mdxui/zod'Site Type Schemas
14 site type schemas for different site categories:
import {
BaseSiteSchema,
MarketingSiteSchema,
DocsSiteSchema,
BlogSiteSchema,
DirectorySiteSchema,
MarketplaceSiteSchema,
CommunitySiteSchema,
PortfolioSiteSchema,
PersonalSiteSchema,
EventSiteSchema,
StorySiteSchema,
APISiteSchema,
AgentSiteSchema,
AgencySiteSchema,
PlatformSiteSchema,
} from 'mdxui/zod'App Type Schemas
17 app type schemas for different application categories:
import {
BaseAppSchema,
DashboardAppSchema,
DeveloperAppSchema,
AdminAppSchema,
SaaSAppSchema,
DataAppSchema,
HeadlessAppSchema,
CRMAppSchema,
BookingAppSchema,
SupportAppSchema,
AgencyAppSchema,
OpsAppSchema,
AgentAppSchema,
WorkflowAppSchema,
InfraAppSchema,
PlatformAppSchema,
ClientPortalAppSchema,
VibeCodeAppSchema,
AppTypeSchema,
} from 'mdxui/zod'Domain Type Schemas
Business model and domain schemas (Nouns):
import {
// Common
BusinessStageSchema,
RevenueModelSchema,
BillingFrequencySchema,
CurrencySchema,
BaseDomainSchema,
// Business Models
StartupPropsSchema,
AgencyPropsSchema,
MarketplacePropsSchema,
SaaSProductPropsSchema,
PlatformPropsSchema,
// Service Models
StudioPropsSchema,
PortalPropsSchema,
DirectoryPropsSchema,
ConsultancyPropsSchema,
VenturePropsSchema,
// Content Models
CreatorPropsSchema,
PublisherPropsSchema,
NewsletterPropsSchema,
// Community Models
CommunityPropsSchema,
DAOPropsSchema,
} from 'mdxui/zod'Agent Type Schemas
AI agent and automation schemas (Verbs):
import {
// Common
AIProviderSchema,
AIModelSchema,
ExecutionStatusSchema,
ExecutionContextSchema,
// Tools
ToolParameterSchema,
ToolPropsSchema,
// Agents
AgentMemorySchema,
AgentPropsSchema,
AgentTeamPropsSchema,
// Workflows
WorkflowStepTypeSchema,
WorkflowStepSchema,
WorkflowPropsSchema,
// Functions
FunctionRuntimeSchema,
FunctionPropsSchema,
// Triggers
TriggerPropsSchema,
// Tasks
TaskPrioritySchema,
TaskStatusSchema,
TaskPropsSchema,
// Prompts & Memory
PromptPropsSchema,
MemoryPropsSchema,
ModelPropsSchema,
} from 'mdxui/zod'Service Type Schemas
API, webhook, and integration schemas:
import {
AuthMethodSchema,
ProtocolSchema,
RateLimitSchema,
HealthCheckSchema,
BaseServiceSchema,
APIPropsSchema,
IntegrationPropsSchema,
WebhookPropsSchema,
EndpointPropsSchema,
ConnectorPropsSchema,
GatewayPropsSchema,
QueuePropsSchema,
StreamPropsSchema,
} from 'mdxui/zod'Widget Type Schemas
Dashboard widgets and visualizations:
import {
// Common
WidgetSizeSchema,
BaseWidgetSchema,
TimePeriodSchema,
TrendSchema,
// Metrics
KPICardPropsSchema,
SparklineCardPropsSchema,
CompareCardPropsSchema,
GoalCardPropsSchema,
CountdownCardPropsSchema,
// Charts
ChartDataPointSchema,
ChartDatasetSchema,
LineChartPropsSchema,
BarChartPropsSchema,
PieChartPropsSchema,
AreaChartPropsSchema,
FunnelChartPropsSchema,
GaugeChartPropsSchema,
HeatmapChartPropsSchema,
// Tables
DataTablePropsSchema,
LeaderboardTablePropsSchema,
ComparisonTablePropsSchema,
ChangelogTablePropsSchema,
// Status
StatusCardPropsSchema,
UptimeCardPropsSchema,
HealthGridPropsSchema,
IncidentCardPropsSchema,
// Activity
ActivityFeedPropsSchema,
NotificationsListPropsSchema,
TaskListPropsSchema,
EventCalendarPropsSchema,
// Actions
QuickActionsPropsSchema,
ShortcutsPropsSchema,
RecentItemsPropsSchema,
FavoritesPropsSchema,
} from 'mdxui/zod'Collection Widget Schemas
Auto-wiring collection widgets:
import {
CollectionNameSchema,
BaseCollectionWidgetSchema,
COLLECTION_WIDGET_MAPPING,
PostsWidgetPropsSchema,
DocsWidgetPropsSchema,
TeamWidgetPropsSchema,
TestimonialsWidgetPropsSchema,
PricingWidgetPropsSchema,
FAQWidgetPropsSchema,
FeaturesWidgetPropsSchema,
GalleryWidgetPropsSchema,
} from 'mdxui/zod'Panel Type Schemas
View panels for different contexts:
import {
BasePanelPropsSchema,
// Navigation
NavPanelPropsSchema,
TabsPanelPropsSchema,
BreadcrumbPanelPropsSchema,
SidebarPanelPropsSchema,
// Collection Display
ListPanelPropsSchema,
TablePanelPropsSchema,
CardsPanelPropsSchema,
KanbanPanelPropsSchema,
CalendarPanelPropsSchema,
TimelinePanelPropsSchema,
GalleryPanelPropsSchema,
TreePanelPropsSchema,
// Detail/Form
DetailPanelPropsSchema,
FormPanelPropsSchema,
PreviewPanelPropsSchema,
PropertiesPanelPropsSchema,
InspectorPanelPropsSchema,
// Input/Editor
ChatPanelPropsSchema,
CodePanelPropsSchema,
EditorPanelPropsSchema,
FilterPanelPropsSchema,
QueryPanelPropsSchema,
JSONPanelPropsSchema,
MarkdownPanelPropsSchema,
// Visualization
MetricsPanelPropsSchema,
ChartPanelPropsSchema,
StatsPanelPropsSchema,
WorkflowPanelPropsSchema,
StateMachinePanelPropsSchema,
GanttPanelPropsSchema,
GraphPanelPropsSchema,
DiagramPanelPropsSchema,
// And many more...
} from 'mdxui/zod'See Panel Types for the full list.
Field Type Schemas
Read-only field display components:
import {
BaseFieldPropsSchema,
FieldAlignmentSchema,
FieldSizeSchema,
TextFieldPropsSchema,
NumberFieldPropsSchema,
DateFieldPropsSchema,
BooleanFieldPropsSchema,
ImageFieldPropsSchema,
FileFieldPropsSchema,
UrlFieldPropsSchema,
EmailFieldPropsSchema,
ChipFieldPropsSchema,
BadgeFieldPropsSchema,
StatusFieldPropsSchema,
RichTextFieldPropsSchema,
MarkdownFieldPropsSchema,
CodeFieldPropsSchema,
ArrayFieldPropsSchema,
ObjectFieldPropsSchema,
JsonFieldPropsSchema,
ReferenceFieldPropsSchema,
ReferenceManyFieldPropsSchema,
ReferenceOneFieldPropsSchema,
FunctionFieldPropsSchema,
ConditionalFieldPropsSchema,
} from 'mdxui/zod'Input Type Schemas
Form input components:
import {
BaseInputPropsSchema,
InputSizeSchema,
InputVariantSchema,
OptionSchema,
TextInputPropsSchema,
TextareaInputPropsSchema,
PasswordInputPropsSchema,
SearchInputPropsSchema,
NumberInputPropsSchema,
CurrencyInputPropsSchema,
SliderInputPropsSchema,
RangeInputPropsSchema,
DateInputPropsSchema,
TimeInputPropsSchema,
DateTimeInputPropsSchema,
DateRangeInputPropsSchema,
SelectInputPropsSchema,
MultiSelectInputPropsSchema,
RadioGroupInputPropsSchema,
CheckboxGroupInputPropsSchema,
BooleanInputPropsSchema,
AutocompleteInputPropsSchema,
FileInputPropsSchema,
ImageInputPropsSchema,
AvatarInputPropsSchema,
RichTextInputPropsSchema,
MarkdownInputPropsSchema,
CodeInputPropsSchema,
JsonInputPropsSchema,
ReferenceInputPropsSchema,
ReferenceArrayInputPropsSchema,
ArrayInputPropsSchema,
ObjectInputPropsSchema,
TagsInputPropsSchema,
ColorInputPropsSchema,
} from 'mdxui/zod'Collection Type Schemas
Data provider and CRUD operation schemas:
import {
SortOrderSchema,
FilterOperatorSchema,
FilterConditionSchema,
SortSpecSchema,
PaginationSchema,
GetListParamsSchema,
GetListResultSchema,
GetOneParamsSchema,
GetManyParamsSchema,
GetManyReferenceParamsSchema,
CreateParamsSchema,
UpdateParamsSchema,
UpdateManyParamsSchema,
DeleteParamsSchema,
DeleteManyParamsSchema,
DataProviderSchema,
RecordContextSchema,
ListContextSchema,
FormContextSchema,
ResourceContextSchema,
CollectionFieldSchema,
CollectionPropsSchema,
CollectionListViewPropsSchema,
ShowViewPropsSchema,
CollectionEditViewPropsSchema,
CollectionCreateViewPropsSchema,
} from 'mdxui/zod'Shell Type Schemas
Shell layout components (aliased to avoid conflicts):
import {
ShellNavItemSchema,
UserContextSchema,
ShellLayoutPropsSchema, // ShellProps
ShellSidebarPropsSchema, // SidebarProps
ShellHeaderPropsSchema, // HeaderProps
BreadcrumbsPropsSchema,
TabsPropsSchema,
UserMenuPropsSchema,
WorkspaceSwitcherPropsSchema,
NotificationBellPropsSchema,
CommandPalettePropsSchema,
SearchBoxPropsSchema,
LogoPropsSchema,
ThemeSwitcherPropsSchema,
} from 'mdxui/zod'View Type Schemas
Application view schemas:
import {
BaseViewPropsSchema,
DashboardViewPropsSchema,
SettingsViewPropsSchema,
ProfileViewPropsSchema,
NotificationsViewPropsSchema,
SearchViewPropsSchema,
APIKeysViewPropsSchema,
WebhooksViewPropsSchema,
UsageViewPropsSchema,
DocsViewPropsSchema,
UsersViewPropsSchema,
RolesViewPropsSchema,
AuditLogViewPropsSchema,
ContactsViewPropsSchema,
CompaniesViewPropsSchema,
DealsViewPropsSchema,
PipelineViewPropsSchema,
ActivitiesViewPropsSchema,
TicketsViewPropsSchema,
InboxViewPropsSchema,
KnowledgeBaseViewPropsSchema,
ProjectsViewPropsSchema,
ClientsViewPropsSchema,
DeliverablesViewPropsSchema,
TimeTrackingViewPropsSchema,
// And many more...
} from 'mdxui/zod'Embeddable Widget Schemas
Widgets that can be embedded in external sites:
import {
EmbedStateSchema,
BaseEmbedSchema,
PaymentFormPropsSchema,
PricingTablePropsSchema,
ExpressCheckoutPropsSchema,
UsersManagerPropsSchema,
OrgSwitcherPropsSchema,
LoginWidgetPropsSchema,
SecuritySettingsPropsSchema,
LiveChatPropsSchema,
VideoEmbedPropsSchema,
BookingWidgetPropsSchema,
AvailabilityGridPropsSchema,
DocumentSignerPropsSchema,
FormEmbedPropsSchema,
DocumentViewerPropsSchema,
AnalyticsDashboardPropsSchema,
MetricEmbedPropsSchema,
} from 'mdxui/zod'Embed Widget Schemas
External site embedding widgets:
import {
WidgetPositionSchema,
WidgetDisplayModeSchema,
BaseEmbedWidgetSchema,
ChatWidgetPropsSchema,
FeedbackWidgetPropsSchema,
SupportWidgetPropsSchema,
EmbedBookingWidgetPropsSchema,
FormWidgetPropsSchema,
PaymentWidgetPropsSchema,
SearchWidgetPropsSchema,
NotificationWidgetPropsSchema,
} from 'mdxui/zod'GitHub Pattern Schemas
GitHub-inspired collaboration patterns:
import {
UserRefSchema,
ReactionSchema,
LabelSchema,
MilestoneSchema,
AssignmentSchema,
CommentSchema,
ThreadSchema,
DiscussionCategorySchema,
DiscussionPropsSchema,
IssuePropsSchema,
ProjectViewTypeSchema,
ProjectColumnSchema,
ProjectFieldSchema,
ProjectItemSchema,
ProjectPropsSchema,
ReviewStateSchema,
MergeMethodSchema,
CheckRunSchema,
PullRequestPropsSchema,
ReviewPropsSchema,
} from 'mdxui/zod'Advanced Usage
Form Validation
Use with React Hook Form for type-safe forms:
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { HeroPropsSchema } from 'mdxui/zod'
const form = useForm({
resolver: zodResolver(HeroPropsSchema),
defaultValues: {
title: '',
subtitle: '',
cta: { text: '', href: '' }
}
})API Validation
Validate API requests and responses:
import { AgentPropsSchema } from 'mdxui/zod'
export async function POST(req: Request) {
const body = await req.json()
// Validate request
const result = AgentPropsSchema.safeParse(body)
if (!result.success) {
return Response.json(
{ error: result.error },
{ status: 400 }
)
}
// Type-safe data access
const agent = result.data
// ...
}Schema Composition
Extend schemas for custom types:
import { z } from 'zod'
import { BaseDomainSchema } from 'mdxui/zod'
const CustomBusinessSchema = BaseDomainSchema.extend({
customField: z.string(),
specialMetric: z.number()
})Partial Schemas
Create partial schemas for updates:
import { AgentPropsSchema } from 'mdxui/zod'
const PartialAgentSchema = AgentPropsSchema.partial()
// Only validate provided fields
const update = PartialAgentSchema.parse({
name: 'Updated Agent'
})Type Inference
Get TypeScript types from Zod schemas:
import { z } from 'zod'
import { HeroPropsSchema } from 'mdxui/zod'
type HeroProps = z.infer<typeof HeroPropsSchema>Note: mdxui already exports TypeScript types, so you typically don't need to infer them from schemas. Use the schemas for runtime validation, and import types from mdxui directly.