diff --git a/newtests/lsp/documentSymbol/_flowconfig b/newtests/lsp/documentSymbol/_flowconfig
index 1fbe3aa7821..2266810ff95 100644
--- a/newtests/lsp/documentSymbol/_flowconfig
+++ b/newtests/lsp/documentSymbol/_flowconfig
@@ -1,3 +1,4 @@
 [options]
+component_syntax=true
 exact_by_default=false
 enums=true
diff --git a/newtests/lsp/documentSymbol/stuff.js b/newtests/lsp/documentSymbol/stuff.js
index b43ff1d827c..b3730292835 100644
--- a/newtests/lsp/documentSymbol/stuff.js
+++ b/newtests/lsp/documentSymbol/stuff.js
@@ -132,3 +132,6 @@ function loops() {
   for (let j in { x: 123 }) {}
   for (let k of [1, 2, 3]) {}
 }
+
+component ComponentFoo() {}
+declare component ComponentBar();
diff --git a/newtests/lsp/documentSymbol/test.js b/newtests/lsp/documentSymbol/test.js
index 4b3e125326f..d44b196bd1d 100644
--- a/newtests/lsp/documentSymbol/test.js
+++ b/newtests/lsp/documentSymbol/test.js
@@ -2070,6 +2070,54 @@ module.exports = (suite(
                   },
                 ],
               },
+              {
+                name: 'ComponentFoo',
+                kind: 12,
+                range: {
+                  start: {
+                    line: 135,
+                    character: 0,
+                  },
+                  end: {
+                    line: 135,
+                    character: 27,
+                  },
+                },
+                selectionRange: {
+                  start: {
+                    line: 135,
+                    character: 10,
+                  },
+                  end: {
+                    line: 135,
+                    character: 22,
+                  },
+                },
+              },
+              {
+                name: 'ComponentBar',
+                kind: 12,
+                range: {
+                  start: {
+                    line: 136,
+                    character: 0,
+                  },
+                  end: {
+                    line: 136,
+                    character: 33,
+                  },
+                },
+                selectionRange: {
+                  start: {
+                    line: 136,
+                    character: 18,
+                  },
+                  end: {
+                    line: 136,
+                    character: 30,
+                  },
+                },
+              },
             ],
           },
         ],
@@ -3535,6 +3583,40 @@ module.exports = (suite(
                 },
                 containerName: 'loops',
               },
+              {
+                name: 'ComponentFoo',
+                kind: 12,
+                location: {
+                  uri: '<PLACEHOLDER_PROJECT_URL>/stuff.js',
+                  range: {
+                    start: {
+                      line: 135,
+                      character: 0,
+                    },
+                    end: {
+                      line: 135,
+                      character: 27,
+                    },
+                  },
+                },
+              },
+              {
+                name: 'ComponentBar',
+                kind: 12,
+                location: {
+                  uri: '<PLACEHOLDER_PROJECT_URL>/stuff.js',
+                  range: {
+                    start: {
+                      line: 136,
+                      character: 0,
+                    },
+                    end: {
+                      line: 136,
+                      character: 33,
+                    },
+                  },
+                },
+              },
             ],
           },
         ],
diff --git a/src/lsp/documentSymbolProvider.ml b/src/lsp/documentSymbolProvider.ml
index 30ab26a0051..f77233862f7 100644
--- a/src/lsp/documentSymbolProvider.ml
+++ b/src/lsp/documentSymbolProvider.ml
@@ -149,6 +149,32 @@ class visitor =
         this#add_with_children ~loc ~selection ~name ~kind (super#class_expression class_loc) cls
       | `Normal -> this#add_with_children ~loc ~selection ~name ~kind super#expression value
 
+    method! component_declaration loc component =
+      let (name, selection) =
+        Base.Option.value
+          ~default:("<component>", loc)
+          (name_and_loc_of_identifier component.Ast.Statement.ComponentDeclaration.id)
+      in
+      let k = Lsp.SymbolInformation.Function in
+      this#add_with_children
+        ~loc
+        ~selection
+        ~name
+        ~kind:k
+        (super#component_declaration loc)
+        component;
+      component
+
+    method! declare_component loc component =
+      let (name, selection) =
+        Base.Option.value
+          ~default:("<component>", loc)
+          (name_and_loc_of_identifier component.Ast.Statement.DeclareComponent.id)
+      in
+      let k = Lsp.SymbolInformation.Function in
+      this#add_with_children ~loc ~selection ~name ~kind:k (super#declare_component loc) component;
+      component
+
     method class_decl_or_expr f loc (cls : (Loc.t, Loc.t) Ast.Class.t) =
       let open Ast.Class in
       let { id; _ } = cls in