Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    • Margin
    • Padding
    • Border
    • Border radius
    • Grid
    Create a theme Extend base
arshadcnv0.5.3
Reflex
arshadcnv0.5.3
Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    • Margin
    • Padding
    • Border
    • Border radius
    • Grid
    Create a theme Extend base
arshadcnv0.5.3
  • Start here

    • Get Started
      • Installation
      • Directory structure
      • Configuration
      • Configure your editor
      • MDX
  • Learn the basics

    • Landing page
      • Add a page
      • Add a hero
      • Style the hero
      • Add a block
      • Dynamic block
      • Blocks library
    • Blog
      • Installation
      • Configuration
      • Add an author
      • Add a post
      • Metatags
      • Featured posts
      • Custom blog page
      • Add Disqus
      • Custom slug
      • Author block
      • Previous and next pager
    • Theming
      • Introduction
      • Create a theme
      • Styling
      • Responsive
      • Hover and focus
      • Variants
      • Presets
      • Icons
    • Video
      • Installation
      • Configuration
      • Video type
      • Customization
  • Dig Deeper

    • Components
      • Installation
      • Build a button
      • Style a button
    • Blocks
      • Installation
      • Add a block
      • Using blocks
      • Styling blocks
      • Dynamic blocks
      • useBlock
    • Navs
      • Installation
      • Add a nav
      • Rendering navs
      • Add dropdown
      • Add mega menu
      • useNav
    • Images
      • Local images
      • Remote images
      • Aspect ratio
    • Metatags
      • Installation
      • Options
      • Debug mode
  • Recipes

    • Schema
      • Additional fields
    • Theming
      • Styling components
      • Skipping breakpoints
      • Styling active links
      • Custom syntax highlighting
    • Content
      • Slugs

We are adding support for Nextjs. Get in touch on Twitter to learn more.

See a demo

Configure your editor

Some helpful settings and extensions to make developing with Reflex easier.

VS Code

  1. Install the VSCode MDX extension to add language support for MDX.

  2. Enable ESLint support for .md and .mdx extensions.

.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.options": {
"extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
}
}
ConfigurationMDX

© 2025 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github