Monte seu perfil cee com código.

import { Card, Avatar, Bio, SocialLinks } from "cee";

export default function Profile() {
  return (
    <Card>
      <Avatar />
      <Bio />
      <SocialLinks />
    </Card>
  );
}

interface DevModeUser {
  username: string;
  displayName: string | null;
  avatar: string | null;
  bio: string | null;
  backgroundImage: string | null;
  primaryColor: string | null;
  socialLinks: Array<{
    platform?: string;
    label?: string;
    url: string;
    isVisible?: boolean;
  }>;
}

import { useUser, useRoute, navigate } from "cee";

export default function Profile() {
  const user = useUser();          // never null — throws if misused
  const route = useRoute();        // { p: string | null, params: {...} }
  return (
    <div>
      <h1>@{user.username}</h1>
      <p>You're on: {route.p ?? "/"}</p>
      <button onClick={() => navigate("/about")}>Go to about</button>
    </div>
  );
}

import { Card, Bio, Link, useRoute } from "cee";

function Home() {
  return <Card><Bio /><Link to="/about">About →</Link></Card>;
}
function About() {
  return <Card><h2>About me</h2><Link to="/">← Back</Link></Card>;
}
function NotFound() {
  return <Card><p>Not found.</p><Link to="/">Home</Link></Card>;
}

export const routes = {
  "/": Home,
  "/about": About,
  default: NotFound,
};

import { Card, Avatar, Bio, SocialLinks, Background } from "cee";

export default function Profile() {
  return (
    <>
      <Background />
      <Card padding={32} gap={16} align="center">
        <Avatar size={120} ring />
        <Bio size={18} align="center" />
        <SocialLinks size={48} gap={14} />
      </Card>
    </>
  );
}

import { Card, Avatar, Bio, SocialLinks, Background } from "cee";

export default function Profile() {
  return (
    <>
      <Background brightness={0.7} saturation={1.1} />
      <Card
        blur={24}
        background="rgba(255,255,255,0.06)"
        border="1px solid rgba(255,255,255,0.15)"
        rounded="xl"
        shadow="xl"
        glow
        glowIntensity={40}
        padding={36}
        gap={20}
        animate="fade"
        align="center"
      >
        <Avatar size={140} border={2} />
        <Bio as="h1" size={28} weight={700} align="center" />
        <SocialLinks size={48} colorMode="brand" hover="lift" />
      </Card>
    </>
  );
}

import { Card, Avatar, Bio, Background } from "cee";

export default function Profile() {
  return (
    <>
      <Background
        src="/loop.mp4"
        overlay={{ gradient: ["#000", "rgba(70,255,110,0.3)"], angle: 200, opacity: 0.6 }}
        playbackRate={0.8}
      />
      <Card padding={40} align="center" gap={16}>
        <Avatar size={160} ring glow />
        <Bio
          as="h1"
          size={36}
          weight={800}
          align="center"
          gradient={["#fff", "#46FF6E"]}
        />
      </Card>
    </>
  );
}

import { Card, SocialLinks } from "cee";

export default function Profile() {
  return (
    <Card padding={28} gap={20}>
      <SocialLinks
        direction="grid"
        columns={3}
        size={64}
        gap={12}
        shape="rounded"
        colorMode="brand"
        showLabel
        labelPosition="bottom"
        hover="bounce"
        shadow="md"
        animate="stagger"
        animateDelay={70}
      />
    </Card>
  );
}

import { Card, Avatar, Bio } from "cee";

export default function Profile() {
  return (
    <Card padding={32} align="center" gap={14}>
      <Avatar size={110} />
      <Bio
        typing={{ speed: 35, cursor: true }}
        size={22}
        weight={600}
        align="center"
      />
    </Card>
  );
}

import { Card, Avatar, Bio, SocialLinks } from "cee";

