Skip to content

Commit d651d53

Browse files
vinutvvinutv
committed
refactor: redesign Get Started page with improved layout and typography
- Create dedicated GetStartedPage component with custom JSX rendering - Follow documentation page layout pattern (PageTitle, SectionTitle, Lead) - Add styled CodeBlock component with copy-to-clipboard functionality - Reorganize content into clear sections: Prerequisites, Add a component, Tailwind setup, Use in app, What you get, Next steps - Include feature list with visual indicators - Add navigation links to related documentation pages - Improve readability and visual hierarchy matching other docs pages
1 parent b8482f6 commit d651d53

3 files changed

Lines changed: 290 additions & 1 deletion

File tree

‎src/components/brands-page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ function ClearspaceGuidance() {
295295
export function BrandsPage() {
296296
return (
297297
<main className="flex-1 overflow-y-auto">
298-
<div className="mx-auto max-w-6xl space-y-16 p-4 md:p-8">
298+
<div className="mx-auto max-w-4xl space-y-16 p-4 md:p-8">
299299
<header className="space-y-6">
300300
<div className="text-muted-foreground text-xs font-medium tracking-widest uppercase">
301301
Documentation

‎src/components/dynamic-main-content.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { ComponentsOverview } from "@/components/components-overview";
1818
import { Playground } from "@/components/playground";
1919
import { BlocksPage } from "@/components/blocks";
2020
import { SettingsPage } from "@/components/settings-page";
21+
import { GetStartedPage } from "@/components/get-started-page";
2122
import { TypographyPage } from "@/components/typography-page";
2223
import { ColorsPage } from "@/components/colors-page";
2324
import { BrandsPage } from "@/components/brands-page";
@@ -498,6 +499,9 @@ export function DynamicMainContent() {
498499
const docPage = documentationPages[activeComponent];
499500
if (docPage) {
500501
dismissHtmlScreen();
502+
if (activeComponent === "get-started") {
503+
return <GetStartedPage />;
504+
}
501505
if (activeComponent === "docs-typography") {
502506
return <TypographyPage />;
503507
}

‎src/components/get-started-page.tsx‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
import { Copy, Check } from "lucide-react";
2+
import { Button } from "@/components/ui/button";
3+
import { Separator } from "@/components/ui/separator";
4+
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
5+
import {
6+
PageTitle,
7+
SectionTitle,
8+
SubsectionTitle,
9+
Lead,
10+
} from "@/components/ui/typography";
11+
12+
/**
13+
* Get Started documentation page for Care UI.
14+
*
15+
* Guides developers through installing Care UI in a React + Tailwind v4 project,
16+
* adding components via shadcn CLI, and setting up the design tokens and typography system.
17+
*/
18+
19+
function InlineCode({ children }: { children: React.ReactNode }) {
20+
return (
21+
<code className="bg-muted text-foreground relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
22+
{children}
23+
</code>
24+
);
25+
}
26+
27+
function CodeBlock({
28+
code,
29+
id,
30+
}: {
31+
code: string;
32+
id: string;
33+
}) {
34+
const { copyToClipboard, isCopied } = useCopyToClipboard();
35+
36+
return (
37+
<div className="relative mt-4 rounded-lg bg-slate-900 p-4">
38+
<Button
39+
size="sm"
40+
variant="ghost"
41+
className="absolute right-2 top-2 h-8 w-8 p-0 text-slate-400 hover:text-slate-200"
42+
onClick={() => copyToClipboard(code, id)}
43+
>
44+
{isCopied(id) ? (
45+
<Check className="h-4 w-4" />
46+
) : (
47+
<Copy className="h-4 w-4" />
48+
)}
49+
</Button>
50+
<pre className="overflow-x-auto">
51+
<code className="font-mono text-sm text-slate-100">{code}</code>
52+
</pre>
53+
</div>
54+
);
55+
}
56+
57+
export function GetStartedPage() {
58+
return (
59+
<main className="flex-1 overflow-y-auto">
60+
<div className="mx-auto max-w-4xl space-y-8 p-4 md:p-8">
61+
{/* Page Header */}
62+
<div>
63+
<PageTitle>Get Started</PageTitle>
64+
<Lead className="mt-3">
65+
Install Care UI in a React + Tailwind v4 project. Components are added
66+
on demand through the shadcn CLI — you own the source, nothing is
67+
published as a runtime dependency.
68+
</Lead>
69+
</div>
70+
71+
<Separator />
72+
73+
{/* Prerequisites Section */}
74+
<section className="space-y-4">
75+
<SectionTitle>Prerequisites</SectionTitle>
76+
<div className="space-y-3">
77+
<p className="text-muted-foreground leading-relaxed">
78+
Care UI targets React 19, TypeScript, and Tailwind CSS v4. Initialise
79+
shadcn once in your project — this writes{" "}
80+
<InlineCode>components.json</InlineCode>, sets up the{" "}
81+
<InlineCode>@/</InlineCode> import alias, and wires Tailwind's CSS
82+
variables. Pick the neutral base colour to match the Care UI palette.
83+
</p>
84+
<CodeBlock
85+
code={`# In your React + Tailwind v4 project
86+
npx shadcn@latest init`}
87+
id="setup-init"
88+
/>
89+
</div>
90+
</section>
91+
92+
{/* Add Components Section */}
93+
<section className="space-y-4">
94+
<SectionTitle>Add a component</SectionTitle>
95+
<div className="space-y-3">
96+
<p className="text-muted-foreground leading-relaxed">
97+
Every Care UI component is published as a shadcn-compatible registry
98+
entry at{" "}
99+
<InlineCode>https://careui.ohc.network/r/&lt;name&gt;.json</InlineCode>.
100+
Pass the URL directly to the CLI — files land in{" "}
101+
<InlineCode>@/components/ui/</InlineCode> and any required dependencies
102+
are installed automatically.
103+
</p>
104+
<CodeBlock
105+
code={`# Add a single component
106+
npx shadcn@latest add https://careui.ohc.network/r/button.json
107+
108+
# Add several at once
109+
npx shadcn@latest add \\
110+
https://careui.ohc.network/r/button.json \\
111+
https://careui.ohc.network/r/input.json \\
112+
https://careui.ohc.network/r/card.json
113+
114+
# pnpm / yarn / bun work too
115+
pnpm dlx shadcn@latest add https://careui.ohc.network/r/button.json
116+
bunx shadcn@latest add https://careui.ohc.network/r/button.json`}
117+
id="add-component"
118+
/>
119+
</div>
120+
</section>
121+
122+
{/* Tailwind v4 Setup Section */}
123+
<section className="space-y-4">
124+
<SectionTitle>Tailwind v4 setup</SectionTitle>
125+
<div className="space-y-3">
126+
<p className="text-muted-foreground leading-relaxed">
127+
Care UI uses Tailwind v4's CSS-first configuration — there is no{" "}
128+
<InlineCode>tailwind.config.js</InlineCode>. Import Tailwind from your
129+
root stylesheet and the design tokens shadcn writes will be picked up
130+
automatically.
131+
</p>
132+
<CodeBlock
133+
code={`/* src/index.css */
134+
@import "tailwindcss";
135+
136+
/* shadcn init writes the @theme block and CSS variables
137+
for colors, radius, and typography here. */`}
138+
id="tailwind-setup"
139+
/>
140+
</div>
141+
</section>
142+
143+
{/* Use in App Section */}
144+
<section className="space-y-4">
145+
<SectionTitle>Use it in your app</SectionTitle>
146+
<div className="space-y-3">
147+
<p className="text-muted-foreground leading-relaxed">
148+
Components are imported from the <InlineCode>@/components/ui/</InlineCode>{" "}
149+
alias and composed with regular Tailwind classes. They are fully typed,
150+
support dark mode out of the box, and follow the Care UI heading and
151+
spacing rhythm documented under{" "}
152+
<a href="#docs-typography" className="text-primary hover:underline">
153+
Typography
154+
</a>
155+
.
156+
</p>
157+
<CodeBlock
158+
code={`import { Button } from "@/components/ui/button"
159+
import { Input } from "@/components/ui/input"
160+
import { Label } from "@/components/ui/label"
161+
162+
export function SignInForm() {
163+
return (
164+
<form className="space-y-4">
165+
<div className="space-y-2">
166+
<Label htmlFor="email">Email</Label>
167+
<Input id="email" type="email" placeholder="you@hospital.org" />
168+
</div>
169+
<Button type="submit" className="w-full">
170+
Sign in
171+
</Button>
172+
</form>
173+
)
174+
}`}
175+
id="use-in-app"
176+
/>
177+
</div>
178+
</section>
179+
180+
{/* What You Get Section */}
181+
<section className="space-y-4">
182+
<SectionTitle>What you get</SectionTitle>
183+
<div className="space-y-4">
184+
<p className="text-muted-foreground leading-relaxed">
185+
Source you own (no runtime dependency on Care UI), full TypeScript types
186+
and Radix accessibility primitives, the Care UI theme tokens (light,
187+
dark, protanopia, tritanopia, high-contrast), and the typography +
188+
spacing system tuned for clinical density.
189+
</p>
190+
<div>
191+
<SubsectionTitle>Features included</SubsectionTitle>
192+
<ul className="mt-3 space-y-2">
193+
<li className="text-muted-foreground flex gap-3">
194+
<span className="mt-1 text-primary">✓</span>
195+
<span>Source code ownership — components are installed, never bundled</span>
196+
</li>
197+
<li className="text-muted-foreground flex gap-3">
198+
<span className="mt-1 text-primary">✓</span>
199+
<span>Full TypeScript types and Radix UI primitives</span>
200+
</li>
201+
<li className="text-muted-foreground flex gap-3">
202+
<span className="mt-1 text-primary">✓</span>
203+
<span>Semantic colour tokens and 5 theme modes (light, dark, high-contrast, protanopia, tritanopia)</span>
204+
</li>
205+
<li className="text-muted-foreground flex gap-3">
206+
<span className="mt-1 text-primary">✓</span>
207+
<span>Typography and spacing system tuned for clinical density</span>
208+
</li>
209+
<li className="text-muted-foreground flex gap-3">
210+
<span className="mt-1 text-primary">✓</span>
211+
<span>Full dark mode support out of the box</span>
212+
</li>
213+
<li className="text-muted-foreground flex gap-3">
214+
<span className="mt-1 text-primary">✓</span>
215+
<span>Accessibility-first components with WCAG 2.2 AA compliance</span>
216+
</li>
217+
</ul>
218+
</div>
219+
</div>
220+
</section>
221+
222+
{/* Next Steps Section */}
223+
<section className="space-y-4">
224+
<SectionTitle>Next steps</SectionTitle>
225+
<div className="space-y-3">
226+
<p className="text-muted-foreground leading-relaxed">
227+
Browse the rest of the docs to learn more about the design system:
228+
</p>
229+
<ul className="space-y-2">
230+
<li className="text-muted-foreground flex gap-2">
231+
<span>→</span>
232+
<a href="#docs-typography" className="text-primary hover:underline">
233+
Typography
234+
</a>
235+
{" — Sizes, line heights, letter spacing, and vertical rhythm"}
236+
</li>
237+
<li className="text-muted-foreground flex gap-2">
238+
<span>→</span>
239+
<a href="#colors" className="text-primary hover:underline">
240+
Colors
241+
</a>
242+
{" — Semantic tokens, theme modes, and contrast pairings"}
243+
</li>
244+
<li className="text-muted-foreground flex gap-2">
245+
<span>→</span>
246+
<a href="#foundations" className="text-primary hover:underline">
247+
Foundations
248+
</a>
249+
{" — Spacing, elevation, borders, and layout shells"}
250+
</li>
251+
<li className="text-muted-foreground flex gap-2">
252+
<span>→</span>
253+
<a href="#accessibility" className="text-primary hover:underline">
254+
Accessibility
255+
</a>
256+
{" — WCAG compliance and component checklist"}
257+
</li>
258+
</ul>
259+
</div>
260+
</section>
261+
262+
{/* Footer */}
263+
<div className="border-t pt-8">
264+
<p className="text-muted-foreground text-sm">
265+
Need help? Check out our{" "}
266+
<a
267+
href="#components-overview"
268+
className="text-primary hover:underline"
269+
>
270+
component examples
271+
</a>
272+
{" or browse the "}
273+
<a
274+
href="https://github.com/ohcnetwork/careui"
275+
className="text-primary hover:underline"
276+
>
277+
source code
278+
</a>
279+
.
280+
</p>
281+
</div>
282+
</div>
283+
</main>
284+
);
285+
}

0 commit comments

Comments
 (0)