{"id":1636,"date":"2026-04-23T14:46:55","date_gmt":"2026-04-23T14:46:55","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1636"},"modified":"2026-04-23T14:49:44","modified_gmt":"2026-04-23T14:49:44","slug":"basecoat-componentes-tipo-shadcn-ui-pero-sin-react-ideal-para-laravel-blade-astro-y-mas","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/basecoat-componentes-tipo-shadcn-ui-pero-sin-react-ideal-para-laravel-blade-astro-y-mas\/","title":{"rendered":"Basecoat: componentes tipo shadcn\/ui pero sin React (ideal para Laravel, Blade, Astro y m\u00e1s)"},"content":{"rendered":"

Si usas Tailwind, seguro ya pasaste por esto:<\/p>\n

Empiezas feliz con utilidades\u2026 y terminas con HTML lleno de clases imposibles de leer.<\/p>\n

Algo as\u00ed:<\/p>\n

<button class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary\/90 h-9 px-4 py-2\">\r\nGuardar\r\n<\/button><\/pre>\n
Funciona\u2026 pero mantener eso en un proyecto real es otra historia.<\/p>\n
Ah\u00ed es donde entra Basecoat.<\/p>\n
\u00bfQu\u00e9 es Basecoat?<\/h3>\n
Basecoat es una librer\u00eda de componentes construida con Tailwind CSS que no depende de React ni de ning\u00fan framework espec\u00edfico.<\/p>\n
Su propuesta es simple:<\/p>\n
Tener componentes tipo shadcn\/ui, pero usando HTML limpio y clases sencillas.<\/p>\n
Ejemplo real:<\/p>\n
<button class=\"btn\">Guardar<\/button><\/pre>\n
Y listo.<\/p>\n
El problema que resuelve<\/p>\n
Hoy en d\u00eda tienes dos caminos con Tailwind:<\/p>\n
    \n
  • UI con clases utilitarias (Flowbite, Preline, etc.)<\/li>\n
  • Mucho copy\/paste<\/li>\n
  • HTML dif\u00edcil de leer<\/li>\n
  • Dif\u00edcil de mantener<\/li>\n
  • Componentes (shadcn\/ui)<\/li>\n
  • Excelente DX<\/li>\n
  • Sistema s\u00f3lido<\/li>\n<\/ul>\n
    Pero depende de React<\/p>\n
    \u00bfY si est\u00e1s en Laravel, Blade, Astro, Django\u2026?<\/strong><\/p>\n
    Ah\u00ed quedas en el limbo.<\/p>\n
    \u00bfPor qu\u00e9 Basecoat est\u00e1 interesante?<\/h3>\n
    Porque llena ese hueco perfectamente:<\/p>\n
    Sin framework obligatorio<\/p>\n
    Funciona con:<\/p>\n
      \n
    • Laravel (Blade o Inertia)<\/li>\n
    • Astro<\/li>\n
    • WordPress<\/li>\n
    • Django<\/li>\n
    • Rails<\/li>\n
    • HTML puro<\/li>\n
    • HTML limpio (sin \u201cclass soup\u201d)<\/li>\n<\/ul>\n
      En lugar de 20 clases, usas:<\/p>\n
      <input class=\"input\" type=\"text\" \/>\r\n<div class=\"card\"><\/div>\r\n<button class=\"btn\"><\/button><\/pre>\n
        \n
      • Sin JavaScript pesado<\/li>\n
      • No runtime JS<\/li>\n
      • Solo un poco de vanilla JS opcional (modales, dropdowns)<\/li>\n<\/ul>\n
        Esto es clave si te importa rendimiento.<\/p>\n
        Inspirado en shadcn\/ui (pero sin React)<\/h4>\n
        Basecoat toma lo mejor de ese enfoque:<\/p>\n
          \n
        • Sistema de dise\u00f1o consistente<\/li>\n
        • Theming<\/li>\n
        • Dark mode<\/li>\n
        • Componentes reutilizables<\/li>\n<\/ul>\n
          Pero sin obligarte a cambiar tu stack.<\/p>\n
          \u00bfC\u00f3mo funciona?<\/h4>\n
          Muy directo:<\/p>\n
            \n
          • Agregas un archivo CSS a tu proyecto Tailwind<\/li>\n
          • Usas clases como btn, card, input<\/li>\n
          • (Opcional) usas su CLI para scaffolding<\/li>\n<\/ul>\n
            No hay magia rara.<\/p>\n
            Ejemplo r\u00e1pido<\/p>\n
            Antes (Tailwind puro):<\/p>\n
            <div class=\"p-6 bg-white rounded-lg shadow-md\">\r\n<h2 class=\"text-lg font-semibold mb-2\">T\u00edtulo<\/h2>\r\n<p class=\"text-gray-600\">Contenido<\/p>\r\n\r\n<\/div>\r\n\r\nCon Basecoat:\r\n<div class=\"card\">\r\n<h2 class=\"card-title\">T\u00edtulo<\/h2>\r\nContenido\r\n\r\n<\/div><\/pre>\n
            Mucho m\u00e1s limpio, m\u00e1s legible y m\u00e1s mantenible.<\/p>\n
            Casos donde brilla<\/p>\n
            Esto te puede servir mucho si:<\/p>\n
              \n
            • Est\u00e1s trabajando con Blade en Laravel<\/li>\n
            • Usas Astro + Vue islands<\/li>\n
            • Haces landing pages r\u00e1pidas<\/li>\n
            • Quieres consistencia visual sin reinventar todo<\/li>\n
            • No quieres meter React solo por UI<\/li>\n<\/ul>\n
              \u00bfY comparado con otras opciones?<\/h4>\n
                \n
              • Flowbite \/ Preline \u2192 m\u00e1s clases, menos estructura<\/li>\n
              • Tailwind UI \u2192 bueno, pero sigue siendo copy\/paste pesado<\/li>\n
              • shadcn\/ui \u2192 excelente, pero React obligatorio<\/li>\n<\/ul>\n
                Basecoat se posiciona justo en medio:<\/p>\n
                Simplicidad + Estructura + Independencia de framework<\/p>\n
                Opini\u00f3n real<\/h4>\n
                Basecoat no es revolucionario\u2026 pero s\u00ed muy pr\u00e1ctico.<\/p>\n
                Y en proyectos reales eso vale m\u00e1s.<\/p>\n
                Especialmente si trabajas con stacks como:<\/p>\n
                  \n
                • Laravel<\/li>\n
                • HTML<\/li>\n
                • Astro<\/li>\n
                • Sistemas h\u00edbridos<\/li>\n<\/ul>\n
                  Donde meter React solo para UI no tiene sentido.<\/p>\n
                  Basecoat es una de esas herramientas que no hacen ruido, pero te ahorran tiempo todos los d\u00edas.<\/p>\n
                    \n
                  • Menos clases basura<\/li>\n
                  • M\u00e1s estructura<\/li>\n
                  • Mejor mantenibilidad<\/li>\n<\/ul>\n
                    Y sin casarte con ning\u00fan framework.<\/p>\n","protected":false},"excerpt":{"rendered":"
                    Si usas Tailwind, seguro ya pasaste por esto: Empiezas feliz con utilidades\u2026 y terminas con…<\/p>\n","protected":false},"author":1,"featured_media":1638,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,1],"tags":[221],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1636"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1636"}],"version-history":[{"count":1,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1636\/revisions"}],"predecessor-version":[{"id":1637,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1636\/revisions\/1637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1638"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}