Docs

Astro

Volver atrás

Instalación Astro

Para comenzar sigue estos pasos:

*La guia usa npm pero puedes usar tu empaquetador preferido*
1

Inicia un proyecto Astro

                                                               
                                    $ 
                                     npm create astro@latest
 npm install
2

Instala Tailwind CSS

                                                               
                                    $ 
                                     npm install tailwindcss @tailwindcss/vite
                                        
@import "tailwindcss";
3

Instala Remixicon

                                                               
                                    $ 
                                     npm install remixicon
4

Crea una carpeta "components" en el "src" del proyecto

Elige el componente que desees y agregalo a la carpeta

Botones

      

---

---

<button
  class="bg-black text-white font-semibold py-2 px-4 rounded-lg transition duration-200 border border-gray-600 hover:opacity-95 focus:outline-none focus:ring-2 focus:ring-gray-500"
  aria-label="Boton"
>
  Boton
</button>


    
      
---

---

<button
  class="bg-gray-700 text-white font-semibold py-2 px-4 rounded-lg border border-gray-600 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 transition duration-200"
  aria-label="Boton Secondary"
>
  Boton
</button>


    
      
---

---

<button
  class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-300 transition duration-200"
  aria-label="Boton Warning"
>
  Boton
</button>

Cards

PRO

Jane Doe

Product Designer

28

Projects

160

Likes

5.2k

Followers

Profile Completion 85% 
      
---
---

<article class="w-full md:w-80 bg-white border-none shadow-lg hover:shadow-xl transition-all duration-300 rounded-xl p-6">
  <header class="relative pb-0">
    <div class="absolute top-4 right-4">
      <span class="px-2 py-1 text-xs font-semibold text-white bg-emerald-500 rounded-lg hover:bg-emerald-800 transition duration-150">PRO</span>
    </div>
    <div class="flex flex-col items-center">
      <figure class="border-white border-solid shadow-md px-3 py-2 rounded-full">
        <i class="ri-user-line text-3xl"></i>
      </figure>
      <h2 class="mt-4 text-xl font-semibold">Jane Doe</h2>
      <p class="text-gray-500">Product Designer</p>
    </div>
  </header>
  <section class="pt-6">
    <div class="flex justify-between text-center mb-6">
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">28</p>
        <p class="text-xs text-gray-500">Projects</p>
      </div>
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">160</p>
        <p class="text-xs text-gray-500">Likes</p>
      </div>
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">5.2k</p>
        <p class="text-xs text-gray-500">Followers</p>
      </div>
    </div>
    <div class="space-y-2">
      <div class="flex justify-between text-sm">
        <span class="text-gray-500">Profile Completion</span>
        <span class="font-medium">85%</span>
      </div>
      <div class="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
        <div class="bg-blue-500 h-2 w-[85%]"></div>
      </div>
    </div>
  </section>
  <footer class="flex gap-2 items-center mt-4">
    <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
      <i class="ri-heart-fill text-lg text-rose-500"></i>
      <span class="ml-1">Liked</span>
    </button>
    <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
      <i class="ri-message-3-line text-lg text-gray-500"></i>
      <span class="ml-1">Message</span>
    </button>
    <button class="cursor-pointer w-9 h-9 flex items-center justify-center border border-gray-200 rounded-lg">
      <i class="ri-share-line text-lg text-gray-500"></i>
    </button>
  </footer>
</article>
react-svg
Tecnologia Lectura 5 min

El futuro de la IA en el desarrollo web

Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.

Por Alex Brown Leer más 
      
---

---

