Felipe Moacir

Coss UI vs Origin UI: Evolução ou Reinício?

UI DesignLibrariesComparison
Coss UI vs Origin UI: Evolução ou Reinício?

Em 2024, a Origin UI — biblioteca React/Tailwind criada por Pasquale Vitiello e Davide Pacilio — foi adquirida pela Cal.com e rebrandizada como Coss UI. Não foi apenas uma troca de nome: a fundação e a arquitetura mudaram completamente.

1. O Antecessor: Origin UI

Origin UI era a evolução natural do shadcn/ui para interfaces de produto. Construído sobre Radix UI (os mesmos primitivos do shadcn), focava em dashboards, CRMs e aplicações B2B.

  • Fundação: Radix UI + Tailwind CSS
  • Modelo: Copy-paste, você possui o código
  • Foco: Componentes densos, acessíveis, prontos para SaaS
// Origin UI — Primitivos Radix por baixo
import { Input, Label } from '@/components/origin/input'

export function SignupForm() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email Corporativo</Label>
      <Input id="email" placeholder="nome@empresa.com" type="email" />
    </div>
  )
}

2. O Sucessor: Coss UI

Coss UI é a nova encarnação sob a Cal.com. A mudança central: Base UI substitui o Radix. Base UI (da MUI) oferece primitivos não estilizados com forte foco em acessibilidade e composabilidade.

  • Fundação: Base UI + Tailwind CSS
  • Arquitetura em 3 camadas:
    • Primitives — Blocos acessíveis sem estilo
    • Particles — Padrões pré-montados (forms, tabelas, date pickers)
    • Atoms — Componentes conectados a APIs (Cal.com Atoms)
  • Status: Early access, em evolução ativa
// Coss UI — Base UI por baixo, design system coerente
import { Input, Label } from '@/components/coss/input'

export function SignupForm() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email Corporativo</Label>
      <Input id="email" placeholder="nome@empresa.com" type="email" />
    </div>
  )
}

3. Radix vs Base UI: A Fundação

AspectoOrigin UI (Radix)Coss UI (Base UI)
MaturidadeMaduro, amplamente usadoBase UI em beta
EcossistemaShadcn, Radix ThemesCoss, Cal.com
CustomizaçãoMuito flexívelMuito flexível
Breaking changesRarosPossíveis (early access)

4. Veredito: Quando Migrar?

  • Projeto novo: Considere Coss UI se você aceita early access e quer uma stack alinhada à Cal.com (Base UI, Particles, Atoms).
  • Projeto com Origin UI: Avalie o esforço. Existe guia de migração Radix → Base UI oficial, mas a migração exige refatoração.
  • Shadcn atual: O Shadcn já oferece variante com Base UI. Coss UI é uma opinião diferente — design system mais denso, focado em apps como Cal.com.

A Coss UI representa a evolução da Origin UI com fundação mais moderna, mas ainda em consolidação. Para produção crítica, avalie o roadmap e sua tolerância a mudanças.