/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h2: "h2", p: "p", pre: "pre", code: "code" }, _provideComponents(), props.components), {LiveCodeEditor, TabContext, ProtectedContent, TabPanel, CodeBlock} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!LiveCodeEditor) _missingMdxReference("LiveCodeEditor", true); if (!ProtectedContent) _missingMdxReference("ProtectedContent", true); if (!TabContext) _missingMdxReference("TabContext", true); if (!TabPanel) _missingMdxReference("TabPanel", true); return _jsxs(_Fragment, { children: [_jsx(LiveCodeEditor, { theme: "dark", sx: { py: '80px', px: '60px', '>div': { width: '100%' } }, children: `

Security that
scales with you.

` }), "\n", _jsx(_components.h2, { children: "Installation" }), "\n", _jsx(TabContext, { defaultValue: "react", children: _jsx(ProtectedContent, { children: _jsxs(TabPanel, { value: "react", children: [_jsx(_components.p, { children: "First install the package from your command line." }), _jsx(CodeBlock, { filename: "Terminal", children: _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install @reverse-ui/react\n" }) }) }), _jsx(_components.p, { children: "Then import the component to your file." }), _jsx(CodeBlock, { children: _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { XRay } from '@reverse-ui/react';\n\nexport default function() {\n return (\n \n

\n Security that
scales with you.\n

\n \n );\n}\n" }) }) })] }) }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

X-Ray

Installation