A comprehensive reference for specialized and less commonly used MDX components in Neon documentation. This guide covers components used in specific scenarios, specialized workflows, and edge cases.
Component status
Some components in this guide are currently unused or may be deprecated in future updates. These are included for reference but may be removed from the codebase.
What you will learn:
How to use specialized MDX components for specific use cases
When to choose specialized components over common ones
Technical requirements and dependencies for specialized components
Best practices for complex component implementations
Quick navigation
- Code display - Enhanced code blocks and external code
- Media components - Video and multimedia content
- Specialized shared components - Feature status indicators
- SDK components - Auto-generated SDK documentation
- Utility components - Forms and specialized UI elements
- Specialized components - Complex and specialized functionality
- Community components - Community engagement features
Code display
Enhanced code blocks and external code embedding.
ExternalCode
Embed code from external sources or files.
<ExternalCode src="https://raw.githubusercontent.com/neondatabase/neon/master/README.md" />Live preview:
[External code loaded from GitHub README.md with syntax highlighting]
Example of external code loading (mocked for showcase):
# Neon Database
Serverless Postgres built for the cloud.
## Key Features
- **Instant provisioning**: Create databases in seconds
- **Autoscaling**: Scale compute up and down automatically
- **Branching**: Create database branches like Git
- **Scale to zero**: Save costs when inactive
## Quick Start
1. Sign up at console.neon.tech
2. Create your first project
3. Connect using your preferred clientMedia components
Components for embedding and displaying multimedia content.
YoutubeIframe
Embedded YouTube video player.
<YoutubeIframe embedId="IcoOpnAcO1Y" />Live preview:
Video
Native video player component.
<Video
sources={[{ src: '/videos/pages/doc/neon-mcp.mp4', type: 'video/mp4' }]}
width={960}
height={1080}
/>Live preview:
Specialized shared components
Status indicators for features in different stages of development and release.
Feature Announcements
Status indicators for features in different stages:
<ComingSoon />
<PrivatePreview />
<PrivatePreviewEnquire />
<EarlyAccess />
<PublicPreview />
<FeatureBeta />
<LRBeta />
<NewPricing />
<LRNotice />
<MigrationAssistant />Live preview:
Feature coming soon
This feature is currently available to members in our Early Access Program. Sign up here or from your user profile settings in the Neon Console.
Private Preview
This feature is currently accessible in Private Preview only.
Early Access
This feature is available for members of our Early Access Program. Read more about joining up here.
New pricing plans
On February 19th, 2024, Neon will launch new, simplified pricing plans. You can see the details of all the plans here.
Enrollment Pause for Logical Replication Beta
We have temporarily paused new enrollments in our Logical Replication Beta program. This pause is aimed at evaluating the feature's performance and incorporating feedback from our early adopters. Please stay tuned for updates, and thank you for your interest. We plan to reopen enrollment again soon.
New feature
If you are looking to migrate your database to Neon, you may want to try our new Migration Assistant, which can help. Read the guide to learn more.
EarlyAccessProps
Status indicator for early access features with custom feature name.
<EarlyAccessProps feature_name="My Feature" />Live preview:
Early Access
My Feature is available for members of our Early Access Program.
Sign up and help shape the future of Neon.
SDK components
Auto-generated components specifically for SDK documentation. These load content from shared templates.
Getting Started
<GetStarted sdkName="Next.js" />SDK Type Components
<SdkUser sdkName="React" />
<SdkProject sdkName="Node.js" />
<SdkUseUser sdkName="Vue" />Note: These SDK components require corresponding files in the content/docs/shared-content/ directory and proper configuration in sharedMdxComponents.
Utility components
Specialized UI components for specific use cases.
RequestForm
Contact or request submission form.
There are types (extension and regions) defined in src/components/shared/request-form/data.js. To define a new type, define a new config in data.js and register it in DATA there.
<RequestForm type="extension" />Live preview:
Request a new extension
Looking for a specific extension in Neon? Suggest one using this form.
ChatOptions
Chat interface options component with a specific use case in the sidebar navigation.
Important: This component is designed for internal navigation use only and should not be used in regular documentation content.
Specialized components
Complex components for specialized functionality and workflows.
AIRule
AI-powered rule component for automated documentation features.
<AIRule name="Example Tool" />Live preview:
How to use
You can use these rules in two ways:
Option 1: Copy from this page
With Cursor, save the rules to
.cursor/rules/{file}and they'll be automatically applied when working with matching files (*.ts,*.tsx).For other AI tools, you can include these rules as context when chatting with your AI assistant - check your tool's documentation for the specific method (like using "Include file" or context commands).
Option 2: Clone from repository
If you prefer, you can clone or download the rules directly from our AI Rules repository.
Once added to your project, AI tools will automatically use these rules when working with Example Tool code. You can also reference them explicitly in prompts.
MCPTools
Model Context Protocol tools integration component.
<MCPTools />Live preview:
Supported actions (tools)
The Neon MCP Server provides the following actions, which are exposed as "tools" to MCP Clients. You can use these tools to interact with your Neon projects and databases using natural language commands.
Project management:
list_projects: Retrieves a list of your Neon projects, providing a summary of each project associated with your Neon account. Supports limiting the number of projects returned (default: 10).describe_project: Fetches detailed information about a specific Neon project, including its ID, name, and associated branches and databases.create_project: Creates a new Neon project in your Neon account. A project acts as a container for branches, databases, roles, and computes.delete_project: Deletes an existing Neon project and all its associated resources.
Branch management:
create_branch: Creates a new branch within a specified Neon project. Leverages Neon's branching feature for development, testing, or migrations.delete_branch: Deletes an existing branch from a Neon project.describe_branch: Retrieves details about a specific branch, such as its name, ID, and parent branch.list_branch_computes: Lists compute endpoints for a project or specific branch, including compute ID, type, size, and autoscaling information.
SQL query execution:
get_connection_string: Returns your database connection string.run_sql: Executes a single SQL query against a specified Neon database. Supports both read and write operations.run_sql_transaction: Executes a series of SQL queries within a single transaction against a Neon database.get_database_tables: Lists all tables within a specified Neon database.describe_table_schema: Retrieves the schema definition of a specific table, detailing columns, data types, and constraints.list_slow_queries: Identifies performance bottlenecks by finding the slowest queries in a database. Requires the pg_stat_statements extension.
Database migrations (schema changes):
prepare_database_migration: Initiates a database migration process. Critically, it creates a temporary branch to apply and test the migration safely before affecting the main branch.complete_database_migration: Finalizes and applies a prepared database migration to the main branch. This action merges changes from the temporary migration branch and cleans up temporary resources.
Query performance tuning:
explain_sql_statement: Analyzes a SQL query and returns detailed execution plan information to help understand query performance.prepare_query_tuning: Identifies potential performance issues in a SQL query and suggests optimizations. Creates a temporary branch for testing improvements.complete_query_tuning: Finalizes and applies query optimizations after testing. Merges changes from the temporary tuning branch to the main branch.
Neon Auth:
provision_neon_auth: Provisions Neon Auth for a Neon project. Sets up authentication infrastructure by creating an integration with Stack Auth (@stackframe/stack).
NextSteps
Component for suggesting next steps in documentation workflows.
<NextSteps />Live preview:
Community components
Components for community engagement and interaction.
CommunityBanner
Community engagement banner for promoting community participation.
<CommunityBanner buttonText="Join Discord" buttonUrl="https://discord.gg/92vNTzKDGp" logo="discord">
Connect with the Neon community!
</CommunityBanner>Live preview:
Usage guidelines
When to use specialized components
- ExternalCode: When you need to embed code from external repositories or sources
- Media Components: For video tutorials, demos, or multimedia content
- Specialized Shared Components: For feature announcements and status updates
- SDK Components: For auto-generated SDK documentation
- Utility Components: For specialized forms and navigation elements
- Specialized Components: For AI-powered features and complex workflows
- Community Components: For community engagement and participation
Best practices
- Use sparingly: These components are specialized and should be used only when appropriate
- Test thoroughly: Specialized components may have specific requirements or dependencies
- Document usage: When using specialized components, document the specific use case
- Consider alternatives: Always consider if a simpler component would work better
- Follow patterns: Use established patterns for similar functionality
Component dependencies
Some specialized components have specific dependencies:
- SDK Components: Require shared content files and proper configuration
- RequestForm: Requires specific type configurations in the data files
- Media Components: May require specific video formats or hosting
- Specialized Components: May have AI or external service dependencies
Component summary
This guide covers specialized MDX components used in specific scenarios. Each component includes:
- MDX syntax: Copy-paste ready code examples
- Live rendering: See exactly how components appear
- Usage guidelines: When and how to use each component
- Dependencies: Requirements and configurations needed
Component categories
| Category | Components | Use Case |
|---|---|---|
| Code Display | ExternalCode | External code embedding |
| Media Components | YoutubeIframe, Video | Multimedia content |
| Specialized Shared Components | Feature Announcements, EarlyAccessProps | Feature status indicators |
| SDK Components | Getting Started, SDK Type Components | Auto-generated SDK documentation |
| Utility Components | RequestForm, ChatOptions | Specialized UI elements |
| Specialized Components | AIRule, MCPTools, NextSteps | Complex and specialized functionality |
| Community Components | CommunityBanner | Community engagement |
For commonly used components, see the Component Guide.