Skip to content

Commit d6ba652

Browse files
antonscapantonscap
committed
luckyui: adding flutter v0.0.1
1 parent d640fbf commit d6ba652

File tree

5 files changed

+114
-103
lines changed

5 files changed

+114
-103
lines changed

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
[![GitHub Stars](https://img.shields.io/github/stars/waveful/lucky-ui?style=for-the-badge)](https://github.com/waveful/lucky-ui/stargazers)
66
[![License](https://img.shields.io/github/license/waveful/lucky-ui?style=for-the-badge)](./LICENSE)
77
[![Website](https://img.shields.io/badge/website-lucky--ui.com-4CAF50?style=for-the-badge)](https://lucky-ui.com)
8+
[![Reddit](https://img.shields.io/badge/Reddit-r%2FLuckyUI-FF4500?style=for-the-badge&logo=reddit)](https://reddit.com/r/LuckyUI)
89

910
LuckyUI is Waveful's official design system. It provides accessible, themeable
1011
components, design tokens, and tooling to build consistent, high‑quality
@@ -25,4 +26,11 @@ interfaces across Waveful products.
2526
- **Tooling**: docs site, Storybook playground, code mods, and CLI helpers to
2627
bootstrap new apps or consume tokens in design tools.
2728

28-
> Goal: a single source of truth for Waveful’s UI—cohesive, accessible, and fast to ship.
29+
> Goal: a single source of truth for Waveful's UI—cohesive, accessible, and fast to ship.
30+
31+
## LuckyUI for Flutter
32+
33+
LuckyUI is also available for Flutter development, providing the same design system principles and components for mobile and desktop applications.
34+
35+
- **📦 Pub.dev Package**: [luckyui](https://pub.dev/packages/luckyui) - Install the package for your Flutter project
36+
- **🐙 GitHub Repository**: [luckyui-flutter](https://github.com/Waveful/luckyui-flutter) - Source code and contributions

‎src/components/layout/DocsLayout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,15 @@ export function DocsLayout({ children, className }: DocsLayoutProps) {
8282
<p className="mb-2 mt-4 font-semibold text-gray-700 dark:text-gray-200">Frameworks</p>
8383
<ul className="mb-4 space-y-1">
8484
<li>
85-
<Link className="hover:underline" href="/flutter">Flutter</Link>
85+
<Link className="hover:underline flex items-center gap-2" href="/flutter">
86+
Flutter
87+
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium text-white" style={{ backgroundColor: '#024EFA' }}>
88+
New
89+
</span>
90+
</Link>
91+
</li>
92+
<li>
93+
<Link className="hover:underline" href="/nextjs">Next.js</Link>
8694
</li>
8795
</ul>
8896

‎src/pages/flutter.tsx‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,49 @@
11
import Head from 'next/head';
2+
import Link from 'next/link';
23

34
export default function FlutterPage() {
45
return (
56
<div className="py-10">
67
<Head>
78
<title>LuckyUI — Flutter</title>
8-
<meta name="description" content="Flutter bindings and widgets for LuckyUI (coming soon)." />
9+
<meta name="description" content="Flutter bindings and widgets for LuckyUI design system." />
910
</Head>
1011
<h1 className="text-2xl font-semibold mb-2">Flutter</h1>
11-
<p className="text-gray-600 dark:text-gray-300">Coming soon</p>
12+
<p className="text-gray-600 dark:text-gray-300 mb-6">
13+
LuckyUI is also available for Flutter development, providing the same design system principles and components for mobile and desktop applications.
14+
</p>
15+
16+
<div className="space-y-4">
17+
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
18+
<h2 className="text-lg font-medium mb-2">📦 Pub.dev Package</h2>
19+
<p className="text-gray-600 dark:text-gray-300 mb-3">
20+
Install the LuckyUI package for your Flutter project
21+
</p>
22+
<Link
23+
href="https://pub.dev/packages/luckyui"
24+
target="_blank"
25+
rel="noopener noreferrer"
26+
className="inline-flex items-center gap-2 rounded-md bg-blue-600 text-white px-4 py-2 text-sm hover:bg-blue-700"
27+
>
28+
View on Pub.dev
29+
</Link>
30+
</div>
31+
32+
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
33+
<h2 className="text-lg font-medium mb-2">🐙 GitHub Repository</h2>
34+
<p className="text-gray-600 dark:text-gray-300 mb-3">
35+
Source code, documentation, and contribution guidelines
36+
</p>
37+
<Link
38+
href="https://github.com/Waveful/luckyui-flutter"
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
className="inline-flex items-center gap-2 rounded-md bg-gray-900 text-white px-4 py-2 text-sm hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
42+
>
43+
View on GitHub
44+
</Link>
45+
</div>
46+
</div>
1247
</div>
1348
);
1449
}

‎src/pages/index.tsx‎

Lines changed: 55 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -26,105 +26,65 @@ export default function Home() {
2626
and tooling to build consistent, high‑quality interfaces across Waveful products.
2727
</p>
2828

29-
<div className="w-full text-left mt-10">
30-
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Layout</h2>
31-
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
32-
Building blocks to structure pages and content. Grid, Stack, Container and more.
33-
</p>
34-
<div className="mt-4 w-full flex gap-2">
35-
<Link href="/flutter" className="rounded-md border border-gray-100 px-3 py-2 text-left">
36-
Flutter (Coming Soon)
37-
</Link>
38-
<Link href="/nextjs" className="rounded-md border border-gray-100 px-3 py-2 text-left">
39-
NextJS (Coming Soon)
40-
</Link>
29+
<div className="w-full text-left mt-10">
30+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Frameworks</h2>
31+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
32+
LuckyUI is available for different frameworks and platforms.
33+
</p>
34+
<div className="mt-4 w-full flex gap-2">
35+
<Link href="/flutter" className="rounded-md border border-gray-100 px-3 py-2 text-left flex items-center gap-2">
36+
Flutter
37+
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium text-white" style={{ backgroundColor: '#024EFA' }}>
38+
New!
39+
</span>
40+
</Link>
41+
<Link href="/nextjs" className="rounded-md border border-gray-100 px-3 py-2 text-left">
42+
NextJS (Coming Soon)
43+
</Link>
44+
</div>
4145
</div>
42-
</div>
4346

44-
{/* Sections */}
45-
<section id="layout" className="w-full text-left mt-10">
46-
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Layout</h2>
47-
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
48-
Building blocks to structure pages and content. Grid, Stack, Container and more.
49-
</p>
50-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
51-
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2">
52-
Browse all UI components
53-
</Link>
54-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
55-
Grid · Coming soon
56-
</button>
57-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
58-
Stack · Coming soon
59-
</button>
60-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
61-
Container · Coming soon
62-
</button>
63-
</div>
64-
</section>
47+
{/* Overview Section */}
48+
<section id="overview" className="w-full text-left mt-10">
49+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Overview</h2>
50+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
51+
Design tokens, assets, and foundational elements of the LuckyUI design system.
52+
</p>
53+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
54+
<Link href="/logos" className="rounded-md border border-gray-100 px-3 py-2">
55+
Logos
56+
</Link>
57+
<Link href="/characters" className="rounded-md border border-gray-100 px-3 py-2">
58+
Characters
59+
</Link>
60+
<Link href="/colors" className="rounded-md border border-gray-100 px-3 py-2">
61+
Colors
62+
</Link>
63+
<Link href="/gradients" className="rounded-md border border-gray-100 px-3 py-2">
64+
Gradients
65+
</Link>
66+
<Link href="/typography" className="rounded-md border border-gray-100 px-3 py-2">
67+
Typography
68+
</Link>
69+
</div>
70+
</section>
6571

66-
<section id="feedback" className="w-full text-left mt-10">
67-
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Feedback</h2>
68-
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
69-
Components that communicate progress, state and outcomes.
70-
</p>
71-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
72-
<Link href="/buttons" className="rounded-md border border-gray-100 px-3 py-2">
73-
Buttons
74-
</Link>
75-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
76-
Toast · Coming soon
77-
</button>
78-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
79-
Alert · Coming soon
80-
</button>
81-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
82-
Progress · Coming soon
83-
</button>
84-
</div>
85-
</section>
72+
{/* Components Section */}
73+
<section id="components" className="w-full text-left mt-10">
74+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Components</h2>
75+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
76+
Interactive UI components built with accessibility and theming in mind.
77+
</p>
78+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
79+
<Link href="/buttons" className="rounded-md border border-gray-100 px-3 py-2">
80+
Buttons
81+
</Link>
82+
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2">
83+
All Components
84+
</Link>
85+
</div>
86+
</section>
8687

87-
<section id="navigation" className="w-full text-left mt-10">
88-
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Navigation</h2>
89-
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
90-
Menus, tabs and navigational patterns to move through the app.
91-
</p>
92-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
93-
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2">
94-
Explore navigation patterns
95-
</Link>
96-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
97-
Tabs · Coming soon
98-
</button>
99-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
100-
Sidebar · Coming soon
101-
</button>
102-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
103-
Breadcrumbs · Coming soon
104-
</button>
105-
</div>
106-
</section>
107-
108-
<section id="form" className="w-full text-left mt-10">
109-
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Form</h2>
110-
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
111-
Inputs, validation and controls for capturing user data.
112-
</p>
113-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
114-
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2">
115-
View form components
116-
</Link>
117-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
118-
TextField · Coming soon
119-
</button>
120-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
121-
Select · Coming soon
122-
</button>
123-
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
124-
Checkbox · Coming soon
125-
</button>
126-
</div>
127-
</section>
12888
</main>
12989
</div>
13090
);

‎src/pages/nextjs.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import Head from 'next/head';
22

3-
export default function FlutterPage() {
3+
export default function NextJSPage() {
44
return (
55
<div className="py-10">
66
<Head>
7-
<title>LuckyUI — Flutter</title>
8-
<meta name="description" content="Flutter bindings and widgets for LuckyUI (coming soon)." />
7+
<title>LuckyUI — Next.js</title>
8+
<meta name="description" content="Next.js components and utilities for LuckyUI (coming soon)." />
99
</Head>
10-
<h1 className="text-2xl font-semibold mb-2">Flutter</h1>
10+
<h1 className="text-2xl font-semibold mb-2">Next.js</h1>
1111
<p className="text-gray-600 dark:text-gray-300">Coming soon</p>
1212
</div>
1313
);

0 commit comments

Comments
 (0)