{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Use legacy portal UI components","description":"OpenAPI-generated documentation tool with 24k+ stars on Github - make APIs your company's superpower.","siteUrl":"https://redocly.com","image":"/assets/redocly-card.f670aae34a39545a5ea633a540cb3a4a333a1f23bb2ed3c4a1b17a5fbcf0ac85.db81178d.png","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]},"meta":[{"name":"robots","content":"noindex"}]},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"use-legacy-portal-ui-components","__idx":0},"children":["Use legacy portal UI components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The \"UI components\" from the legacy ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs-legacy/developer-portal"},"children":["Portal"]}," product are supported in Redocly's new suite of products."," ","However, they should only be used to help with migration."," ","We recommend replacing them as soon as possible."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Warn"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The legacy UI components are deprecated and ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["will not receive future updates"]},"."," ","Redocly's new products provide pre-built elements as ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://redocly.com/docs/learn-markdoc/tags/tag-library"},"children":["Markdoc tags"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"install-package","__idx":1},"children":["Install package"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Install the @redocly/portal-legacy-ui package with your package manager:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["npm"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm install --save @redocly/portal-legacy-ui\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["yarn"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"yarn add @redocly/portal-legacy-ui\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["pnpm"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"pnpm add @redocly/portal-legacy-ui\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"import-components","__idx":2},"children":["Import components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At the top of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".tsx"]}," file, import the legacy components from the package:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"import { ThinTile, TileHeader, TileText, WideTile, Box, Flex, Jumbotron } from '@redocly/portal-legacy-ui';\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".tsx"]}," files in your project in two ways:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/realm/customization/create-react-page"},"children":["Creating a page with React"]},", for example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["example.page.tsx"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating a component to use in your theme or a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://redocly.com/docs/learn-markdoc/tags/tag-library"},"children":["Markdoc tag"]},", for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SomeComponent.tsx"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Remember that legacy ui components ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["will not"]}," receive future improvements."," ","Where possible, we recommend factoring them out."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example---landing-page","__idx":3},"children":["Example - landing page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows a landing page built with legacy components from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@redocly/portal-legacy-ui"]}," package:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"example.page.tsx","header":{"title":"example.page.tsx","controls":{"copy":{}}},"source":"import * as React from 'react';\nimport styled from 'styled-components';\nimport { ThinTile, TileHeader, TileText, WideTile, Box, Flex, Jumbotron } from '@redocly/portal-legacy-ui';\nimport { H1, H2 } from '@redocly/theme';\n\nexport const frontmatter = {\n  header: {\n    hide: true,\n  },\n  footer: {\n    hide: true,\n  }\n};\n\nexport default function () {\n  return (\n    <PageWrapper>\n      <HeroBanner>\n        <H1>\n          Example page header\n        </H1>\n        <HeroSubtext>\n          with components from @redocly/portal-legacy-ui\n        </HeroSubtext>\n      </HeroBanner>\n\n      <Features>\n        <Flex justifyContent=\"center\">\n          <SectionHeader>Key Features</SectionHeader>\n          <ThinTile>\n            <TileHeader>Cows</TileHeader>\n            <TileText>Spots, milk, and Mooooooooooo.</TileText>\n          </ThinTile>\n          <ThinTile>\n            <TileHeader>Frogs</TileHeader>\n            <TileText>Hops, long tongues, <br />and ribbit.</TileText>\n          </ThinTile>\n          <ThinTile>\n            <TileHeader>Flamingos</TileHeader>\n            <TileText>Pink, long neck, <br />stands on one leg.</TileText>\n          </ThinTile>\n        </Flex>\n      </Features>\n\n      <About justifyContent=\"center\">\n          <SectionHeader>About Us</SectionHeader>\n          <Description>\n            Visit our delightful farm of cool creatures, where cows roam, frogs leap, and flamingos dance.\n            Our team is dedicated to crafting moo-velous solutions that make life as fun as a sunny day at the pond.\n            We're ready to tackle new challenges with cutting-edge lily pad technology.\n          </Description>\n        <Flex justifyContent=\"center\">\n          <WideTile>\n            <TileHeader>Address</TileHeader>\n            <TileText>\n              1234 Creature Farm<br />\n              Seattle, WA 12345<br />\n              United States\n            </TileText>\n          </WideTile>\n            <WideTile>\n              <TileHeader>Contact Information</TileHeader>\n              <TileText>\n                Email: CowsFrogsFlamingos@example.com<br />\n                Phone: (123) 456-7890<br />\n              </TileText>\n            </WideTile>\n          </Flex>\n      </About>\n    </PageWrapper>\n  );\n}\n\nconst PageWrapper = styled.div`\n  padding: 10px;\n`;\n\nconst Description = styled.p`\n  font-size: 18px;\n  line-height: 1.6;\n  text-align: center;\n`\nexport const About = styled(Box)`\n  background-color: #f8f9fa;\n  padding-top: 20px;\n  margin: 0;\n`\nexport const Features = styled(Box)`\n  border: 1px dotted lightblue;\n  padding-top: 20px;\n`\nexport const SectionHeader = styled(H2)`\n  width: 100%;\n  text-align: center;\n  margin-top: 0;\n`\n\nexport const HeroBanner = styled(Jumbotron)`\n    background-color: lightblue;\n    padding-bottom: 98px;\n`\n\nexport const HeroSubtext = styled.div`\n  font-size: 26px;\n  font-weight: 300;\n  text-align: center;\n  margin-top: 0;\n`;\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":4},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs-legacy/developer-portal/migrate-from-legacy-portal"},"children":["Migrate from legacy Portal"]}]}," - Complete migration guide with step-by-step instructions for moving from the Portal product to modern Realm projects"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://redocly.com/docs/learn-markdoc/tags/tag-library"},"children":["Learn Markdoc"]}]}," - Comprehensive guide to Markdoc syntax and interactive components for enhanced technical writing and content creation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/realm/customization/create-react-page"},"children":["Create React pages"]}]}," - Build custom pages using React components for full control over layout, styling, and interactive functionality"]}]}]},"headings":[{"value":"Use legacy portal UI components","id":"use-legacy-portal-ui-components","depth":1},{"value":"Install package","id":"install-package","depth":2},{"value":"Import components","id":"import-components","depth":2},{"value":"Example - landing page","id":"example---landing-page","depth":2},{"value":"Resources","id":"resources","depth":2}],"frontmatter":{"excludeFromSearch":true,"seo":{"meta":[{"name":"robots","content":"noindex"}],"title":"Use legacy portal UI components"}},"lastModified":"2026-04-17T17:30:39.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs-legacy/developer-portal/use-legacy-ui-components","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}