wally-ui 1.8.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/playground/showcase/src/app/components/button/button.html +11 -27
- package/playground/showcase/src/app/components/button/button.ts +3 -0
- package/playground/showcase/src/app/components/carousel/carousel.html +39 -25
- package/playground/showcase/src/app/components/carousel/carousel.ts +80 -104
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +4 -0
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +136 -55
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +4 -0
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.examples.ts +99 -15
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +475 -46
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.ts +13 -1
- package/playground/showcase/src/app/pages/documentation/documentation.html +83 -79
- package/playground/showcase/src/app/pages/documentation/documentation.ts +5 -1
- package/playground/showcase/src/app/pages/home/home.html +69 -45
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/index.html +55 -4
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
1
|
+
<main class="max-w-4xl mx-auto p-6 font-mono" role="main">
|
|
2
|
+
<nav class="mb-4" aria-label="Breadcrumb navigation">
|
|
3
3
|
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
4
|
-
</
|
|
5
|
-
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
</nav>
|
|
5
|
+
|
|
6
|
+
<header class="mb-6">
|
|
7
|
+
<h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
8
|
+
Documentation
|
|
9
|
+
</h1>
|
|
10
|
+
<p class="text-gray-700 dark:text-gray-400">
|
|
11
|
+
Welcome to Wally UI documentation. Learn how to get started and explore our component library.
|
|
12
|
+
</p>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<section id="philosophy" class="mb-8" aria-labelledby="philosophy-heading">
|
|
16
|
+
<h2 id="philosophy-heading" class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">
|
|
16
17
|
A Modern Approach to Angular UI Components
|
|
17
18
|
</h2>
|
|
18
19
|
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
@@ -21,140 +22,143 @@
|
|
|
21
22
|
via npx and becomes your code, ready to edit, customize, and evolve as needed.
|
|
22
23
|
</p>
|
|
23
24
|
|
|
24
|
-
<div class="grid gap-3 md:grid-cols-2 mb-6">
|
|
25
|
-
<
|
|
25
|
+
<div class="grid gap-3 md:grid-cols-2 mb-6" role="list" aria-label="Key features of Wally UI">
|
|
26
|
+
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
26
27
|
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">No External Dependencies</h3>
|
|
27
28
|
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
28
29
|
You control the code, without being tied to third-party updates.
|
|
29
30
|
</p>
|
|
30
|
-
</
|
|
31
|
+
</article>
|
|
31
32
|
|
|
32
|
-
<
|
|
33
|
+
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
33
34
|
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Total Customization</h3>
|
|
34
35
|
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
35
36
|
Since the component is yours, it can be adapted to any design system or business rules.
|
|
36
37
|
</p>
|
|
37
|
-
</
|
|
38
|
+
</article>
|
|
38
39
|
|
|
39
|
-
<
|
|
40
|
+
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
40
41
|
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Lightweight</h3>
|
|
41
42
|
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
42
43
|
Only what you actually add goes into the bundle, without loading dozens of unused components.
|
|
43
44
|
</p>
|
|
44
|
-
</
|
|
45
|
+
</article>
|
|
45
46
|
|
|
46
|
-
<
|
|
47
|
+
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
47
48
|
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Tailwind Integrated</h3>
|
|
48
49
|
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
49
50
|
Modern, responsive, and consistent styles with the power of Tailwind CSS.
|
|
50
51
|
</p>
|
|
51
|
-
</
|
|
52
|
+
</article>
|
|
52
53
|
|
|
53
|
-
<
|
|
54
|
+
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
54
55
|
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Learning & Clarity</h3>
|
|
55
56
|
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
56
57
|
Each component serves as a practical example of Angular best practices.
|
|
57
58
|
</p>
|
|
58
|
-
</
|
|
59
|
+
</article>
|
|
59
60
|
|
|
60
|
-
<
|
|
61
|
+
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
61
62
|
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Standalone Components</h3>
|
|
62
63
|
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
63
64
|
Leverages Angular's latest features, reducing complexity and improving modularity.
|
|
64
65
|
</p>
|
|
65
|
-
</
|
|
66
|
+
</article>
|
|
66
67
|
</div>
|
|
67
68
|
|
|
68
69
|
<p class="text-gray-700 dark:text-gray-400">
|
|
69
70
|
With Wally UI, you gain agility to start projects, flexibility to shape your UI without limitations,
|
|
70
71
|
and simplicity to maintain code long-term. It's the most practical and modern way to build Angular interfaces.
|
|
71
72
|
</p>
|
|
72
|
-
</
|
|
73
|
+
</section>
|
|
73
74
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<
|
|
75
|
+
<section id="requirements" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6"
|
|
76
|
+
aria-labelledby="requirements-heading">
|
|
77
|
+
<h2 id="requirements-heading" class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Requirements</h2>
|
|
77
78
|
|
|
78
|
-
<div class="space-y-3">
|
|
79
|
-
<div>
|
|
80
|
-
<
|
|
79
|
+
<div class="space-y-3" role="list" aria-label="System requirements for Wally UI">
|
|
80
|
+
<div role="listitem">
|
|
81
|
+
<h3 class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Angular Version</h3>
|
|
81
82
|
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
82
83
|
Angular 17+ required for standalone component support
|
|
83
84
|
</p>
|
|
84
85
|
</div>
|
|
85
86
|
|
|
86
|
-
<div>
|
|
87
|
-
<
|
|
87
|
+
<div role="listitem">
|
|
88
|
+
<h3 class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Tailwind CSS</h3>
|
|
88
89
|
<p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
|
|
89
90
|
Tailwind CSS v3 or v4 must be installed in your project.
|
|
90
91
|
</p>
|
|
91
92
|
<a href="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank"
|
|
92
|
-
class="text-xs text-blue-500 underline hover:text-blue-700"
|
|
93
|
+
class="text-xs text-blue-500 underline hover:text-blue-700" rel="noopener noreferrer"
|
|
94
|
+
aria-label="Learn about Tailwind v4 (opens in new tab)">
|
|
93
95
|
Learn about Tailwind v4
|
|
94
96
|
</a>
|
|
95
97
|
</div>
|
|
96
98
|
|
|
97
|
-
<div>
|
|
98
|
-
<
|
|
99
|
+
<div role="listitem">
|
|
100
|
+
<h3 class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Installation</h3>
|
|
99
101
|
<p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
|
|
100
102
|
Components are standalone and can be installed individually:
|
|
101
103
|
</p>
|
|
102
|
-
<code class="text-sm text-[#0a0a0a] dark:text-white block">
|
|
104
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white block" aria-label="Installation command example">
|
|
103
105
|
npx wally-ui add {{ '<' }}component{{ '>' }}
|
|
104
106
|
</code>
|
|
105
107
|
</div>
|
|
106
108
|
</div>
|
|
107
|
-
</
|
|
109
|
+
</section>
|
|
108
110
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<
|
|
111
|
+
<aside id="important-notice"
|
|
112
|
+
class="bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-300 dark:border-yellow-700 p-4 rounded-lg mb-6"
|
|
113
|
+
role="alert" aria-labelledby="experimental-heading">
|
|
114
|
+
<h2 id="experimental-heading" class="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-2">⚠️
|
|
115
|
+
Experimental Project</h2>
|
|
113
116
|
<p class="text-sm text-yellow-700 dark:text-yellow-300">
|
|
114
117
|
Wally UI is currently in experimental development. Components may change and new features are being actively
|
|
115
118
|
developed. Use in production with caution.
|
|
116
119
|
</p>
|
|
117
|
-
</
|
|
120
|
+
</aside>
|
|
118
121
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
<
|
|
122
|
-
|
|
122
|
+
<section id="list-components" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6"
|
|
123
|
+
aria-labelledby="list-heading">
|
|
124
|
+
<h2 id="list-heading" class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">List Available Components
|
|
125
|
+
</h2>
|
|
126
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white" aria-label="Command to list available components">
|
|
123
127
|
npx wally-ui list
|
|
124
|
-
|
|
125
|
-
</
|
|
128
|
+
</code>
|
|
129
|
+
</section>
|
|
126
130
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<
|
|
131
|
+
<section id="installation-structure" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-8"
|
|
132
|
+
aria-labelledby="structure-heading">
|
|
133
|
+
<h2 id="structure-heading" class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Installation Structure
|
|
134
|
+
</h2>
|
|
130
135
|
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
131
136
|
When installing a component, Wally UI will create the following folder structure:
|
|
132
137
|
</p>
|
|
133
|
-
<
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
<
|
|
149
|
-
|
|
150
|
-
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
|
|
151
|
-
<h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white mb-2">Components</h4>
|
|
138
|
+
<pre class="font-mono text-sm text-[#0a0a0a] dark:text-white leading-tight" role="img"
|
|
139
|
+
aria-label="File structure diagram showing component installation path">
|
|
140
|
+
src/
|
|
141
|
+
└── app/
|
|
142
|
+
└── components/
|
|
143
|
+
└── wally-ui/
|
|
144
|
+
└── button/
|
|
145
|
+
├── button.ts
|
|
146
|
+
└── button.html
|
|
147
|
+
</pre>
|
|
148
|
+
</section>
|
|
149
|
+
|
|
150
|
+
<section class="space-y-4" aria-labelledby="explore-heading">
|
|
151
|
+
<h2 id="explore-heading" class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">Explore</h2>
|
|
152
|
+
|
|
153
|
+
<article class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
|
|
154
|
+
<h3 class="text-md font-semibold text-[#0a0a0a] dark:text-white mb-2">Components</h3>
|
|
152
155
|
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
153
156
|
Browse our collection of reusable Angular components with examples and documentation.
|
|
154
157
|
</p>
|
|
155
|
-
<a
|
|
156
|
-
|
|
158
|
+
<a [routerLink]="'/documentation/components'" class="text-blue-500 underline hover:text-blue-700 text-sm"
|
|
159
|
+
aria-label="Navigate to components documentation page">
|
|
160
|
+
View Components
|
|
157
161
|
</a>
|
|
158
|
-
</
|
|
159
|
-
</
|
|
160
|
-
</
|
|
162
|
+
</article>
|
|
163
|
+
</section>
|
|
164
|
+
</main>
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
import { RouterModule } from '@angular/router';
|
|
1
2
|
import { Component } from '@angular/core';
|
|
2
3
|
|
|
3
4
|
import { Breadcrumb, BreadcrumbItem } from '../../components/breadcrumb/breadcrumb';
|
|
4
5
|
|
|
5
6
|
@Component({
|
|
6
7
|
selector: 'wally-documentation',
|
|
7
|
-
imports: [
|
|
8
|
+
imports: [
|
|
9
|
+
Breadcrumb,
|
|
10
|
+
RouterModule
|
|
11
|
+
],
|
|
8
12
|
templateUrl: './documentation.html',
|
|
9
13
|
styleUrl: './documentation.css'
|
|
10
14
|
})
|
|
@@ -1,48 +1,72 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
</h2>
|
|
10
|
-
<p class="mt-4 text-gray-700 dark:text-gray-400">
|
|
11
|
-
Stop searching for the perfect Angular components. Wally UI brings you a
|
|
12
|
-
collection of ready-to-use, beautifully crafted Angular components built with
|
|
13
|
-
standalone architecture and Tailwind CSS that integrate seamlessly with your projects.
|
|
14
|
-
</p>
|
|
15
|
-
</div>
|
|
1
|
+
<main class="h-dvh subpixel-antialiased font-mono" role="main">
|
|
2
|
+
<section class="w-full h-full flex flex-col items-center justify-center p-4">
|
|
3
|
+
<article class="max-w-xl">
|
|
4
|
+
<header class="w-full">
|
|
5
|
+
<hgroup>
|
|
6
|
+
<h1 class="font-sans text-4xl font-medium tracking-tight text-[#0a0a0a] dark:text-white">
|
|
7
|
+
Wally UI
|
|
8
|
+
</h1>
|
|
16
9
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
10
|
+
<h2 class="font-sans text-lg font-normal tracking-wide text-[#0a0a0a] dark:text-white">
|
|
11
|
+
Where's Wally? Right here!
|
|
12
|
+
</h2>
|
|
13
|
+
</hgroup>
|
|
14
|
+
<p class="mt-4 text-gray-700 dark:text-neutral-300/75">
|
|
15
|
+
Stop searching for the perfect Angular components. Wally UI is a free, open source
|
|
16
|
+
design system built for modern developers and AI coding assistants. Copy-paste
|
|
17
|
+
ready TypeScript components with accessibility-first design, SSR compatibility,
|
|
18
|
+
and zero configuration. <strong>Own your code - just pure Angular + Tailwind CSS</strong>.
|
|
19
|
+
</p>
|
|
20
|
+
</header>
|
|
24
21
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
22
|
+
<section class="w-full" aria-labelledby="installation-heading">
|
|
23
|
+
<h3 id="installation-heading" class="sr-only">Installation Command</h3>
|
|
24
|
+
<code
|
|
25
|
+
class="w-full mt-6 block bg-gray-200 dark:bg-[#121212] dark:text-white text-[#0a0a0a] p-4 rounded-md text-sm cursor-pointer hover:opacity-85 transition-colorsselect-all"
|
|
26
|
+
onclick="navigator.clipboard.writeText('npx wally-ui list')"
|
|
27
|
+
tabindex="0"
|
|
28
|
+
role="button"
|
|
29
|
+
aria-label="Copy command to clipboard: npx wally-ui list">
|
|
30
|
+
<pre class="m-0">$ npx wally-ui list</pre>
|
|
31
|
+
</code>
|
|
32
|
+
</section>
|
|
35
33
|
|
|
36
|
-
<
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
34
|
+
<nav class="mt-6 w-full space-y-4" aria-label="Main navigation">
|
|
35
|
+
<div class="space-y-3">
|
|
36
|
+
<a [routerLink]="'/documentation'"
|
|
37
|
+
class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors duration-200 text-base"
|
|
38
|
+
aria-label="View complete documentation and setup guide for Wally UI components">
|
|
39
|
+
Documentation
|
|
40
|
+
</a>
|
|
41
|
+
<a [routerLink]="'/documentation/components'"
|
|
42
|
+
class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors duration-200 text-base"
|
|
43
|
+
aria-label="Browse all available Angular components with examples and API reference">
|
|
44
|
+
Components
|
|
45
|
+
</a>
|
|
46
|
+
<a [routerLink]="'/mcp'"
|
|
47
|
+
class="block text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors duration-200 text-base"
|
|
48
|
+
aria-label="Learn about Wally UI MCP Server for AI coding assistants integration">
|
|
49
|
+
MCP Server
|
|
50
|
+
</a>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div class="flex gap-4 pt-3 mt-4 border-t border-gray-200 dark:border-white" aria-label="External links">
|
|
54
|
+
<a href="https://github.com/WalissonCF/wally-ui"
|
|
55
|
+
target="_blank"
|
|
56
|
+
class="inline-flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-200"
|
|
57
|
+
rel="noopener noreferrer"
|
|
58
|
+
aria-label="View Wally UI on GitHub (opens in new tab)">
|
|
59
|
+
<span>GitHub</span>
|
|
60
|
+
</a>
|
|
61
|
+
<a href="https://www.npmjs.com/package/wally-ui"
|
|
62
|
+
target="_blank"
|
|
63
|
+
class="inline-flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-200"
|
|
64
|
+
rel="noopener noreferrer"
|
|
65
|
+
aria-label="View Wally UI on NPM (opens in new tab)">
|
|
66
|
+
<span>NPM</span>
|
|
67
|
+
</a>
|
|
68
|
+
</div>
|
|
69
|
+
</nav>
|
|
70
|
+
</article>
|
|
71
|
+
</section>
|
|
72
|
+
</main>
|
|
@@ -3,11 +3,51 @@
|
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8">
|
|
6
|
-
<title>Wally UI</title>
|
|
6
|
+
<title>A Modern Approach to Angular UI Components - Wally UI</title>
|
|
7
7
|
<base href="/">
|
|
8
8
|
|
|
9
|
+
<script type="application/ld+json">
|
|
10
|
+
{
|
|
11
|
+
"@context": "https://schema.org",
|
|
12
|
+
"@type": "SoftwareApplication",
|
|
13
|
+
"name": "Wally UI",
|
|
14
|
+
"description": "Free open source Angular component library built for modern developers and AI coding assistants. Copy-paste ready TypeScript components with accessibility-first design, SSR compatibility, and zero configuration.",
|
|
15
|
+
"applicationCategory": "DeveloperApplication",
|
|
16
|
+
"operatingSystem": "Any",
|
|
17
|
+
"programmingLanguage": ["TypeScript", "JavaScript"],
|
|
18
|
+
"softwareVersion": "1.9.0",
|
|
19
|
+
"url": "https://wally-ui.com",
|
|
20
|
+
"downloadUrl": "https://www.npmjs.com/package/wally-ui",
|
|
21
|
+
"codeRepository": "https://github.com/WalissonCF/wally-ui",
|
|
22
|
+
"author": {
|
|
23
|
+
"@type": "Person",
|
|
24
|
+
"name": "Walisson Carvalho Ferreira",
|
|
25
|
+
"url": "https://github.com/WalissonCF"
|
|
26
|
+
},
|
|
27
|
+
"license": "https://opensource.org/licenses/MIT",
|
|
28
|
+
"offers": {
|
|
29
|
+
"@type": "Offer",
|
|
30
|
+
"price": "0",
|
|
31
|
+
"priceCurrency": "USD"
|
|
32
|
+
},
|
|
33
|
+
"keywords": ["Angular", "TypeScript", "UI Components", "Design System", "Open Source", "Accessibility", "SSR", "Tailwind CSS", "Component Library"],
|
|
34
|
+
"featureList": [
|
|
35
|
+
"Copy-paste ready components",
|
|
36
|
+
"Angular 20+ compatibility",
|
|
37
|
+
"Accessibility-first design",
|
|
38
|
+
"SSR compatibility",
|
|
39
|
+
"Zero configuration",
|
|
40
|
+
"AI assistant ready",
|
|
41
|
+
"Dark mode support"
|
|
42
|
+
],
|
|
43
|
+
"requirements": "Angular 17+, Tailwind CSS",
|
|
44
|
+
"installUrl": "https://www.npmjs.com/package/wally-ui",
|
|
45
|
+
"documentation": "https://wally-ui.com/documentation"
|
|
46
|
+
}
|
|
47
|
+
</script>
|
|
48
|
+
|
|
9
49
|
<script>
|
|
10
|
-
//
|
|
50
|
+
// Tailwind V4
|
|
11
51
|
document.documentElement.classList.toggle(
|
|
12
52
|
"dark",
|
|
13
53
|
localStorage.theme === "dark" ||
|
|
@@ -19,9 +59,20 @@
|
|
|
19
59
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
|
|
20
60
|
crossorigin="anonymous"></script>
|
|
21
61
|
|
|
22
|
-
|
|
62
|
+
<!-- SEO Meta Tags -->
|
|
63
|
+
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
|
23
64
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
24
|
-
<meta name="description" content="
|
|
65
|
+
<meta name="description" content="Free open source Angular component library for modern developers and AI assistants. Copy-paste ready TypeScript components with enterprise accessibility and zero configuration.">
|
|
66
|
+
<meta name="keywords" content="Angular, TypeScript, UI Components, Design System, Open Source, Accessibility, SSR, Tailwind CSS, Component Library, AI Assistant">
|
|
67
|
+
<meta name="author" content="Walisson Carvalho Ferreira">
|
|
68
|
+
|
|
69
|
+
<!-- Open Graph Tags -->
|
|
70
|
+
<meta property="og:type" content="website">
|
|
71
|
+
<meta property="og:title" content="Wally UI - Free Angular Component Library">
|
|
72
|
+
<meta property="og:description" content="Stop searching for the perfect Angular components. Free, open source design system built for developers and AI coding assistants.">
|
|
73
|
+
<meta property="og:url" content="https://wally-ui.com">
|
|
74
|
+
<meta property="og:site_name" content="Wally UI">
|
|
75
|
+
<meta property="og:locale" content="en_US">
|
|
25
76
|
|
|
26
77
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
27
78
|
</head>
|