<article class="flex flex-col w-96 rounded-2xl gap-2 shadow-xl py-4 transition duration-150 hover:shadow-2xl">
  <img src="/React.svg" alt="react-svg" class="bg-slate-200 w-full h-52" />
  <div class="flex px-3 items-center gap-3 pt-2">
    <span class="text-base font-bold">Tecnologia</span>
    <span class="text-sm text-slate-500">Lectura 5 min</span>
  </div>
  <div class="flex flex-col gap-1 px-3">
    <h3 class="text-2xl font-semibold">El futuro de la IA en el desarrollo web</h3>
    <p class="text-slate-600">Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.</p>
  </div>
  <div class="flex justify-between px-3">
    <span class="flex gap-2 items-center text-sm"><i class="ri-user-fill"></i>Por Alex Brown</span>
    <a href="#" class="text-cyan-500 transition duration-150 hover:underline font-bold">Leer más</a>
  </div>
</article>
react-svg
Tecnologia Lectura 5 min

El futuro de la IA en el desarrollo web

Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.

Por Alex Brown Leer más 
      
---

---

<article class="flex flex-col w-96 rounded-2xl gap-2 shadow-xl py-4 transition duration-150 hover:shadow-2xl">
  <img src="/React.svg" alt="react-svg" class="bg-slate-200 w-full h-52" />
  <div class="flex px-3 items-center gap-3 pt-2">
    <span class="text-base font-bold">Tecnologia</span>
    <span class="text-sm text-slate-500">Lectura 5 min</span>
  </div>
  <div class="flex flex-col gap-1 px-3">
    <h3 class="text-2xl font-semibold">El futuro de la IA en el desarrollo web</h3>
    <p class="text-slate-600">Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.</p>
  </div>
  <div class="flex justify-between px-3">
    <span class="flex gap-2 items-center text-sm"><i class="ri-user-fill"></i>Por Alex Brown</span>
    <a href="#" class="text-cyan-500 transition duration-150 hover:underline font-bold">Leer más</a>
  </div>
</article>

Inputs

      
---

---

<div class="space-y-2 w-full max-w-md">
  <label for="email" class="block font-medium text-gray-700">Email</label>
  <input
    type="email"
    id="email"
    placeholder="Enter your email"
    class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
    onInput="handleEmailChange(event)"
  />
</div>

<script>
  let email = '';

  function handleEmailChange(event) {
    email = event.target.value;
    console.log(email); // Opcional: para verificar el valor actualizado en la consola
  }
</script>



    
      
---

---

<div class="space-y-2 w-full max-w-md">
  <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
  <div class="relative">
    <input
      type="password"
      id="password"
      placeholder="Enter your password"
      class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
    />
    <button
      type="button"
      class="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
      aria-label="Show password"
      onClick="togglePasswordVisibility()"
    >
      <i class="ri-eye-line h-4 w-4" aria-hidden="true" id="toggleIcon"></i>
    </button>
  </div>
</div>

Alert

      
---

---

<div class="flex items-center p-3 rounded-2xl bg-blue-100 text-blue-700" role="alert">
  <i class="ri-information-line mr-2"></i>
  <span>This is an informational alert message.</span>
</div>

Forms

Login

Enter your credentials to access your account

      
---

---

<div class="w-full max-w-xs mx-auto border rounded p-4 transition duration-150 shadow-xl hover:shadow-2xl">
  <h2 class="text-xl font-bold mb-2">Login</h2>
  <p class="text-gray-600 mb-4 max-sm:text-base">Enter your credentials to access your account</p>
  <form class="space-y-4">
    <div class="space-y-2">
      <label for="email" class="block font-medium">Email</label>
      <div class="relative">
        <i class="ri-mail-line absolute left-3 top-3 text-gray-400"></i>
        <input id="email" type="email" placeholder="Enter your email" class="w-full pl-10 p-2 border rounded" />
      </div>
    </div>
    <div class="space-y-2">
      <label for="password" class="block font-medium">Password</label>
      <div class="relative">
        <i class="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
        <input id="password" type="password" placeholder="Enter your password" class="w-full pl-10 p-2 border rounded" />
      </div>
    </div>
    <button type="submit" class="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4">Log In</button>
  </form>
</div>

Contact Us

Send us a message and we will get back to you as soon as possible

      
---

---

