Default

Dashboard Team Projects

Outline

Dashboard Team Projects

) }`,__src__:"registry/default/example/tabs-navigation/tabs-navigation-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { TabNavigation, TabNavigationLink } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:' "@/components/ui/tabs-navigation"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" TabsNavigationDemo"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"space-y-6"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"h3"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"mb-2 text-sm font-medium"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Default"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigation"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" active>"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Dashboard"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Team"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Projects"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"h3"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"mb-2 text-sm font-medium"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Outline"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigation"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"outline"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" active>"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Dashboard"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"outline"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Team"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"outline"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Projects"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"}"})})]})})}),(0,l.jsx)(n.figure,{__src__:"registry/new-york/example/tabs-navigation/tabs-navigation-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#101010",color:"#FFF"},tabIndex:"0","data-language":"tsx","data-theme":"vesper",__rawString__:`import { TabNavigation, TabNavigationLink } from "@/registry/default/ui/tabs-navigation" export function TabsNavigationDemo() { return ( Dashboard Team Projects ) }`,__src__:"registry/new-york/example/tabs-navigation/tabs-navigation-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { TabNavigation, TabNavigationLink } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:' "@/registry/default/ui/tabs-navigation"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" TabsNavigationDemo"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigation"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" active>"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Dashboard"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Team"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TabNavigationLink"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" href="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Projects"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"}"})})]})})})]})}function A(a={}){let{wrapper:n}=a.components||{};return n?(0,l.jsx)(n,{...a,children:(0,l.jsx)(d,{...a})}):d(a)}function u(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(f);})(); ;return Component;

Tabs Navigation

Default

Outline