Skip to content

Commit 904f5e5

Browse files
Yanko-GeorgievYanko-Georgiev
authored
Merge pull request #713 from telerik/tailwind-example
docs: add tailwind demo
2 parents f373eae + 5ee323e commit 904f5e5

18 files changed

+570
-0
lines changed

‎kendo-vue-tailwind/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎kendo-vue-tailwind/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Kendo UI for Vue + Tailwind CSS
2+
3+
A Vue 3 TypeScript project demonstrating the integration of Kendo UI for Vue components with Tailwind CSS styling.
4+
5+
## Features
6+
7+
- Vue 3 with TypeScript
8+
- Kendo UI for Vue components
9+
- Tailwind CSS integration
10+
- Responsive design
11+
12+
## Getting Started
13+
14+
```bash
15+
# Install dependencies
16+
npm install
17+
18+
# Start development server
19+
npm run dev
20+
21+
# Build for production
22+
npm run build
23+
```
24+
25+
## Tech Stack
26+
27+
- Vue 3.5+ with TypeScript
28+
- Kendo UI for Vue
29+
- Tailwind CSS 4.1+
30+
- Vite

‎kendo-vue-tailwind/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎kendo-vue-tailwind/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "kendo-vue-tailwind",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc -b && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@progress/kendo-theme-default": "^11.1.0",
13+
"@progress/kendo-vue-layout": "^6.4.1",
14+
"@tailwindcss/vite": "^4.1.11",
15+
"tailwindcss": "^4.1.11",
16+
"vue": "^3.5.17"
17+
},
18+
"devDependencies": {
19+
"@vitejs/plugin-vue": "^6.0.0",
20+
"@vue/tsconfig": "^0.7.0",
21+
"typescript": "~5.8.3",
22+
"vite": "^7.0.4",
23+
"vue-tsc": "^2.2.12"
24+
}
25+
}

‎kendo-vue-tailwind/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎kendo-vue-tailwind/src/App.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
import CardsContainer from "./components/CardsContainer.vue";
3+
</script>
4+
5+
<template>
6+
<CardsContainer />
7+
</template>

‎kendo-vue-tailwind/src/assets/kendoka.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎kendo-vue-tailwind/src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎kendo-vue-tailwind/src/components/BaseCard.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<Card
3+
class="shadow-xl transition-shadow h-full flex flex-col justify-between"
4+
>
5+
<CardHeader class="border-b">
6+
<CardTitle>
7+
<span
8+
class="text-2xl font-semibold flex items-center justify-center space-x-2"
9+
>
10+
{{ title }}
11+
</span>
12+
</CardTitle>
13+
</CardHeader>
14+
15+
<CardBody class="text-gray-700 text-sm flex justify-center items-center">
16+
<svg
17+
xmlns="http://www.w3.org/2000/svg"
18+
viewBox="0 0 72 72"
19+
class="w-48 h-48 text-primary"
20+
fill="currentColor"
21+
stroke="currentColor"
22+
stroke-width="1"
23+
>
24+
<component :is="image" />
25+
</svg>
26+
</CardBody>
27+
28+
<CardFooter class="p-6 pb-0 h-20 border-t">
29+
{{ description }}
30+
</CardFooter>
31+
32+
<CardActions layout="end">
33+
<a
34+
class="bg-info text-white rounded-lg w-25 m-1 p-1 hover:shadow-md hover:scale-105 transition-transform"
35+
:href="url"
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
Try It
40+
</a>
41+
</CardActions>
42+
</Card>
43+
</template>
44+
45+
<script setup lang="ts">
46+
import {
47+
Card,
48+
CardHeader,
49+
CardTitle,
50+
CardBody,
51+
CardFooter,
52+
CardActions,
53+
} from "@progress/kendo-vue-layout";
54+
55+
defineProps<{
56+
title: string;
57+
image: any;
58+
description: string;
59+
url: string;
60+
}>();
61+
</script>

