chore: initial Untitled UI Vite scaffold with FontAwesome Pro

This commit is contained in:
2026-03-16 14:23:23 +05:30
commit 3a338b33dd
163 changed files with 27081 additions and 0 deletions

75
src/pages/home-screen.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { BookOpen01, Check, Copy01, Cube01, HelpCircle } from "@untitledui/icons";
import { Button } from "@/components/base/buttons/button";
import { ButtonUtility } from "@/components/base/buttons/button-utility";
import { UntitledLogoMinimal } from "@/components/foundations/logo/untitledui-logo-minimal";
import { useClipboard } from "@/hooks/use-clipboard";
export const HomeScreen = () => {
const clipboard = useClipboard();
return (
<div className="flex h-dvh flex-col">
<div className="flex min-h-0 flex-1 flex-col items-center justify-center px-4">
<div className="relative flex size-28 items-center justify-center">
<UntitledLogoMinimal className="size-10" />
</div>
<h1 className="max-w-3xl text-center text-display-sm font-semibold text-primary">Untitled UI Vite starter kit</h1>
<p className="mt-2 max-w-xl text-center text-lg text-tertiary">
Get started by using existing components that came with this starter kit or add new ones:
</p>
<div className="relative mt-6 flex h-10 items-center rounded-lg border border-secondary bg-secondary">
<code className="px-3 font-mono text-secondary">npx untitledui@latest add</code>
<hr className="h-10 w-px bg-border-secondary" />
<ButtonUtility
color="tertiary"
size="sm"
tooltip="Copy"
className="mx-1"
icon={clipboard.copied ? Check : Copy01}
onClick={() => clipboard.copy("npx untitledui@latest add")}
/>
</div>
<div className="mt-6 flex items-center gap-3">
<Button
href="https://www.untitledui.com/react/docs/introduction"
target="_blank"
rel="noopener noreferrer"
color="link-color"
size="lg"
iconLeading={BookOpen01}
>
Docs
</Button>
<div className="h-px w-4 bg-brand-solid" />
<Button
href="https://www.untitledui.com/react/resources/icons"
target="_blank"
rel="noopener noreferrer"
color="link-color"
size="lg"
iconLeading={Cube01}
>
Icons
</Button>
<div className="h-px w-4 bg-brand-solid" />
<Button
href="https://github.com/untitleduico/react/issues/"
target="_blank"
rel="noopener noreferrer"
color="link-color"
size="lg"
iconLeading={HelpCircle}
>
Help
</Button>
</div>
</div>
</div>
);
};

32
src/pages/not-found.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { ArrowLeft } from "@untitledui/icons";
import { useNavigate } from "react-router";
import { Button } from "@/components/base/buttons/button";
export function NotFound() {
const router = useNavigate();
return (
<section className="flex min-h-screen items-start bg-primary py-16 md:items-center md:py-24">
<div className="mx-auto max-w-container grow px-4 md:px-8">
<div className="flex w-full max-w-3xl flex-col gap-8 md:gap-12">
<div className="flex flex-col gap-4 md:gap-6">
<div className="flex flex-col gap-3">
<span className="text-md font-semibold text-brand-secondary">404 error</span>
<h1 className="text-display-md font-semibold text-primary md:text-display-lg lg:text-display-xl">We cant find that page</h1>
</div>
<p className="text-lg text-tertiary md:text-xl">Sorry, the page you are looking for doesn't exist or has been moved.</p>
</div>
<div className="flex flex-col-reverse gap-3 sm:flex-row">
<Button color="secondary" size="xl" iconLeading={ArrowLeft} onClick={() => router(-1)}>
Go back
</Button>
<Button size="xl" onClick={() => router(-1)}>
Take me home
</Button>
</div>
</div>
</div>
</section>
);
}