Skip to content

ProjectTemplates.mdx

Latest commit

 

History

History
133 lines (121 loc) · 4.6 KB

ProjectTemplates.mdx

File metadata and controls

133 lines (121 loc) · 4.6 KB

import { Footer, LabelWithWrapping, ProjectTemplate, TableOfContent } from '@sb/components'; import NextLogo from '@sb/images/logo-nextjs.svg'; import ReactRouterLogo from '@sb/images/logo-react-router.svg'; import ViteLogo from '@sb/images/logo-vitejs.svg'; import { Meta } from '@storybook/addon-docs/blocks'; import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label, MessageStrip } from '@ui5/webcomponents-react';

Project Templates & Examples

A curated list of minimal project templates and examples to get started using UI5 Web Components for React.

Templates


<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}> <ProjectTemplate title={'Next.js'} subtitle={'App Router'} logo={NextLogo} logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'} href={'https://github.com/UI5/webcomponents-react/tree/main/templates/nextjs-app'} stackBlitzHref="https://stackblitz.com/github/UI5/webcomponents-react/tree/main/templates/nextjs-app" isTypeScript isTemplate /> <ProjectTemplate title={'Next.js'} subtitle={'Pages Router'} logo={NextLogo} logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'} href={'https://github.com/UI5/webcomponents-react/tree/main/templates/nextjs-pages'} isTypeScript isTemplate /> <ProjectTemplate title={'Vite.js'} logo={ViteLogo} logoAttribution={'Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg '} href={'https://github.com/UI5/webcomponents-react/tree/main/templates/vite-ts'} isTypeScript isTemplate stackBlitzHref="https://stackblitz.com/github/UI5/webcomponents-react/tree/main/templates/vite-ts?file=src%2FApp.tsx" />

Examples

<MessageStrip design={"Information"} hideCloseButton>The examples below are minimal applications built with various frameworks and libraries. They show how to integrate UI5 Web Components for React into your projects and are not intended as UX or accessibility patterns.



<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}> <ProjectTemplate title={'Next.js'} subtitle={'App Router'} logo={NextLogo} logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'} href={'https://github.com/UI5/webcomponents-react/tree/main/examples/nextjs-app'} stackBlitzHref="https://stackblitz.com/github/UI5/webcomponents-react/tree/main/examples/nextjs-app" isTypeScript

<ul>
  <li>
    <Label>Next.js Template using the App Router</Label>
  </li>
  <li>
    <Label>Data Fetching using React Server Components</Label>
  </li>
</ul>
  • Next.js Template using the Pages Router
  • API Routes
  • {`Routing and Data Fetching using the createBrowserRouter of React Router v7`}
  • Cypress Component & E2E Test setup
  • Theming
  • {`React Router v7 with server side rendering`}
  • Theming