<div class="w-full max-w-2xl mx-auto border rounded p-4 shadow-xl hover:shadow-2xl">
  <h2 class="text-xl font-bold mb-2">Contact Us</h2>
  <p class="text-gray-600 mb-4">Send us a message and we will get back to you as soon as possible</p>
  <form class="space-y-4">
    <div class="space-y-2">
      <label for="name" class="block font-medium">Name</label>
      <div class="relative">
        <i class="ri-user-line absolute left-3 top-3 text-gray-400"></i>
        <input id="name" placeholder="Enter your name" class="w-full pl-10 p-2 border rounded" />
      </div>
    </div>
    <div class="space-y-2">
      <label for="message" class="block font-medium">Message</label>
      <textarea id="message" placeholder="Type your message here" class="w-full p-2 border rounded"></textarea>
    </div>
    <button type="submit" class="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4">
      <i class="ri-send-plane-line mr-2"></i>
      Send Message
    </button>
  </form>
</div>

Subscribe to Our Newsletter

Stay updated with our latest news

      
---

---

<div class="w-full shadow-xl hover:shadow-2xl max-w-md mx-auto border rounded p-4">
  <h2 class="text-xl font-bold mb-2">Subscribe to Our Newsletter</h2>
  <p class="text-gray-600 mb-4">Stay updated with our latest news</p>
  <form class="space-y-4">
    <label class="block font-medium">Choose your plan</label>
    <div class="space-y-2">
      <label class="flex items-center">
        <input type="radio" name="plan" value="basic" class="mr-2" checked />
        Basic
      </label>
      <label class="flex items-center">
        <input type="radio" name="plan" value="premium" class="mr-2" />
        Premium
      </label>
      <label class="flex items-center">
        <input type="radio" name="plan" value="pro" class="mr-2" />
        Pro
      </label>
    </div>
    <button type="submit" class="w-full transition duration-150 hover:bg-blue-700 bg-blue-500 text-white p-2 rounded mt-4">
      <i class="ri-check-line mr-2"></i>
      Subscribe
    </button>
  </form>
</div>

Tables

# Name Age Country
1 John Doe 25 USA
2 Jane Smith 30 Canada 
      
---

---

<div class="overflow-x-auto bg-white shadow-md rounded-lg">
  <table class="min-w-full text-sm text-left text-gray-600">
    <thead class="bg-gray-200">
      <tr>
        <th class="px-6 py-3">#</th>
        <th class="px-6 py-3">Name</th>
        <th class="px-6 py-3">Age</th>
        <th class="px-6 py-3">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-6 py-3">1</td>
        <td class="px-6 py-3">John Doe</td>
        <td class="px-6 py-3">25</td>
        <td class="px-6 py-3">USA</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="px-6 py-3">2</td>
        <td class="px-6 py-3">Jane Smith</td>
        <td class="px-6 py-3">30</td>
        <td class="px-6 py-3">Canada</td>
      </tr>
    </tbody>
  </table>
</div>
# Name Age Country
1 John Doe 25 USA
2 Jane Smith 30 Canada
Showing 1 to 2 of 50 entries
      
---

---

<div class="overflow-x-auto bg-white shadow-md rounded-lg">
  <div class="flex justify-between items-center p-4">
    <input
      type="text"
      placeholder="Search..."
      class="px-4 py-2 border rounded-lg text-sm w-1/4"
    />
    <div class="flex space-x-2">
      <button class="px-4 py-2 bg-blue-500 text-white text-sm rounded">Filter</button>
      <button class="px-4 py-2 bg-gray-500 text-white text-sm rounded">Reset</button>
    </div>
  </div>

  <table class="min-w-full text-sm text-left text-gray-600">
    <thead class="bg-blue-100">
      <tr>
        <th class="px-6 py-3">#</th>
        <th class="px-6 py-3">Name</th>
        <th class="px-6 py-3">Age</th>
        <th class="px-6 py-3">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-6 py-3">1</td>
        <td class="px-6 py-3">John Doe</td>
        <td class="px-6 py-3">25</td>
        <td class="px-6 py-3">USA</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="px-6 py-3">2</td>
        <td class="px-6 py-3">Jane Smith</td>
        <td class="px-6 py-3">30</td>
        <td class="px-6 py-3">Canada</td>
      </tr>
    </tbody>
  </table>

  <div class="flex justify-between items-center p-4">
    <div class="text-sm">Showing 1 to 2 of 50 entries</div>
    <div class="space-x-2">
      <button class="px-4 py-2 border rounded">Previous</button>
      <button class="px-4 py-2 border rounded">Next</button>
    </div>
  </div>
