From 79d4e4694b32e6e5f8151e8f3afabe663fa6f900 Mon Sep 17 00:00:00 2001 From: alansangeeths <92983079+alansangeeths@users.noreply.github.com> Date: Thu, 6 Mar 2025 12:17:30 +0530 Subject: [PATCH 1/3] Update overview.md --- ej2-react/ui-kit/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ej2-react/ui-kit/overview.md b/ej2-react/ui-kit/overview.md index f38e6727d..8aed710cb 100644 --- a/ej2-react/ui-kit/overview.md +++ b/ej2-react/ui-kit/overview.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Overview: Essential UI Kit for React -The Essential UI Kit for React comprises over 120 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML, CSS, TypeScript, and Syncfusion React components, delivering robust functionality and ease of use. They are compatible with both Tailwind and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories: +The Essential UI Kit for React comprises over 160 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML, CSS, TypeScript, and Syncfusion React components, delivering robust functionality and ease of use. They are compatible with both Tailwind and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories: @@ -88,4 +88,4 @@ The blocks designed and showcased are built using React 18, but you can use othe - Tailwind CSS - Bootstrap 5.3 -Both **Tailwind CSS** and **Bootstrap 5.3** support **Light** and **Dark** modes, allowing you to seamlessly adapt the blocks to your web applications based on user preferences or system settings. This flexibility ensures a consistent and optimal user experience across different environments and devices. \ No newline at end of file +Both **Tailwind CSS** and **Bootstrap 5.3** support **Light** and **Dark** modes, allowing you to seamlessly adapt the blocks to your web applications based on user preferences or system settings. This flexibility ensures a consistent and optimal user experience across different environments and devices. From a8511e01fe8737ab70e75d940783792d0f8a5d66 Mon Sep 17 00:00:00 2001 From: alansangeeths <92983079+alansangeeths@users.noreply.github.com> Date: Thu, 6 Mar 2025 12:18:15 +0530 Subject: [PATCH 2/3] Update overview.md --- ej2-react/ui-kit/overview.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ej2-react/ui-kit/overview.md b/ej2-react/ui-kit/overview.md index 8aed710cb..578db21e8 100644 --- a/ej2-react/ui-kit/overview.md +++ b/ej2-react/ui-kit/overview.md @@ -35,15 +35,19 @@ The Essential UI Kit for React comprises over 160 responsive, ready-to-use, easy
Layouts
    +
  • Header
  • Navigation Bar
  • Sidebar
    • -
  • Floating Menu
  • Search
  • Grid
  • List View
    • +
  • Statistics
    • +
  • Cards
    • +
  • Filter Panel
  • Tile View
    • +
  • Modals
    • +
  • Floating Menu
  • Calendar
    • -
  • Cards
  • Pagination
  • Footer
From 66ab8dce2b209937608f4cebbda0355d4d8dd624 Mon Sep 17 00:00:00 2001 From: alansangeeths <92983079+alansangeeths@users.noreply.github.com> Date: Thu, 6 Mar 2025 12:41:25 +0530 Subject: [PATCH 3/3] 00000: update installation command --- .../ui-kit/build-your-first-react-app-with-blocks.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ej2-react/ui-kit/build-your-first-react-app-with-blocks.md b/ej2-react/ui-kit/build-your-first-react-app-with-blocks.md index db76f65fc..19532bd21 100644 --- a/ej2-react/ui-kit/build-your-first-react-app-with-blocks.md +++ b/ej2-react/ui-kit/build-your-first-react-app-with-blocks.md @@ -13,8 +13,8 @@ domainurl: ##DomainURL## ## Create a new React app A **Next.js** app is used for this example. To create a new app, refer to the official setup guide [here](https://nextjs.org/docs/app/getting-started/installation). This tutorial then walks through the step-by-step process of adding a simple sign-in block to the newly created app, named **my-app**. -> When prompted with the question **"Would you like to use Tailwind CSS?"** during **Next.js** app setup, select **No** to avoid automatically integrating **Tailwind CSS** into your app. - +> * When prompted with the question **"Would you like to use Tailwind CSS?"** during **Next.js** app setup, select **No** to avoid automatically integrating **Tailwind CSS** into your app. +> * When prompted with the question **"Would you like your code inside a `src/` directory?"** during **Next.js** app setup, select **Yes** to maintain consistency with the following steps. ![New React App](images/new-react-app.png) ## Setting up Tailwind or Bootstrap 5.3 theme in the app @@ -31,7 +31,7 @@ If you choose **Tailwind** theme, follow these steps to configure it. ```bash npm install -D tailwindcss@3 postcss autoprefixer - npx tailwindcss init + npx tailwindcss init -p ``` ![Tailwind Installation](images/tailwind-installation.PNG) @@ -228,4 +228,4 @@ Now that everything is set up in **my-app** — including the TSX (HTML and TS), To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the localhost URL displayed in the terminal. This will open the app in your default browser, allowing you to view and experience the simple sign-in block. -![View the app in the browser using the localhost URL](images/view-the-app-in-the-browser-using-the-localhost-URL.png) \ No newline at end of file +![View the app in the browser using the localhost URL](images/view-the-app-in-the-browser-using-the-localhost-URL.png)