What exactly meaning if we assign ComponentGroup value as ".hidden"?
And also how these type of components will be available to content authors?
If there are any examples please share them.
A componentGroup property set to '.hidden' means the component will be hidden from the side panel Components tab (touch-optimized UI) and the Sidekick (classic UI).
Hidden components can be used by developers as the sling:resourceType of a template, or included directly in a component's script via cq:include (JSP)  or data-sly-resource (Sightly) .