@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'