Package Exports

@mdxui/widgets
@mdxui/widgets/calendar
@mdxui/widgets/chatbox
@mdxui/widgets/editor
@mdxui/widgets/editor/block
@mdxui/widgets/editor/code
@mdxui/widgets/editor/components
@mdxui/widgets/editor/email
@mdxui/widgets/editor/hooks/use-editor-state
@mdxui/widgets/editor/hooks/use-editor-sync
@mdxui/widgets/editor/markdown
@mdxui/widgets/editor/mdx
@mdxui/widgets/editor/monaco-config
@mdxui/widgets/editor/utils
@mdxui/widgets/editor/wysiwyg
@mdxui/widgets/feedback
@mdxui/widgets/hooks/use-autosave
@mdxui/widgets/hooks/use-client-only
@mdxui/widgets/hooks/use-editor-layout
@mdxui/widgets/hooks/use-media-query
@mdxui/widgets/kanban-board
@mdxui/widgets/link-shortener
@mdxui/widgets/onboarding
@mdxui/widgets/searchbox
@mdxui/widgets/secrets-manager
@mdxui/widgets/smart-datetime-picker
@mdxui/widgets/styles.css
@mdxui/widgets/support
@mdxui/widgets/support/bug-report
@mdxui/widgets/support/contact
@mdxui/widgets/support/error-report
@mdxui/widgets/support/feedback
@mdxui/widgets/support/resolution
@mdxui/widgets/survey-builder

Readme

@mdxui/widgets

Complex, interactive UI widgets for building applications.

Installation

pnpm add @mdxui/widgets

Widgets

Widget	Description	Import
Calendar	Event calendar with day/week/month views	`@mdxui/widgets/calendar`
ChatBox	AI chat interface with streaming support	`@mdxui/widgets/chatbox`
Editor	Rich text editors (Markdown, Code, WYSIWYG, Block, MDX, Email)	`@mdxui/widgets/editor`
KanbanBoard	Drag-and-drop kanban board	`@mdxui/widgets/kanban-board`
LinkShortener	URL shortening interface	`@mdxui/widgets/link-shortener`
Onboarding	Multi-step wizard with field components	`@mdxui/widgets/onboarding`
SearchBox	Command palette search (⌘K)	`@mdxui/widgets/searchbox`
SecretsManager	Environment variable/secrets management	`@mdxui/widgets/secrets-manager`
SmartDateTimePicker	Natural language date/time input	`@mdxui/widgets/smart-datetime-picker`
SurveyBuilder	Drag-and-drop survey/form builder	`@mdxui/widgets/survey-builder`

Usage

Main Entry

Import everything from the main entry:

import { ChatBox, Editor, Calendar, KanbanBoard } from '@mdxui/widgets'
import { SearchProvider, SearchPalette, SearchTrigger } from '@mdxui/widgets'
import { OnboardingWizard, BooleanField, TextInputField } from '@mdxui/widgets'

Subpath Imports (Tree-Shaking)

For smaller bundles, use subpath imports:

import { Calendar } from '@mdxui/widgets/calendar'
import { ChatBox } from '@mdxui/widgets/chatbox'
import { SearchProvider, SearchPalette, SearchTrigger } from '@mdxui/widgets/searchbox'
import { KanbanBoard } from '@mdxui/widgets/kanban-board'

Editor Components

Individual editors can be imported directly:

import { MarkdownEditor } from '@mdxui/widgets/editor/markdown'
import { CodeEditor } from '@mdxui/widgets/editor/code'
import { WYSIWYGEditor } from '@mdxui/widgets/editor/wysiwyg'
import { BlockEditor } from '@mdxui/widgets/editor/block'
import { MDXEditor } from '@mdxui/widgets/editor/mdx'
import { EmailBuilder } from '@mdxui/widgets/editor/email'

Hooks

import { useAutosave } from '@mdxui/widgets/hooks/use-autosave'
import { useMediaQuery } from '@mdxui/widgets/hooks/use-media-query'
import { useEditorLayout } from '@mdxui/widgets/hooks/use-editor-layout'

Storybook

View live examples and documentation:

# From monorepo root
pnpm storybook

Then navigate to Widgets in the sidebar.

Styles

Import the widget styles in your app:

import '@mdxui/widgets/styles.css'