Skip to content

updated the ui kit UG to latest release #658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: hotfix/hotfix-v28.2.3
Choose a base branch
from
Open

updated the ui kit UG to latest release #658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79d4e46
Update overview.md
Mar 6, 2025
a8511e0
Update overview.md
Mar 6, 2025
66ab8dc
00000: update installation command
Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ej2-react/ui-kit/build-your-first-react-app-with-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand Down Expand Up @@ -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)
![View the app in the browser using the localhost URL](images/view-the-app-in-the-browser-using-the-localhost-URL.png)
12 changes: 8 additions & 4 deletions ej2-react/ui-kit/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<table>
<tr>
Expand All @@ -35,15 +35,19 @@ The Essential UI Kit for React comprises over 120 responsive, ready-to-use, easy
<td>Layouts</td>
<td>
<ul>
<li>Header</li>
<li>Navigation Bar</li>
<li>Sidebar</li>
<li>Floating Menu</li>
<li>Search</li>
<li>Grid</li>
<li>List View</li>
<li>Statistics</li>
<li>Cards</li>
<li>Filter Panel</li>
<li>Tile View</li>
<li>Modals</li>
<li>Floating Menu</li>
<li>Calendar</li>
<li>Cards</li>
<li>Pagination</li>
<li>Footer</li>
</ul>
Expand Down Expand Up @@ -88,4 +92,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.
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.