- {props.iconset.split(',').map((icon, index) => (
-
})
+
+ {props.iconset.split(',').map((icon, index, array) => (
+
+
+ {index < array.length - 1 && (
+
+ +
+
+ )}
+
))}
)}
diff --git a/src/components/global/DocsCard/styles.module.scss b/src/components/global/DocsCard/styles.module.scss
index 8b3955f0fe9..a57e862b16c 100644
--- a/src/components/global/DocsCard/styles.module.scss
+++ b/src/components/global/DocsCard/styles.module.scss
@@ -116,20 +116,19 @@ docs-card[disabled]::after {
.Card-icon-row {
position: relative;
+ display: flex;
+ gap: 8px;
}
- .Card-iconset__container {
- position: relative;
- }
-
- .Card-iconset__container .Card-icon {
- position: absolute;
- opacity: 0;
- transition: 0.8s opacity;
- }
-
- .Card-iconset__container .Card-icon--active {
- opacity: 1;
+ .Card-plus-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 48px;
+ color: var(--docs-card-border-c);
+ font-size: 22px;
+ font-weight: 600;
}
.Card-ionicon {
diff --git a/src/components/global/DocsCards/cards.css b/src/components/global/DocsCards/cards.css
index eadaa0350b0..760d7c90465 100644
--- a/src/components/global/DocsCards/cards.css
+++ b/src/components/global/DocsCards/cards.css
@@ -2,7 +2,17 @@ docs-cards {
display: grid;
font-size: 12px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
- grid-gap: 1.35rem;
+ gap: 1.35rem;
+}
+
+/*
+ * This prevents a single card from stretching the full width by
+ * forcing a 2-column grid layout (a single card will only take up
+ * 1 column instead of stretching across both). This is used on the
+ * Packages & CDN page by the JavaScript section.
+ */
+docs-cards:has(docs-card:only-child) {
+ grid-template-columns: 1fr 1fr;
}
docs-cards > docs-card {
diff --git a/vercel.json b/vercel.json
index 5ab15d8df22..8c7509aaf63 100644
--- a/vercel.json
+++ b/vercel.json
@@ -94,7 +94,15 @@
"destination": "/docs/vue/your-first-app/deploying-mobile"
},
{ "source": "/docs/vue/your-first-app/7-live-reload", "destination": "/docs/vue/your-first-app/live-reload" },
- { "source": "/docs/react/testing", "destination": "/docs/react/testing/introduction" }
+ { "source": "/docs/react/testing", "destination": "/docs/react/testing/introduction" },
+ {
+ "source": "/docs/react/adding-ionic-react-to-an-existing-react-project",
+ "destination": "/docs/react/add-to-existing"
+ },
+ {
+ "source": "/docs/:version(v7)/react/adding-ionic-react-to-an-existing-react-project",
+ "destination": "/docs/:version/react/add-to-existing"
+ }
],
"rewrites": [
{ "source": "/docs", "destination": "/" },
diff --git a/versioned_docs/version-v7/react/add-to-existing.md b/versioned_docs/version-v7/react/add-to-existing.md
new file mode 100644
index 00000000000..929bed987fb
--- /dev/null
+++ b/versioned_docs/version-v7/react/add-to-existing.md
@@ -0,0 +1,370 @@
+---
+title: Add to Existing React Project
+sidebar_label: Add to Existing
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+
+
Add Ionic React to Existing Project: Integration Guide
+
+
+
+This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.md) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.md).
+
+:::tip
+
+This guide uses TypeScript examples. If you're using JavaScript, the setup process is the same, but you'll use `.jsx` file extensions instead of `.tsx`.
+
+:::
+
+## Setup
+
+:::info
+
+This guide follows the structure of a React app created with Vite. If you started your React app using a different tool (such as Create React App), your file structure and setup may differ.
+
+:::
+
+Follow these steps to add Ionic React to your existing React project:
+
+#### 1. Install the Package
+
+```bash
+npm install @ionic/react
+```
+
+#### 2. Configure Ionic React
+
+Update `src/App.tsx` to include `setupIonicReact` and import the required Ionic Framework stylesheets:
+
+```tsx title="src/App.tsx"
+// ...existing imports...
+
+import { setupIonicReact } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+setupIonicReact();
+
+// ...existing app function and export...
+```
+
+`setupIonicReact` is a function that sets up the Ionic React components to work with your app. It is required to be called before using any of the Ionic React components.
+
+:::info
+
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, see [Global Stylesheets](/docs/layout/global-stylesheets.md).
+
+:::
+
+## Using Individual Components
+
+After completing the setup above, you can start using Ionic components in your existing React app. Here's an example of how to use them:
+
+Update `src/App.tsx` to the following:
+
+```tsx title="src/App.tsx"
+import { IonButton, IonDatetime, setupIonicReact } from '@ionic/react';
+import './App.css';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+setupIonicReact();
+
+const App: React.FC = () => (
+ <>
+
Button
+
+
+);
+
+export default App;
+```
+
+Visit the [components](/docs/components.md) page for all of the available Ionic components.
+
+:::tip
+
+If your existing React app imports a global stylesheet (such as `index.css`) in `src/main.tsx`, you may want to remove it or update any styles that conflict with Ionic Framework components. Ionic Framework includes its own CSS reset and normalization, which may conflict with existing global styles.
+
+:::
+
+## Using Ionic Pages
+
+If you want to use Ionic pages with full navigation and page transitions, follow these additional setup steps.
+
+#### 1. Add Additional Ionic Framework Stylesheets
+
+Update the imported stylesheets in `src/App.tsx`:
+
+```tsx title="src/App.tsx"
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+```
+
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+
+#### 2. Set up Theming
+
+Create a `src/theme/variables.css` file with the following content:
+
+```css title="src/theme/variables.css"
+/* For information on how to create your own theme, please refer to:
+https://ionicframework.com/docs/theming/ */
+```
+
+Then, import the file and the dark palette stylesheet in `src/App.tsx`:
+
+```tsx title="src/App.tsx"
+// ...existing imports...
+
+// ...existing stylesheets...
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please refer to:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import '@ionic/react/css/palettes/dark.always.css'; */
+/* @import '@ionic/react/css/palettes/dark.class.css'; */
+import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+setupIonicReact();
+
+// ...existing app function and export...
+```
+
+The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`.
+
+#### 3. Update the App Component
+
+Update `src/App.tsx` to the following:
+
+```tsx title="src/App.tsx"
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please refer to:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import '@ionic/react/css/palettes/dark.always.css'; */
+/* @import '@ionic/react/css/palettes/dark.class.css'; */
+import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+setupIonicReact();
+
+const App = () => {
+ return (
+
+
+ {/* Routes will be added here */}
+
+
+ );
+};
+
+export default App;
+```
+
+#### 4. Create a Home Page
+
+Create a new file at `src/pages/Home.tsx` with the following:
+
+```tsx title="src/pages/Home.tsx"
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+import './Home.css';
+
+const Home = () => {
+ return (
+
+
+
+ Home
+
+
+
+
+
+
+ Home
+
+
+
+
+
+
+ );
+};
+
+export default Home;
+```
+
+Then, create `src/pages/Home.css`:
+
+```css title="src/pages/Home.css"
+#container {
+ text-align: center;
+
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+#container strong {
+ font-size: 20px;
+ line-height: 26px;
+}
+
+#container p {
+ font-size: 16px;
+ line-height: 22px;
+
+ color: #8c8c8c;
+
+ margin: 0;
+}
+
+#container a {
+ text-decoration: none;
+}
+```
+
+#### 5. Set up Routing
+
+:::important
+
+Ionic React Router currently only supports React Router v5. You must install the following specific versions of the router packages to set up routing with Ionic React.
+
+:::
+
+Install the router packages:
+
+```bash
+npm install @ionic/react-router react-router@5 react-router-dom@5
+npm install @types/react-router-dom --save-dev
+```
+
+Then, update `src/App.tsx` to add the routes for the Home page:
+
+```tsx title="src/App.tsx"
+import { Redirect, Route } from 'react-router-dom';
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import Home from './pages/Home';
+
+// ...existing Ionic Framework stylesheet imports...
+
+setupIonicReact();
+
+const App: React.FC = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default App;
+```
+
+You're all set! Your Ionic React app is now configured with full Ionic page support. Run `npm run dev` to start your development server and view your app.
+
+## Next Steps
+
+Now that you have Ionic React integrated into your project, check out:
+
+
+
+
+ Discover how to handle routing and navigation in Ionic React apps using the React Router.
+
+
+
+ Explore Ionic's rich library of UI components for building beautiful apps.
+
+
+
+ Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+
+
+
+ Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
+
+
+
diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md
deleted file mode 100644
index 20bf7b3fcb7..00000000000
--- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# Adding To An Existing React App
-
-This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic.
-
-### Using Individual Ionic Components
-
-Ionic React has around 100 components that you can begin using in your app immediately to help make it more mobile-friendly.
-
-To get started with using components install the `@ionic/react` package:
-
-```bash
-npm i @ionic/react
-```
-
-Import the stylesheets from Ionic in your main app file:
-
-```tsx title="App.tsx"
-import '@ionic/react/css/core.css';
-```
-
-Add the `setupIonicReact` function to your app:
-
-```tsx title="App.tsx"
-import { setupIonicReact } from '@ionic/react';
-
-setupIonicReact();
-
-const App = () => {
- return (
- ...
- );
-}
-
-export default App;
-```
-
-:::note
-
-`setupIonicReact` is a function that will set up the Ionic React components to work with your app. It is required to be called before using any of the Ionic React components.
-
-:::
-
-You can import any of the components and begin to use them right away. Here we are importing the `IonButton` and `IonDatetime` components and using them anywhere in our app:
-
-```tsx
-import React from 'react';
-import { IonButton, IonDatetime } from '@ionic/react';
-
-const MyComponent = () => {
- return (
- <>
-
-
Start
-
- );
-};
-```
-
-### Using Ionic Pages
-
-If you want to convert part of your app and give it the whole Ionic experience, there are a few additional steps to take to get this setup.
-
-First, import some additional CSS files that help set up the overall structure of the page and some utility helpers:
-
-```js
-/* Basic CSS for apps built with Ionic */
-import '@ionic/react/css/normalize.css';
-import '@ionic/react/css/structure.css';
-import '@ionic/react/css/typography.css';
-
-/* Optional CSS utils that can be commented out */
-import '@ionic/react/css/padding.css';
-import '@ionic/react/css/float-elements.css';
-import '@ionic/react/css/text-alignment.css';
-import '@ionic/react/css/text-transformation.css';
-import '@ionic/react/css/flex-utils.css';
-import '@ionic/react/css/display.css';
-```
-
-If you are using another CSS framework (like Bootstrap), you might want to isolate the Ionic pages away from them. This will help to ensure there aren't any CSS conflicts between the libraries.
-
-Next, install the `@ionic/react-router` library:
-
-```bash
-npm i @ionic/react-router
-```
-
-The Ionic React Router library is a small wrapper around the popular React Router library and helps provide the functionality we need for native-like page transitions. The Ionic React Router library is compatible with v5 of React Router.
-
-The main Ionic page will need a couple of base components. First, use a `IonApp` component (from `@ionic/react`) as the root component, and then use `IonReactRouter` (from `@ionic/react-router`).
-
-`IonApp` sets up our main container, with the necessary styling needed for our structural components. `IonReactRouter` is a small wrapper for React Routers `BrowserRouter` and should be used in its place.
-
-Then, wrap all your routes in an `IonRouterOutlet`, which is what manages our Ionic pages.
-
-```tsx
-import { IonApp, IonRouterOutlet } from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-
-...
-
-
-
-
-
-
-
-
-
-```
-
-Now you can setup Ionic pages like so:
-
-```tsx
-
-
-
- My Page
-
-
-
-
- Start
-
-
-```
-
-:::note
-
-`IonPage` is important to have as the base component for your "Ionic" pages. `IonPage` is the element Ionic performs page transitions on.
-
-:::
-
-For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation).
-
-### Customize the Theme
-
-To customize the look and feel of the components, Ionic has CSS variables you can [override](https://ionicframework.com/docs/theming/colors#modifying-colors) to provide a theme for your components. Set these in your main CSS file.
-
-For more info on theming your Ionic app, see the guide [here](/docs/theming/themes).
-
-### Wrapping up
-
-Adding Ionic React to an existing React project is fairly simple and can be done in just a few minutes.
-
-The great thing about using individual components from Ionic React is that you only import the component you need. This makes Ionic React ideal for adding it to existing projects that need to look and work great on mobile devices.
diff --git a/versioned_sidebars/version-v7-sidebars.json b/versioned_sidebars/version-v7-sidebars.json
index 3495cf3d822..0e3dc75dd63 100644
--- a/versioned_sidebars/version-v7-sidebars.json
+++ b/versioned_sidebars/version-v7-sidebars.json
@@ -127,7 +127,7 @@
"react/your-first-app/distribute"
]
},
- "react/adding-ionic-react-to-an-existing-react-project",
+ "react/add-to-existing",
"react/lifecycle",
"react/navigation",
"react/virtual-scroll",