Tabs

Tabs component for organizing content into separate views.

Variant : Button

---
import { Tabs, Tab, TabsReactiveItem , TabsItem} from "@/src/components/hybrid-astro-ui/tabs";
---
<Tabs>
    <TabsItem >
        <Tab group_name="group-1" 
            selected for="tab1">
            Tab 1
        </Tab>
        <TabsReactiveItem>
            This is a short placeholder text used to preview how content will appear in this section.
        </TabsReactiveItem>
    </TabsItem>

    <TabsItem >
        <Tab group_name="group-1"
            for="tab2">
            Tab 2
        </Tab>  
        <TabsReactiveItem>
            Sample text that helps visualize spacing, layout, and typography in the interface.
        </TabsReactiveItem>
    </TabsItem>
</Tabs>

Install

pnpm dlx hybrid-astro-ui@latest add tabs

npx hybrid-astro-ui@latest add tabs

yarn dlx hybrid-astro-ui@latest add tabs

bunx hybrid-astro-ui@latest add tabs

Variant : Underline

---
import { Tabs, Tab, TabsReactiveItem , TabsItem} from "@/src/components/hybrid-astro-ui/tabs";
---
<Tabs>
    <TabsItem >
        <Tab variant="underline" 
            group_name="group-2" 
            selected 
            for="tab-a">
            Tab A
        </Tab>
        <TabsReactiveItem>
            Use this area to display brief information or contextual guidance for users.
        </TabsReactiveItem>
    </TabsItem>

    <TabsItem >
        <Tab variant="underline" 
            group_name="group-2" 
            for="tab-b">
            Tab B
        </Tab>  
        <TabsReactiveItem>
            Temporary content to illustrate structure before real data is added
        </TabsReactiveItem>
    </TabsItem>
</Tabs>

Props