var Component=(()=>{var N=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(e,s)=>()=>(s||e((s={exports:{}}).exports,s),s.exports),S=(e,s)=>{for(var t in s)i(e,t,{get:s[t],enumerable:!0})},d=(e,s,t,n)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of g(s))!v.call(e,l)&&l!==t&&i(e,l,{get:()=>s[l],enumerable:!(n=k(s,l))||n.enumerable});return e};var b=(e,s,t)=>(t=e!=null?N(x(e)):{},d(s||!e||!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),y=e=>d(i({},"__esModule",{value:!0}),e);var u=f((q,m)=>{m.exports=_jsx_runtime});var D={};S(D,{default:()=>P,frontmatter:()=>w});var a=b(u()),w={title:"Separator",description:"A simple separator component",name:"text",component:"Separator"};function j(e={}){let{wrapper:s}=e.components||{};return s?(0,a.jsx)(s,Object.assign({},e,{children:(0,a.jsx)(t,{})})):t();function t(){let n=Object.assign({h1:"h1",pre:"pre",code:"code",div:"div",span:"span",h3:"h3",p:"p",a:"a"},e.components),{Description:l,HeroContainer:r,SeparatorDemo:o,Highlights:p,PropsTable:h}=n;return l||c("Description",!0),r||c("HeroContainer",!0),p||c("Highlights",!0),h||c("PropsTable",!0),o||c("SeparatorDemo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"separator",children:"Separator"}),` `,(0,a.jsx)(l,{children:"Create borders between components."}),` `,(0,a.jsx)(r,{children:(0,a.jsx)(o,{})}),` `,(0,a.jsx)(n.pre,{children:(0,a.jsxs)(n.code,{className:"language-jsx",hero:"",template:"Separator",children:[(0,a.jsxs)(n.div,{"data-line":"1",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"2",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Paragraph"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Separator"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"XStack"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"YStack"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'tamagui'"}),` `]}),(0,a.jsx)(n.div,{"data-line":"3",className:"highlight-line","data-highlighted":"true",children:` `}),(0,a.jsxs)(n.div,{"data-line":"4",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SeparatorDemo"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"5",className:"highlight-line","data-highlighted":"true",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.div,{"data-line":"6",className:"highlight-line","data-highlighted":"true",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"YStack"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"w"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"100%",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"maw"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"300"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"mx"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"15"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"7",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Paragraph"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"fontWeight"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"800",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Tamagui"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"8",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Paragraph"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"An cross-platform component library."}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"9",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Separator"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"my"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"15"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"10",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"XStack"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"h"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"20"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"ai"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"center",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"11",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Paragraph"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Blog"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"12",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Separator"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"als"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stretch",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"vertical"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"mx"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"15"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"13",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Paragraph"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Docs"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"14",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Separator"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"als"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stretch",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"vertical"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"mx"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"15"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"15",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Paragraph"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Source"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"16",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"17",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.div,{"data-line":"18",className:"highlight-line","data-highlighted":"true",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.div,{"data-line":"19",className:"highlight-line","data-highlighted":"true",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.div,{"data-line":"20",className:"highlight-line","data-highlighted":"true",children:` `})]})}),` `,(0,a.jsx)(p,{features:["Supports horizontal and vertical orientation."]}),` `,(0,a.jsx)(n.h3,{id:"separator-props",children:"Separator props"}),` `,(0,a.jsxs)(n.p,{children:["Separators extend Stack views inheriting all the ",(0,a.jsx)(n.a,{href:"/docs/intro/props",children:"Tamagui standard props"}),", plus:"]}),` `,(0,a.jsx)(h,{data:[{name:"vertical",required:!1,type:"boolean",description:"Show vertical separator."}]})]})}}var P=j;function c(e,s){throw new Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(D);})(); ;return Component;

Prop	Type	Default
`vertical`	`boolean`
Show vertical separator.

Getting Started

Core

Tamagui

Separate Components

Extras

Guides

Community

Separator

Features

Separator props