</div>

Accordions

¿Puedo usar esto en mi proyecto?

Sí. es de uso gratuito para proyectos personales y comerciales. No se requiere atribución.

¿Por qué no lo publicas como paquete npm?

La idea detrás de esto es darle propiedad y control sobre el código, permitiéndole decidir cómo se construyen y diseñan los componentes.

¿Qué frameworks son compatibles?

Puedes usarlo en cualquiera, React, Astro, Angular, Vue, etc.

      
---

---

    <div class="w-full border border-gray-300 rounded-lg bg-black py-2 px-4 ">
        <details class="faq-border mb-4 pb-2 group max-lg:px-5 ">
            <summary class="text-white cursor-pointer flex justify-between items-center group-hover:underline">
              ¿Puedo usar esto en mi proyecto?
              <span class="ml-2">
                <svg class="w-4 h-4 transition-transform group-open:rotate-90" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </span>
            </summary>
            <p class="text-white pt-5">Sí. es de uso gratuito para proyectos personales y comerciales. No se requiere atribución.</p>
          </details>
          
          <details class="faq-border mb-4 pb-2 group max-lg:px-5 ">
            <summary class="text-white cursor-pointer flex justify-between items-center group-hover:underline">
              ¿Por qué no lo publicas como paquete npm?
              <span class="ml-2">
                <svg class="w-4 h-4 transition-transform group-open:rotate-90" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </span>
            </summary>
            <p class="text-white pt-5">La idea detrás de esto es darle propiedad y control sobre el código, permitiéndole decidir cómo se construyen y diseñan los componentes.</p>
          </details>
          
          <details class="faq-border mb-4 pb-2 group max-lg:px-5 ">
            

              <summary class="text-white cursor-pointer flex justify-between items-center group-hover:underline">
                ¿Qué frameworks son compatibles?
                <span class="ml-2">
                  <svg class="w-4 h-4 transition-transform group-open:rotate-90" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                  </svg>
                </span>
                
              </summary>
          
            <p class="text-white pt-5">Puedes usarlo en cualquiera, React, Astro, Angular, Vue, etc.</p>
          </details>
          
    </div>
Custom Header 1
This accordion has custom styling applied to it.
Custom Header 2
You can customize the colors, padding, and other styles.
Custom Header 3
This demonstrates how flexible the accordion component can be. 
      
---

---

    
    <div class="w-full">
        <details class="mb-2">
            <summary class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center">
              <i class="ri-edit-2-line mr-2"></i>
              Custom Header 1
            </summary>
            <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
              This accordion has custom styling applied to it.
            </div>
          </details>
          
          <details class="mb-2">
            <summary class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center">
              <i class="ri-settings-2-line mr-2"></i>
              Custom Header 2
            </summary>
            <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
              You can customize the colors, padding, and other styles.
            </div>
          </details>
          
          <details>
            <summary class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center">
              <i class="ri-lightbulb-line mr-2"></i>
              Custom Header 3
            </summary>
            <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
              This demonstrates how flexible the accordion component can be.
            </div>
          </details>
          
    </div>

Checkbox

      
---

---

<div class="bg-black flex items-center space-x-2 p-2 rounded">
    
    <input type="checkbox" id="exampleCheckbox" name="example">
    <label
    class="text-sm text-white font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    >
      Accept terms and conditions
    </label>
</div>