Skip to content

Commit 2cfbeaa

Browse files
bnleftbnleft
committed
feat(example): revamp
1 parent 6562ead commit 2cfbeaa

File tree

17 files changed

+2525
-318
lines changed

17 files changed

+2525
-318
lines changed

‎example/app/globals.css‎

Lines changed: 113 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,117 @@
11
@import "tailwindcss";
22
@import "../../src/tw-border.css";
3+
@import "tw-animate-css";
34

4-
body {
5-
font-family: Arial, Helvetica, sans-serif;
5+
@custom-variant dark (&:is(.dark *));
6+
7+
@theme inline {
8+
--color-background: var(--background);
9+
--color-foreground: var(--foreground);
10+
--color-card: var(--card);
11+
--color-card-foreground: var(--card-foreground);
12+
--color-popover: var(--popover);
13+
--color-popover-foreground: var(--popover-foreground);
14+
--color-primary: var(--primary);
15+
--color-primary-foreground: var(--primary-foreground);
16+
--color-secondary: var(--secondary);
17+
--color-secondary-foreground: var(--secondary-foreground);
18+
--color-muted: var(--muted);
19+
--color-muted-foreground: var(--muted-foreground);
20+
--color-accent: var(--accent);
21+
--color-accent-foreground: var(--accent-foreground);
22+
--color-destructive: var(--destructive);
23+
--color-border: var(--border);
24+
--color-input: var(--input);
25+
--color-ring: var(--ring);
26+
--color-chart-1: var(--chart-1);
27+
--color-chart-2: var(--chart-2);
28+
--color-chart-3: var(--chart-3);
29+
--color-chart-4: var(--chart-4);
30+
--color-chart-5: var(--chart-5);
31+
--color-sidebar: var(--sidebar);
32+
--color-sidebar-foreground: var(--sidebar-foreground);
33+
--color-sidebar-primary: var(--sidebar-primary);
34+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
35+
--color-sidebar-accent: var(--sidebar-accent);
36+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
37+
--color-sidebar-border: var(--sidebar-border);
38+
--color-sidebar-ring: var(--sidebar-ring);
39+
}
40+
41+
:root {
42+
--background: oklch(1 0 0);
43+
--foreground: oklch(0.145 0 0);
44+
--card: oklch(1 0 0);
45+
--card-foreground: oklch(0.145 0 0);
46+
--popover: oklch(1 0 0);
47+
--popover-foreground: oklch(0.145 0 0);
48+
--primary: oklch(0.205 0 0);
49+
--primary-foreground: oklch(0.985 0 0);
50+
--secondary: oklch(0.97 0 0);
51+
--secondary-foreground: oklch(0.205 0 0);
52+
--muted: oklch(0.97 0 0);
53+
--muted-foreground: oklch(0.556 0 0);
54+
--accent: oklch(0.97 0 0);
55+
--accent-foreground: oklch(0.205 0 0);
56+
--destructive: oklch(0.577 0.245 27.325);
57+
--border: oklch(0.922 0 0);
58+
--input: oklch(0.922 0 0);
59+
--ring: oklch(0.708 0 0);
60+
--chart-1: oklch(0.65 0 0);
61+
--chart-2: oklch(0.6 0 0);
62+
--chart-3: oklch(0.55 0 0);
63+
--chart-4: oklch(0.5 0 0);
64+
--chart-5: oklch(0.45 0 0);
65+
--sidebar: oklch(0.985 0 0);
66+
--sidebar-foreground: oklch(0.145 0 0);
67+
--sidebar-primary: oklch(0.205 0 0);
68+
--sidebar-primary-foreground: oklch(0.985 0 0);
69+
--sidebar-accent: oklch(0.97 0 0);
70+
--sidebar-accent-foreground: oklch(0.205 0 0);
71+
--sidebar-border: oklch(0.922 0 0);
72+
--sidebar-ring: oklch(0.708 0 0);
73+
}
74+
75+
.dark {
76+
--background: oklch(0.145 0 0);
77+
--foreground: oklch(0.985 0 0);
78+
--card: oklch(0.205 0 0);
79+
--card-foreground: oklch(0.985 0 0);
80+
--popover: oklch(0.205 0 0);
81+
--popover-foreground: oklch(0.985 0 0);
82+
--primary: oklch(0.922 0 0);
83+
--primary-foreground: oklch(0.205 0 0);
84+
--secondary: oklch(0.269 0 0);
85+
--secondary-foreground: oklch(0.985 0 0);
86+
--muted: oklch(0.269 0 0);
87+
--muted-foreground: oklch(0.708 0 0);
88+
--accent: oklch(0.269 0 0);
89+
--accent-foreground: oklch(0.985 0 0);
90+
--destructive: oklch(0.704 0.191 22.216);
91+
--border: oklch(1 0 0 / 10%);
92+
--input: oklch(1 0 0 / 15%);
93+
--ring: oklch(0.556 0 0);
94+
--chart-1: oklch(0.65 0 0);
95+
--chart-2: oklch(0.6 0 0);
96+
--chart-3: oklch(0.55 0 0);
97+
--chart-4: oklch(0.5 0 0);
98+
--chart-5: oklch(0.45 0 0);
99+
--sidebar: oklch(0.205 0 0);
100+
--sidebar-foreground: oklch(0.985 0 0);
101+
--sidebar-primary: oklch(0.6 0 0);
102+
--sidebar-primary-foreground: oklch(0.985 0 0);
103+
--sidebar-accent: oklch(0.269 0 0);
104+
--sidebar-accent-foreground: oklch(0.985 0 0);
105+
--sidebar-border: oklch(1 0 0 / 10%);
106+
--sidebar-ring: oklch(0.556 0 0);
107+
}
108+
109+
@layer base {
110+
html {
111+
overflow-y: scroll;
112+
}
113+
114+
body {
115+
@apply bg-background text-foreground;
116+
}
6117
}

‎example/app/icon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎example/app/install/page.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { Github as GitHub } from "lucide-react";
2+
3+
export default function InstallPage() {
4+
return (
5+
<div className="min-h-screen bg-white dark:bg-neutral-950">
6+
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20">
7+
<div className="mb-12">
8+
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mb-4">
9+
Installation
10+
</h1>
11+
<p className="text-lg text-neutral-600 dark:text-neutral-400">
12+
Get started with tw-border in your Tailwind CSS v4 project.
13+
</p>
14+
</div>
15+
16+
<div className="space-y-8">
17+
<section>
18+
<h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">Install</h2>
19+
<div className="bg-neutral-900 dark:bg-neutral-900 rounded-lg p-4 border border-neutral-800 dark:border-neutral-800">
20+
<pre className="text-sm text-neutral-100 font-mono">
21+
<code>npm install -D tw-border@beta</code>
22+
</pre>
23+
</div>
24+
</section>
25+
26+
<section>
27+
<h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">Setup</h2>
28+
<p className="text-neutral-600 dark:text-neutral-400 mb-4">
29+
Add to your global stylesheet (e.g., <code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">app/globals.css</code>):
30+
</p>
31+
<div className="bg-neutral-900 dark:bg-neutral-900 rounded-lg p-4 border border-neutral-800 dark:border-neutral-800">
32+
<pre className="text-sm text-neutral-100 font-mono">
33+
<code>{`@import "tailwindcss";
34+
@import "tw-border";`}</code>
35+
</pre>
36+
</div>
37+
</section>
38+
39+
<section>
40+
<h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">Usage</h2>
41+
<p className="text-neutral-600 dark:text-neutral-400 mb-4">
42+
Create a container with <code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-dashed</code> and add the SVG inside:
43+
</p>
44+
<div className="bg-neutral-900 dark:bg-neutral-900 rounded-lg p-4 border border-neutral-800 dark:border-neutral-800">
45+
<pre className="text-sm text-neutral-100 font-mono">
46+
<code>{`<div className="border-dashed border-2 border-neutral-900 dash-6 dash-round rounded-xl">
47+
<svg className="border-svg">
48+
<rect />
49+
</svg>
50+
</div>`}</code>
51+
</pre>
52+
</div>
53+
</section>
54+
55+
<section>
56+
<h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">Available Classes</h2>
57+
<div className="space-y-6">
58+
<div>
59+
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Border Width</h3>
60+
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
61+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border</code>,{" "}
62+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-2</code>,{" "}
63+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-3</code>,{" "}
64+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-4</code>, or{" "}
65+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-[5px]</code>
66+
</p>
67+
</div>
68+
69+
<div>
70+
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Border Color</h3>
71+
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
72+
Standard Tailwind color classes: <code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-neutral-900</code>,{" "}
73+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-blue-500</code>, etc.
74+
</p>
75+
</div>
76+
77+
<div>
78+
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Dash Size</h3>
79+
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
80+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-2</code>,{" "}
81+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-4</code>,{" "}
82+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-6</code>,{" "}
83+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-8</code>,{" "}
84+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-12</code>,{" "}
85+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-24</code>, or{" "}
86+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-[16px]</code>
87+
</p>
88+
</div>
89+
90+
<div>
91+
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Dash Style</h3>
92+
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
93+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-round</code>,{" "}
94+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-butt</code>,{" "}
95+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">dash-square</code>
96+
</p>
97+
</div>
98+
99+
<div>
100+
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Border Radius</h3>
101+
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
102+
Standard Tailwind radius classes: <code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">rounded-sm</code>,{" "}
103+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">rounded-xl</code>,{" "}
104+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">rounded-full</code>, etc.
105+
</p>
106+
</div>
107+
108+
<div>
109+
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Animation</h3>
110+
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
111+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">border-animate</code> or{" "}
112+
<code className="text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-1.5 py-0.5 rounded">hover:border-animate</code>
113+
</p>
114+
</div>
115+
</div>
116+
</section>
117+
118+
<section>
119+
<h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">Browser Support</h2>
120+
<p className="text-neutral-600 dark:text-neutral-400">
121+
Compatible with Chromium, WebKit, and Gecko engines.
122+
</p>
123+
</section>
124+
125+
<section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
126+
<a
127+
href="https://github.com/bryantleft/tw-border"
128+
target="_blank"
129+
rel="noreferrer"
130+
className="inline-flex items-center gap-2 text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
131+
>
132+
<GitHub size={20} />
133+
<span className="font-medium">View on GitHub</span>
134+
</a>
135+
</section>
136+
</div>
137+
</div>
138+
</div>
139+
);
140+
}
141+

‎example/app/layout.tsx‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import type { Metadata } from "next";
22
import { Geist, Geist_Mono } from "next/font/google";
3+
import Link from "next/link";
4+
import { ThemeProvider } from "@/components/theme-provider";
5+
import { ModeToggle } from "@/components/mode-toggle";
6+
import { Logo } from "@/components/logo";
37
import "./globals.css";
48

59
const geistSans = Geist({
@@ -23,11 +27,54 @@ export default function RootLayout({
2327
children: React.ReactNode;
2428
}>) {
2529
return (
26-
<html lang="en">
30+
<html lang="en" suppressHydrationWarning>
2731
<body
2832
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
2933
>
30-
{children}
34+
<ThemeProvider
35+
attribute="class"
36+
defaultTheme="system"
37+
enableSystem
38+
disableTransitionOnChange
39+
>
40+
<nav className="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950">
41+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
42+
<div className="flex items-center justify-between h-14">
43+
<Link
44+
href="/"
45+
className="flex items-center gap-2 text-sm font-semibold text-neutral-900 dark:text-neutral-100 hover:text-neutral-600 dark:hover:text-neutral-400 transition-colors"
46+
>
47+
<Logo size={24} />
48+
tw-border
49+
</Link>
50+
<div className="flex items-center gap-6">
51+
<Link
52+
href="/"
53+
className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
54+
>
55+
demo
56+
</Link>
57+
<Link
58+
href="/install"
59+
className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
60+
>
61+
install
62+
</Link>
63+
<a
64+
href="https://github.com/bryantleft/tw-border"
65+
target="_blank"
66+
rel="noreferrer"
67+
className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
68+
>
69+
github
70+
</a>
71+
<ModeToggle />
72+
</div>
73+
</div>
74+
</div>
75+
</nav>
76+
{children}
77+
</ThemeProvider>
3178
</body>
3279
</html>
3380
);

0 commit comments

Comments
 (0)