Complex, interactive UI widgets for building applications.
npm install @mdxui/widgetsComplex, interactive UI widgets for building applications.
``bash`
pnpm add @mdxui/widgets
| Widget | Description | Import |
|--------|-------------|--------|
| Calendar | Event calendar with day/week/month views | @mdxui/widgets/calendar |@mdxui/widgets/chatbox
| ChatBox | AI chat interface with streaming support | |@mdxui/widgets/editor
| Editor | Rich text editors (Markdown, Code, WYSIWYG, Block, MDX, Email) | |@mdxui/widgets/kanban-board
| KanbanBoard | Drag-and-drop kanban board | |@mdxui/widgets/link-shortener
| LinkShortener | URL shortening interface | |@mdxui/widgets/onboarding
| Onboarding | Multi-step wizard with field components | |@mdxui/widgets/searchbox
| SearchBox | Command palette search (⌘K) | |@mdxui/widgets/secrets-manager
| SecretsManager | Environment variable/secrets management | |@mdxui/widgets/smart-datetime-picker
| SmartDateTimePicker | Natural language date/time input | |@mdxui/widgets/survey-builder
| SurveyBuilder | Drag-and-drop survey/form builder | |
Import everything from the main entry:
`tsx`
import { ChatBox, Editor, Calendar, KanbanBoard } from '@mdxui/widgets'
import { SearchProvider, SearchPalette, SearchTrigger } from '@mdxui/widgets'
import { OnboardingWizard, BooleanField, TextInputField } from '@mdxui/widgets'
For smaller bundles, use subpath imports:
`tsx`
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'
Individual editors can be imported directly:
`tsx`
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'
`tsx`
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'
View live examples and documentation:
`bash`From monorepo root
pnpm storybook
Then navigate to Widgets in the sidebar.
Import the widget styles in your app:
`tsx``
import '@mdxui/widgets/styles.css'