clerk/clerk-custom-ui

O que clerk-custom-ui faz?

Fluxos de autenticação personalizados e aparência de componentes - hooks (useSignIn, useSignUp), temas, cores, fontes, CSS. Use para fluxos de login/registro personalizados, estilização de aparência, customização visual e branding.

Visão Geral

Com esta skill, você pode:

• Customizar fluxos de autenticação: Use os hooks useSignIn e useSignUp para construir experiências de login e registro sob medida, com controle total sobre estados e etapas.
• Personalizar aparência: Altere temas, cores, fontes e estilos CSS dos componentes Clerk para refletir a identidade visual da sua marca.
• Integrar com qualquer UI: Combine os hooks com seu próprio design system ou bibliotecas de componentes (Material UI, Chakra, Tailwind, etc.).

Plataformas Suportadas

• React
• Next.js
• Outras frameworks JavaScript (com suporte a hooks)

Como Usar

Hooks de Autenticação

import { useSignIn } from "@clerk/nextjs";

function SignInPage() {
  const { isLoaded, signIn, setActive } = useSignIn();

  if (!isLoaded) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { email, password } = e.target.elements;

    try {
      const result = await signIn.create({
        identifier: email.value,
        password: password.value,
      });

      if (result.status === "complete") {
        await setActive({ session: result.createdSessionId });
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" placeholder="Email" />
      <input name="password" type="password" placeholder="Senha" />
      <button type="submit">Entrar</button>
    </form>
  );
}

Personalização de Aparência

import { ClerkProvider } from "@clerk/nextjs";

const appearance = {
  baseTheme: undefined, // ou seu tema customizado
  variables: {
    colorPrimary: "#6C47FF",
    colorText: "#1a1a2e",
    fontSize: "16px",
    fontFamily: "Inter, sans-serif",
  },
  elements: {
    card: "bg-white shadow-lg rounded-lg",
    formButtonPrimary: "bg-purple-600 hover:bg-purple-700",
  },
};

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider appearance={appearance}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

Documentação

Para detalhes completos, consulte a documentação oficial do Clerk.

Exemplos

• Exemplo com useSignIn
• Exemplo com useSignUp
• Guia de temas

Notas

• Certifique-se de ter as variáveis de ambiente NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY e CLERK_SECRET_KEY configuradas.
• Para uso com TypeScript, os tipos estão disponíveis nos pacotes @clerk/types.
• Esta skill é ideal para projetos que exigem autenticação com identidade visual única e fluxos customizados.