> ## Documentation Index > Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt > Use this file to discover all available pages before exploring further. # Tabs and Toggle Panes export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const timer = setTimeout(() => { setIsLoaded(true); }, 500); return () => clearTimeout(timer); }, []); return
{isLoaded && ` }} />} Powered by Lucidworks Agent Studio
; }; [localhost link]: http://localhost:3000/docs/5/app-studio/reference/gallery/tab [mintlify link]: https://doc.lucidworks.com/docs/5/app-studio/reference/gallery/tab [old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1036 ## Default The standard toggle pane tabs Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ``` ## Line Underlined tabs Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ``` ## Pills Rounded tabs Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ``` ## Simple No styling Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ``` ## Bordered Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ``` ## Line Bordered Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ``` ## Pills Bordered Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ``` ## Simple Bordered Example ```xml wrap theme={"dark"}

Pane 1

Pane 2

Pane 3

 ```