‎kendo-vue-tailwind/src/components/CardsContainer.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="max-w-7xl mx-auto px-4 py-8">
3+
<h2 class="text-3xl font-bold text-center mb-8">
4+
Explore Kendo UI for Vue
5+
</h2>
6+
<div
7+
class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-center"
8+
>
9+
<HeaderCard />
10+
<BaseCard
11+
v-for="(card, index) in cards"
12+
:key="index"
13+
:title="card.title"
14+
:image="card.image"
15+
:description="card.description"
16+
:url="card.url"
17+
/>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script setup lang="ts">
23+
import HeaderCard from "./HeaderCard.vue";
24+
import BaseCard from "./BaseCard.vue";
25+
import { h } from "vue";
26+
27+
const cards = [
28+
{
29+
title: "Grid",
30+
image: h("path", {
31+
d: "M0.0,0.0V72.0H60.0l12.0-12.0V0.0ZM66.0,57.52,57.52,66.0H6.0V6.0H66.0ZM18.0,60.0l6.0-6.0h9.0v6.0l6.0-6.0h9.0v6.0l12.0-12.0H54.0V39.0l6.0-6.0H54.0V24.0l6.0-6.0H54.0V12.0H48.0V18.0H39.0V12.0H33.0V18.0H24.0V12.0H18.0V18.0H12.0V24.0H18.0v9.0H12.0v6.0H18.0v9.0H12.0v6.0H18.0ZM39.0,24.0h9.0v9.0H39.0Zm0.0,15.0h9.0v9.0H39.0ZM24.0,24.0h9.0v9.0H24.0Zm0.0,15.0h9.0v9.0H24.0Z",
32+
}),
33+
description:
34+
"The Grid covers everything from edit, sort, group, filter, export to virtualization, accessibility and styling.",
35+
url: "https://www.telerik.com/kendo-vue-ui/components/grid/",
36+
},
37+
{
38+
title: "Chart",
39+
image: h("path", {
40+
d: "M18,27V57h12V27ZM12,42H0v15H12ZM0,69H66l6-6H0ZM63,6.3S63,6,63,6a3,3,0,0,0-6,0,0.76,0.76,0,0,0,0,0.48L43.02,18.21A3,3,0,0,0,42,18a2.82,2.82,0,0,0-1.62,0.54L27,11.79A3,3,0,0,0,21,12a2.79,2.79,0,0,0,0,0.72L6.72,27.15A2.79,2.79,0,0,0,6,27a3.48,3.48,0,0,0-1.11,0.21L0,23.43V27.24l3,2.4S3,30,3,30a3,3,0,0,0,6,0,2.79,2.79,0,0,0,0-0.72L23.28,15A2.79,2.79,0,0,0,24,15a3,3,0,0,0,1.59-0.51L39,21.18A3,3,0,0,0,45,21a2.7,2.7,0,0,0,0-0.48l14.07-11.73A3,3,0,0,0,60,9a2.7,2.7,0,0,0,1.2-0.27L72,16.65V12.96ZM54,21V57h12V21Zm-18,15V57h12V36Z",
41+
}),
42+
43+
description:
44+
"Visualize your data with the collection of 15 series types provided by the Chart component.",
45+
url: "https://www.telerik.com/kendo-vue-ui/components/charts/",
46+
},
47+
{
48+
title: "Scheduler",
49+
image: h("path", {
50+
d: "M60,57.516L51.516,66H12V15H6v51v6h6h42l12-12V15h-6V57.516z M45,0h6v12h-6V0z M21,0h6v12h-6V0z M0,3h18v6H0V3z M54,3v6h12l6-6H54z M30,3h12v6H30V3z M18,24v6h3v6H18v6h3v6H18v6h3v6l6-6h6v6l6-6h6v6l6-6l6-6h-6v-6l6-6h-6v-6l6-6h-6V21h-6v3h-6V21h-6v3H27V21H21v3H18z M27,48v-6h6v6H27z M45,48h-6v-6h6V48z M45,30v6h-6v-6H45z M33,30v6H27v-6H33z",
51+
}),
52+
description:
53+
"A component that helps you organize your daily calendar. Offers multiple calendar views, events editing, time zones, and recurrent events.",
54+
url: "https://www.telerik.com/kendo-vue-ui/components/scheduler/",
55+
},
56+
{
57+
title: "Editor",
58+
image: h("path", {
59+
d: "M12,48H24l6-6H12Zm42,9.51L45.51,66H6V6H54V18l6-6V0H0V72H48l12-12V39l-6,6ZM42,30H12v6h24ZM12,18V24h24l6-6Zm18,33.51h0L21.51,60H30L72,18V9.51Z",
60+
}),
61+
description:
62+
"A features-rich WYSIWYG editor that gives you the freedom to create or edit text content everywhere in your application.",
63+
url: "https://www.telerik.com/kendo-vue-ui/components/editor/",
64+
},
65+
{
66+
title: "Form",
67+
image: h("path", {
68+
d: "M66,15v8.4L36,54l-18-18h8.4l9.6,9.6v0L66,15z M66,6V0H6v72h48l12-12v-27l-6,6v18.6L51.6,66H12V6h48v6L66,6z",
69+
}),
70+
description:
71+
"Control the state of the HTML form. Integrate different components in it and easily implement your scenario.",
72+
url: "https://www.telerik.com/kendo-vue-ui/components/form/",
73+
},
74+
];
75+
</script>

0 commit comments

Comments
 (0)