export default function Profile() {
  return (
    <Card direction="row" gap={32} padding={32} fullWidth>
      <Card padding={24} align="center" gap={12} maxWidth={300}>
        <Avatar size={100} />
        <Bio align="center" />
        <SocialLinks size={36} />
      </Card>
      <Card padding={24} gap={12}>
        <h2 style={{ fontSize: 20, fontWeight: 700, color: "#fff" }}>Notes</h2>
        <Bio>Drop anything you want on the right column.</Bio>
      </Card>
    </Card>
  );
}

import { useEffect, useState } from "react";
import { Card, Avatar, Bio, SocialLinks } from "cee";

export default function Profile() {
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setEntered(true), 1200);
    return () => clearTimeout(t);
  }, []);

  if (!entered) {
    return (
      <div
        style={{
          position: "fixed", inset: 0, display: "grid", placeItems: "center",
          background: "#000", zIndex: 50,
        }}
      >
        <p style={{ fontSize: 14, letterSpacing: "0.4em", color: "#46FF6E" }}>
          LOADING
        </p>
      </div>
    );
  }
  return (
    <Card animate="zoom" padding={32} gap={16} align="center">
      <Avatar size={120} ring />
      <Bio align="center" />
      <SocialLinks />
    </Card>
  );
}

import { Card, Bio, useUser } from "cee";

function Stat({ label, value }) {
  return (
    <Card padding={16} align="center" maxWidth={140} gap={4} background="rgba(70,255,110,0.06)">
      <Bio as="span" size={26} weight={800} color="#46FF6E">{value}</Bio>
      <Bio as="span" size={11} uppercase letterSpacing={1.5}>{label}</Bio>
    </Card>
  );
}

export default function Profile() {
  const u = useUser();
  return (
    <Card padding={28} gap={16}>
      <Bio as="h1" size={28} weight={800}>@{u.username}</Bio>
      <Card direction="row" gap={12} fullWidth>
        <Stat label="Songs" value="124" />
        <Stat label="Drops" value="8" />
        <Stat label="Fans" value="2.1k" />
      </Card>
    </Card>
  );
}

import { Card, Link, useRoute } from "cee";

function Tab({ to, label, active }) {
  return (
    <Link
      to={to}
      variant={active ? "button" : "ghost"}
      rounded
      size="sm"
      background={active ? "#46FF6E" : undefined}
      color={active ? "#000" : "#fff"}
    >
      {label}
    </Link>
  );
}

export default function Profile() {
  const { p } = useRoute();
  const tab = p ?? "/";
  return (
    <Card padding={24} gap={16}>
      <Card direction="row" gap={8}>
        <Tab to="/" label="Home" active={tab === "/"} />
        <Tab to="/links" label="Links" active={tab === "/links"} />
        <Tab to="/about" label="About" active={tab === "/about"} />
      </Card>
      <div>
        {tab === "/" && <p>Home content.</p>}
        {tab === "/links" && <p>Links content.</p>}
        {tab === "/about" && <p>About content.</p>}
      </div>
    </Card>
  );
}

// main.tsx
import { Card } from "cee";
import { Hero } from "./Hero";
import { fmt } from "./lib/format";

export default function Profile() {
  return <Card><Hero label={fmt("hi")} /></Card>;
}

// Hero.tsx
export function Hero({ label }) { return <h1>{label}</h1>; }

// lib/format.ts  (resolved as lib/format → lib/format.ts)
export function fmt(s: string) { return s.toUpperCase(); }

npx create-cee-profile@latest my-profile
cd my-profile
npm install
npm run login   # vincula sua conta cee.bio (uma vez por máquina)
npm run dev     # localhost:5173 com hot reload

# Sempre use `npm run X` — existe um pacote npm não-relacionado
# chamado "cee" que sequestra `npx cee`. O scaffold inclui
# @cee.bio/cli como devDependency, então `npm run login` resolve
# o binário local correto.

npm run login    # vincula esta máquina (pairing code via browser)
npm run dev      # Vite dev server + hot reload, com seu profile real
npm run push     # builda + publica em cee.bio/seu-user
npm run pull     # baixa o source atual do servidor