wally-ui 1.11.0 → 1.11.1
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/README.md +89 -93
- package/package.json +1 -1
- package/playground/showcase/src/app/components/carousel/carousel.html +33 -1
- package/playground/showcase/src/app/components/carousel/carousel.ts +251 -199
- package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.html +186 -114
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +114 -0
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +516 -248
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +11 -0
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +326 -253
- package/playground/showcase/src/app/pages/documentation/components/components.html +136 -74
- package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.html +370 -292
- package/playground/showcase/src/app/pages/documentation/documentation.html +204 -153
- package/playground/showcase/src/app/pages/home/home.html +153 -50
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/app/pages/mcp/mcp.html +235 -179
|
@@ -1,164 +1,215 @@
|
|
|
1
|
-
<main class="
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Total Customization</h3>
|
|
35
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
36
|
-
Since the component is yours, it can be adapted to any design system or business rules.
|
|
37
|
-
</p>
|
|
38
|
-
</article>
|
|
39
|
-
|
|
40
|
-
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
41
|
-
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Lightweight</h3>
|
|
42
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
43
|
-
Only what you actually add goes into the bundle, without loading dozens of unused components.
|
|
44
|
-
</p>
|
|
45
|
-
</article>
|
|
46
|
-
|
|
47
|
-
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
48
|
-
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Tailwind Integrated</h3>
|
|
49
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
50
|
-
Modern, responsive, and consistent styles with the power of Tailwind CSS.
|
|
51
|
-
</p>
|
|
52
|
-
</article>
|
|
53
|
-
|
|
54
|
-
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
55
|
-
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Learning & Clarity</h3>
|
|
56
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
57
|
-
Each component serves as a practical example of Angular best practices.
|
|
58
|
-
</p>
|
|
59
|
-
</article>
|
|
60
|
-
|
|
61
|
-
<article class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg" role="listitem">
|
|
62
|
-
<h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Standalone Components</h3>
|
|
63
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
64
|
-
Leverages Angular's latest features, reducing complexity and improving modularity.
|
|
65
|
-
</p>
|
|
66
|
-
</article>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<p class="text-gray-700 dark:text-gray-400">
|
|
70
|
-
With Wally UI, you gain agility to start projects, flexibility to shape your UI without limitations,
|
|
71
|
-
and simplicity to maintain code long-term. It's the most practical and modern way to build Angular interfaces.
|
|
72
|
-
</p>
|
|
73
|
-
</section>
|
|
74
|
-
|
|
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>
|
|
78
|
-
|
|
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>
|
|
82
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
83
|
-
Angular 17+ required for standalone component support
|
|
84
|
-
</p>
|
|
85
|
-
</div>
|
|
1
|
+
<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
|
|
2
|
+
<div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
|
|
3
|
+
|
|
4
|
+
<!-- Breadcrumb Navigation -->
|
|
5
|
+
<nav class="mb-8" aria-label="Breadcrumb navigation">
|
|
6
|
+
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
7
|
+
</nav>
|
|
8
|
+
|
|
9
|
+
<!-- Header -->
|
|
10
|
+
<header class="mb-12" role="banner">
|
|
11
|
+
<h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
12
|
+
<span aria-hidden="true">>_ </span>Documentation
|
|
13
|
+
</h1>
|
|
14
|
+
<p class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4">
|
|
15
|
+
Welcome to Wally UI documentation. Learn how to get started, install components via CLI, and explore our production-ready Angular component library.
|
|
16
|
+
</p>
|
|
17
|
+
</header>
|
|
18
|
+
|
|
19
|
+
<!-- Philosophy Section -->
|
|
20
|
+
<section id="philosophy" class="mb-12" aria-labelledby="philosophy-heading">
|
|
21
|
+
<h2 id="philosophy-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
22
|
+
[ Philosophy ]
|
|
23
|
+
</h2>
|
|
24
|
+
|
|
25
|
+
<h3 class="text-lg sm:text-xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
26
|
+
A Modern Approach to Angular UI Components
|
|
27
|
+
</h3>
|
|
28
|
+
|
|
29
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 mb-6 leading-relaxed">
|
|
30
|
+
Wally UI is a modern approach to building Angular interfaces, inspired by the success of shadcn/ui in React.
|
|
31
|
+
Unlike traditional libraries, it doesn't add heavy dependencies to your project: each component is generated
|
|
32
|
+
via npx and becomes <strong class="text-[#0a0a0a] dark:text-white">your code</strong>, ready to edit, customize, and evolve as needed.
|
|
33
|
+
</p>
|
|
86
34
|
|
|
87
|
-
<div role="
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
35
|
+
<div class="grid gap-0 md:grid-cols-2 border-2 border-neutral-300 dark:border-neutral-700 mb-6" role="list" aria-label="Key features of Wally UI">
|
|
36
|
+
<article class="p-4 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
37
|
+
<h4 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
38
|
+
<span aria-hidden="true">[ </span>No External Dependencies<span aria-hidden="true"> ]</span>
|
|
39
|
+
</h4>
|
|
40
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
41
|
+
You control the code, without being tied to third-party updates.
|
|
42
|
+
</p>
|
|
43
|
+
</article>
|
|
44
|
+
|
|
45
|
+
<article class="p-4 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
46
|
+
<h4 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
47
|
+
<span aria-hidden="true">[ </span>Total Customization<span aria-hidden="true"> ]</span>
|
|
48
|
+
</h4>
|
|
49
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
50
|
+
Since the component is yours, it can be adapted to any design system or business rules.
|
|
51
|
+
</p>
|
|
52
|
+
</article>
|
|
53
|
+
|
|
54
|
+
<article class="p-4 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
55
|
+
<h4 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
56
|
+
<span aria-hidden="true">[ </span>Lightweight<span aria-hidden="true"> ]</span>
|
|
57
|
+
</h4>
|
|
58
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
59
|
+
Only what you actually add goes into the bundle, without loading dozens of unused components.
|
|
60
|
+
</p>
|
|
61
|
+
</article>
|
|
62
|
+
|
|
63
|
+
<article class="p-4 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
64
|
+
<h4 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
65
|
+
<span aria-hidden="true">[ </span>Tailwind Integrated<span aria-hidden="true"> ]</span>
|
|
66
|
+
</h4>
|
|
67
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
68
|
+
Modern, responsive, and consistent styles with the power of Tailwind CSS.
|
|
69
|
+
</p>
|
|
70
|
+
</article>
|
|
71
|
+
|
|
72
|
+
<article class="p-4 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
73
|
+
<h4 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
74
|
+
<span aria-hidden="true">[ </span>Learning & Clarity<span aria-hidden="true"> ]</span>
|
|
75
|
+
</h4>
|
|
76
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
77
|
+
Each component serves as a practical example of Angular best practices.
|
|
78
|
+
</p>
|
|
79
|
+
</article>
|
|
80
|
+
|
|
81
|
+
<article class="p-4 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
82
|
+
<h4 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
83
|
+
<span aria-hidden="true">[ </span>Standalone Components<span aria-hidden="true"> ]</span>
|
|
84
|
+
</h4>
|
|
85
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
86
|
+
Leverages Angular's latest features, reducing complexity and improving modularity.
|
|
87
|
+
</p>
|
|
88
|
+
</article>
|
|
97
89
|
</div>
|
|
98
90
|
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
91
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">
|
|
92
|
+
With Wally UI, you gain agility to start projects, flexibility to shape your UI without limitations,
|
|
93
|
+
and simplicity to maintain code long-term. It's the most practical and modern way to build Angular interfaces.
|
|
94
|
+
</p>
|
|
95
|
+
</section>
|
|
96
|
+
|
|
97
|
+
<!-- Requirements Section -->
|
|
98
|
+
<section id="requirements" class="mb-12" aria-labelledby="requirements-heading">
|
|
99
|
+
<h2 id="requirements-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
100
|
+
[ Requirements ]
|
|
101
|
+
</h2>
|
|
102
|
+
|
|
103
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="System requirements for Wally UI">
|
|
104
|
+
<div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
105
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2">
|
|
106
|
+
<span aria-hidden="true">> </span>Angular Version
|
|
107
|
+
</h3>
|
|
108
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
109
|
+
Angular 17+ required for standalone component support
|
|
110
|
+
</p>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
114
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2">
|
|
115
|
+
<span aria-hidden="true">> </span>Tailwind CSS
|
|
116
|
+
</h3>
|
|
117
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3">
|
|
118
|
+
Tailwind CSS v3 or v4 must be installed in your project.
|
|
119
|
+
</p>
|
|
120
|
+
<a href="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank"
|
|
121
|
+
class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-[#0a0a0a] dark:hover:text-white underline underline-offset-4 transition-colors duration-200"
|
|
122
|
+
rel="noopener noreferrer"
|
|
123
|
+
aria-label="Learn about Tailwind CSS v4 documentation (opens in new tab)">
|
|
124
|
+
Learn about Tailwind v4 →
|
|
125
|
+
</a>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="p-4 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
129
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2">
|
|
130
|
+
<span aria-hidden="true">> </span>Installation
|
|
131
|
+
</h3>
|
|
132
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3">
|
|
133
|
+
Components are standalone and can be installed individually:
|
|
134
|
+
</p>
|
|
135
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
|
|
136
|
+
aria-label="Installation command example">
|
|
137
|
+
$ npx wally-ui add <component>
|
|
138
|
+
</code>
|
|
139
|
+
</div>
|
|
107
140
|
</div>
|
|
108
|
-
</
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
<
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
+
</section>
|
|
142
|
+
|
|
143
|
+
<!-- Warning Notice -->
|
|
144
|
+
<aside id="important-notice"
|
|
145
|
+
class="mb-12 bg-yellow-50 dark:bg-yellow-900/10 border-2 border-yellow-400 dark:border-yellow-700 p-4"
|
|
146
|
+
role="alert" aria-labelledby="experimental-heading">
|
|
147
|
+
<h2 id="experimental-heading" class="text-sm sm:text-base font-bold text-yellow-800 dark:text-yellow-300 mb-2 uppercase">
|
|
148
|
+
Experimental Project
|
|
149
|
+
</h2>
|
|
150
|
+
<p class="text-xs sm:text-sm text-yellow-700 dark:text-yellow-400">
|
|
151
|
+
Wally UI is currently in experimental development. Components may change and new features are being actively
|
|
152
|
+
developed. Use in production with caution.
|
|
153
|
+
</p>
|
|
154
|
+
</aside>
|
|
155
|
+
|
|
156
|
+
<!-- CLI Commands Section -->
|
|
157
|
+
<section class="mb-12" aria-labelledby="cli-heading">
|
|
158
|
+
<h2 id="cli-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
159
|
+
[ CLI Commands ]
|
|
160
|
+
</h2>
|
|
161
|
+
|
|
162
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700">
|
|
163
|
+
<!-- List Command -->
|
|
164
|
+
<div id="list-components" class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" aria-labelledby="list-heading">
|
|
165
|
+
<h3 id="list-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
166
|
+
<span aria-hidden="true">> </span>List Available Components
|
|
167
|
+
</h3>
|
|
168
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
|
|
169
|
+
aria-label="Command to list available components">
|
|
170
|
+
$ npx wally-ui list
|
|
171
|
+
</code>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<!-- Installation Structure -->
|
|
175
|
+
<div id="installation-structure" class="p-4 bg-white dark:bg-[#0a0a0a]" aria-labelledby="structure-heading">
|
|
176
|
+
<h3 id="structure-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
177
|
+
<span aria-hidden="true">> </span>Installation Structure
|
|
178
|
+
</h3>
|
|
179
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3">
|
|
180
|
+
When installing a component, Wally UI will create the following folder structure:
|
|
181
|
+
</p>
|
|
182
|
+
<pre class="font-mono text-xs sm:text-sm text-[#0a0a0a] dark:text-white leading-tight bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 overflow-x-auto" role="img"
|
|
183
|
+
aria-label="File structure diagram showing component installation path">src/
|
|
141
184
|
└── app/
|
|
142
185
|
└── components/
|
|
143
186
|
└── wally-ui/
|
|
144
187
|
└── button/
|
|
145
188
|
├── button.ts
|
|
146
|
-
└── button.html
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
189
|
+
└── button.html</pre>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</section>
|
|
193
|
+
|
|
194
|
+
<!-- Explore Section -->
|
|
195
|
+
<section class="mb-12" aria-labelledby="explore-heading">
|
|
196
|
+
<h2 id="explore-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
197
|
+
[ Explore ]
|
|
198
|
+
</h2>
|
|
199
|
+
|
|
200
|
+
<article class="group border-2 border-neutral-300 dark:border-neutral-700">
|
|
201
|
+
<a [routerLink]="'/documentation/components'"
|
|
202
|
+
class="block p-4 sm:p-5 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
203
|
+
aria-label="Navigate to Components documentation page with examples and API reference">
|
|
204
|
+
<h3 class="text-base sm:text-lg font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] mb-2 uppercase tracking-wide transition-colors duration-150">
|
|
205
|
+
<span aria-hidden="true">>_ </span>Components
|
|
206
|
+
</h3>
|
|
207
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
208
|
+
Browse our collection of reusable Angular components with examples, code snippets, and comprehensive documentation.
|
|
209
|
+
</p>
|
|
210
|
+
</a>
|
|
211
|
+
</article>
|
|
212
|
+
</section>
|
|
152
213
|
|
|
153
|
-
|
|
154
|
-
<h3 class="text-md font-semibold text-[#0a0a0a] dark:text-white mb-2">Components</h3>
|
|
155
|
-
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
156
|
-
Browse our collection of reusable Angular components with examples and documentation.
|
|
157
|
-
</p>
|
|
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
|
|
161
|
-
</a>
|
|
162
|
-
</article>
|
|
163
|
-
</section>
|
|
214
|
+
</div>
|
|
164
215
|
</main>
|
|
@@ -1,72 +1,175 @@
|
|
|
1
|
-
<main class="h-dvh subpixel-antialiased font-mono" role="main">
|
|
2
|
-
<
|
|
3
|
-
<article class="max-w-
|
|
4
|
-
<header class="w-full">
|
|
5
|
-
<hgroup>
|
|
6
|
-
<h1
|
|
7
|
-
|
|
1
|
+
<main class="min-h-dvh subpixel-antialiased font-mono bg-white dark:bg-[#0a0a0a]" role="main">
|
|
2
|
+
<div class="w-full min-h-dvh flex flex-col items-center justify-center px-4 py-12 sm:px-6 md:px-8 lg:px-12">
|
|
3
|
+
<article class="w-full max-w-3xl">
|
|
4
|
+
<header class="w-full mb-10 sm:mb-12 space-y-6">
|
|
5
|
+
<hgroup class="space-y-6">
|
|
6
|
+
<h1
|
|
7
|
+
class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-[#0a0a0a] dark:text-white uppercase">
|
|
8
|
+
<span class="typewriter">
|
|
9
|
+
<span aria-hidden="true">>_ </span>WALLY UI
|
|
10
|
+
</span>
|
|
8
11
|
</h1>
|
|
9
12
|
|
|
10
|
-
<h2
|
|
11
|
-
|
|
13
|
+
<h2
|
|
14
|
+
class="text-sm sm:text-base md:text-lg font-normal text-neutral-600 dark:text-neutral-400 pl-4 border-l-2 border-neutral-300 dark:border-neutral-700">
|
|
15
|
+
Open source Angular component library. Where's Wally? Right here.
|
|
12
16
|
</h2>
|
|
13
17
|
</hgroup>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
|
|
19
|
+
<div class="space-y-3 text-xs sm:text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
|
|
20
|
+
<p>
|
|
21
|
+
<span class="text-neutral-500 dark:text-neutral-500">01: </span>
|
|
22
|
+
<strong class="text-[#0a0a0a] dark:text-white">Stop searching for the perfect Angular
|
|
23
|
+
components.</strong>
|
|
24
|
+
Wally UI is a <strong>free, open source design system</strong> built for modern developers and
|
|
25
|
+
<strong>AI coding assistants</strong>.
|
|
26
|
+
</p>
|
|
27
|
+
<p>
|
|
28
|
+
<span class="text-neutral-500 dark:text-neutral-500">02:</span>
|
|
29
|
+
Copy-paste ready <strong>TypeScript components</strong> with <strong>accessibility-first
|
|
30
|
+
design</strong>,
|
|
31
|
+
<strong>Angular SSR compatibility</strong>, and <strong>zero configuration</strong>.
|
|
32
|
+
Built with latest Angular, <strong>minimum Angular 17+ required</strong>. Own your code - just
|
|
33
|
+
pure <strong>Angular and Tailwind CSS</strong>.
|
|
34
|
+
</p>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="mt-6 sm:mt-8 space-y-2" role="list" aria-label="Component library features">
|
|
38
|
+
<div class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider">
|
|
39
|
+
[ System Requirements ]
|
|
40
|
+
</div>
|
|
41
|
+
<div class="flex flex-wrap gap-2 text-xs sm:text-sm font-medium">
|
|
42
|
+
<span class="text-neutral-700 dark:text-neutral-300" role="listitem">
|
|
43
|
+
Angular 17+
|
|
44
|
+
</span>
|
|
45
|
+
<span class="text-neutral-500 dark:text-neutral-500">|</span>
|
|
46
|
+
<span class="text-neutral-700 dark:text-neutral-300" role="listitem">
|
|
47
|
+
TypeScript
|
|
48
|
+
</span>
|
|
49
|
+
<span class="text-neutral-500 dark:text-neutral-500">|</span>
|
|
50
|
+
<span class="text-neutral-700 dark:text-neutral-300" role="listitem">
|
|
51
|
+
Tailwind CSS
|
|
52
|
+
</span>
|
|
53
|
+
<span class="text-neutral-500 dark:text-neutral-500">|</span>
|
|
54
|
+
<span class="text-neutral-700 dark:text-neutral-300" role="listitem">
|
|
55
|
+
ARIA Accessible
|
|
56
|
+
</span>
|
|
57
|
+
<span class="text-neutral-500 dark:text-neutral-500">|</span>
|
|
58
|
+
<span class="text-neutral-700 dark:text-neutral-300" role="listitem">
|
|
59
|
+
SSR Ready
|
|
60
|
+
</span>
|
|
61
|
+
<span class="text-neutral-500 dark:text-neutral-500">|</span>
|
|
62
|
+
<span class="text-neutral-700 dark:text-neutral-300" role="listitem">
|
|
63
|
+
AI Assistant Ready
|
|
64
|
+
</span>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
20
67
|
</header>
|
|
21
68
|
|
|
22
|
-
<section class="w-full" aria-labelledby="
|
|
23
|
-
<h3 id="
|
|
69
|
+
<section class="w-full mb-10 sm:mb-12" aria-labelledby="list-components-heading">
|
|
70
|
+
<h3 id="list-components-heading"
|
|
71
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-3">
|
|
72
|
+
[ List components ]
|
|
73
|
+
</h3>
|
|
24
74
|
<code
|
|
25
|
-
class="w-full
|
|
26
|
-
onclick="navigator.clipboard.writeText('npx wally-ui list')"
|
|
27
|
-
|
|
28
|
-
role="button"
|
|
29
|
-
aria-label="Copy command to clipboard: npx wally-ui list">
|
|
75
|
+
class="w-full block bg-neutral-100 dark:bg-[#121212] border-2 border-neutral-300 dark:border-neutral-700 hover:border-[#0a0a0a] dark:hover:border-white text-[#0a0a0a] dark:text-white p-3 sm:p-4 text-xs sm:text-sm cursor-pointer transition-colors duration-200 select-all"
|
|
76
|
+
onclick="navigator.clipboard.writeText('npx wally-ui list')" tabindex="0" role="button"
|
|
77
|
+
aria-label="Copy NPX command to install Wally UI components to clipboard: npx wally-ui list">
|
|
30
78
|
<pre class="m-0">$ npx wally-ui list</pre>
|
|
31
79
|
</code>
|
|
32
80
|
</section>
|
|
33
81
|
|
|
34
|
-
<nav class="
|
|
35
|
-
|
|
82
|
+
<nav class="w-full mb-10 sm:mb-12"
|
|
83
|
+
aria-label="Main navigation menu for Wally UI documentation and components">
|
|
84
|
+
<h3 class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-3">
|
|
85
|
+
[ Navigation ]
|
|
86
|
+
</h3>
|
|
87
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700">
|
|
36
88
|
<a [routerLink]="'/documentation'"
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
89
|
+
class="group block px-4 py-3 sm:py-4 bg-white dark:bg-[#0a0a0a] border-b-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white hover:border-[#0a0a0a] dark:hover:border-white transition-all duration-150 cursor-pointer"
|
|
90
|
+
aria-label="View complete documentation and setup guide for Wally UI Angular components">
|
|
91
|
+
<div class="flex items-start justify-between gap-4">
|
|
92
|
+
<div class="flex-1 min-w-0">
|
|
93
|
+
<h4
|
|
94
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] mb-1 uppercase tracking-wide transition-colors duration-150">
|
|
95
|
+
<span aria-hidden="true">>_ </span>Documentation
|
|
96
|
+
</h4>
|
|
97
|
+
<p
|
|
98
|
+
class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
99
|
+
Complete setup guide, best practices, and Angular component installation
|
|
100
|
+
instructions
|
|
101
|
+
</p>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
40
104
|
</a>
|
|
105
|
+
|
|
41
106
|
<a [routerLink]="'/documentation/components'"
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
107
|
+
class="group block px-4 py-3 sm:py-4 bg-white dark:bg-[#0a0a0a] border-b-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white hover:border-[#0a0a0a] dark:hover:border-white transition-all duration-150 cursor-pointer"
|
|
108
|
+
aria-label="Browse all available Angular components including Button, Input, Carousel, and Breadcrumb with code examples and API reference">
|
|
109
|
+
<div class="flex items-start justify-between gap-4">
|
|
110
|
+
<div class="flex-1 min-w-0">
|
|
111
|
+
<h4
|
|
112
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] mb-1 uppercase tracking-wide transition-colors duration-150">
|
|
113
|
+
<span aria-hidden="true">>_ </span>Components
|
|
114
|
+
</h4>
|
|
115
|
+
<p
|
|
116
|
+
class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
117
|
+
Browse 4+ production-ready Angular components: Button, Input, Carousel, Breadcrumb
|
|
118
|
+
with TypeScript examples
|
|
119
|
+
</p>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
45
122
|
</a>
|
|
123
|
+
|
|
46
124
|
<a [routerLink]="'/mcp'"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
125
|
+
class="group block px-4 py-3 sm:py-4 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white hover:border-[#0a0a0a] dark:hover:border-white transition-all duration-150 cursor-pointer"
|
|
126
|
+
aria-label="Learn about Wally UI MCP Server integration with AI coding assistants like Claude, ChatGPT, and Cursor">
|
|
127
|
+
<div class="flex items-start justify-between gap-4">
|
|
128
|
+
<div class="flex-1 min-w-0">
|
|
129
|
+
<h4
|
|
130
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] mb-1 uppercase tracking-wide transition-colors duration-150">
|
|
131
|
+
<span aria-hidden="true">>_ </span>MCP Server
|
|
132
|
+
</h4>
|
|
133
|
+
<p
|
|
134
|
+
class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
135
|
+
AI coding assistants integration: Claude Code, ChatGPT, Cursor IDE support
|
|
136
|
+
</p>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
50
139
|
</a>
|
|
51
140
|
</div>
|
|
141
|
+
</nav>
|
|
52
142
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
143
|
+
<footer class="w-full pt-8 border-t border-neutral-200 dark:border-neutral-800"
|
|
144
|
+
aria-label="External links and project information">
|
|
145
|
+
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
146
|
+
<div class="flex gap-6">
|
|
147
|
+
<a href="https://github.com/WalissonCF/wally-ui" target="_blank"
|
|
148
|
+
class="text-sm text-neutral-600 dark:text-neutral-400 hover:text-[#0a0a0a] dark:hover:text-white transition-colors duration-200 underline underline-offset-4"
|
|
149
|
+
rel="noopener noreferrer"
|
|
150
|
+
aria-label="View Wally UI source code on GitHub - Open source Angular component library (opens in new tab)">
|
|
151
|
+
GitHub
|
|
152
|
+
</a>
|
|
153
|
+
<a href="https://www.npmjs.com/package/wally-ui" target="_blank"
|
|
154
|
+
class="text-sm text-neutral-600 dark:text-neutral-400 hover:text-[#0a0a0a] dark:hover:text-white transition-colors duration-200 underline underline-offset-4"
|
|
155
|
+
rel="noopener noreferrer"
|
|
156
|
+
aria-label="Install Wally UI from NPM package registry - Angular components library (opens in new tab)">
|
|
157
|
+
NPM
|
|
158
|
+
</a>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<p class="text-xs text-neutral-500 dark:text-neutral-500">
|
|
162
|
+
Built with Angular 20 + Tailwind CSS
|
|
163
|
+
</p>
|
|
68
164
|
</div>
|
|
69
|
-
|
|
165
|
+
|
|
166
|
+
<p class="mt-6 text-xs text-neutral-500 dark:text-neutral-600 leading-relaxed">
|
|
167
|
+
Wally UI provides enterprise-grade, accessible Angular components with full TypeScript support,
|
|
168
|
+
server-side rendering (SSR) compatibility, and comprehensive ARIA accessibility features.
|
|
169
|
+
Perfect for modern web applications built with Angular 20+, Tailwind CSS, and AI-assisted
|
|
170
|
+
development workflows.
|
|
171
|
+
</p>
|
|
172
|
+
</footer>
|
|
70
173
|
</article>
|
|
71
|
-
</
|
|
174
|
+
</div>
|
|
72
175
|
</main>
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { RouterModule } from '@angular/router';
|
|
2
2
|
import { Component } from '@angular/core';
|
|
3
|
+
import { Carousel } from "../../components/carousel/carousel";
|
|
3
4
|
|
|
4
5
|
@Component({
|
|
5
6
|
selector: 'wally-home',
|
|
6
|
-
imports: [RouterModule],
|
|
7
|
+
imports: [RouterModule, Carousel],
|
|
7
8
|
templateUrl: './home.html',
|
|
8
9
|
styleUrl: './home.css'
|
|
9
10
|
})
|