export declare const tabsMdxTemplate = "---\ntitle: \"Tabs\"\ndescription: \"Use the Tabs component to display different content sections in a switchable panel layout.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n# Tabs\n\nUse the Tabs component to display different content sections in a switchable panel layout.\n\nTabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.\n\n## Tabs Usage\n\nYou can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:\n\n````html\n\n \n \u261D\uFE0F This is the content shown only when the first tab is active.\n\n Tabs can include all kinds of components. For example, a simple Java program:\n ```java\n class HelloWorld {\n public static void main(String[] args) {\n System.out.println(\"Hello, World!\");\n }\n }\n ```\n \n \n \u270C\uFE0F Content inside this second tab is separate from the first.\n \n \n \uD83D\uDCAA This third tab contains its own unique content.\n \n\n````\n\n\n \n \u261D\uFE0F This is the content shown only when the first tab is active.\n\n Tabs can include all kinds of components. For example, a simple Java program:\n ```java\n class HelloWorld {\n public static void main(String[] args) {\n System.out.println(\"Hello, World!\");\n }\n }\n ```\n \n \n \u270C\uFE0F Content inside this second tab is separate from the first.\n \n \n \uD83D\uDCAA This third tab contains its own unique content.\n \n\n\nEach tab also accepts an optional `icon` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.\n\n## Keyboard navigation\n\nTabs use the standard horizontal keyboard pattern. Press **Left Arrow** or **Right Arrow** to move between tabs, and **Home** or **End** to jump to the first or last tab. **Up Arrow** and **Down Arrow** continue to scroll the page and are not captured by the tab list.\n\n## Properties\n\n\n The title of the tab.\n\n\n\n Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.\n `rocket`) shown next to the tab title.\n\n\n\n The content of the tabs.\n";