> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Documentation

export const SponsorBanners = () => {
  const sponsorsByTier = JSON.parse(`{
  "gold": [
    {
      "name": "Agiledrop",
      "url": "https://www.agiledrop.com/laravel?utm_source=filament",
      "filename": "agiledrop.png"
    },
    {
      "name": "Mailtrap",
      "url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
      "filename": "mailtrap.png"
    }
  ],
  "silver": [
    {
      "name": "Ploi",
      "url": "https://ploi.io",
      "filename": "ploi.png"
    },
    {
      "name": "Redberry",
      "url": "https://redberry.international/filament-development",
      "filename": "redberry.png"
    },
    {
      "name": "Tapp Network",
      "url": "https://tappnetwork.com",
      "filename": "tapp-network.png"
    }
  ],
  "bronze": [
    {
      "name": "Always Curious",
      "url": "https://alwayscurious.co/we-love-filamentphp",
      "filename": "always-curious.png"
    },
    {
      "name": "Breezy Pixels",
      "url": "https://breezypixels.com/free?ref=filamentphp.com",
      "filename": "breezy-pixels.png"
    },
    {
      "name": "Chief Tools",
      "url": "https://chief.app?ref=filamentphp.com",
      "filename": "chief-tools.png"
    },
    {
      "name": "Cleavr",
      "url": "https://cleavr.io/?utm_source=filament",
      "filename": "cleavr.png"
    },
    {
      "name": "Creagia",
      "url": "https://creagia.com",
      "filename": "creagia.png"
    },
    {
      "name": "Dutch Coding Company",
      "url": "https://dutchcodingcompany.com/en?utm_source=filament&utm_medium=web&utm_campaign=sponsor",
      "filename": "dutch-coding-company.png"
    },
    {
      "name": "Ecomsoft",
      "url": "https://ecomsoft.fr",
      "filename": "ecomsoft.png"
    },
    {
      "name": "Flare",
      "url": "https://flareapp.io",
      "filename": "flare.png"
    },
    {
      "name": "Lander Systems",
      "url": "https://www.landersystems.com/?utm_source=filamentphp",
      "filename": "lander-systems.png"
    },
    {
      "name": "Lara Zeus",
      "url": "https://larazeus.com/?ref=filament",
      "filename": "lara-zeus.png"
    },
    {
      "name": "Lucky Media",
      "url": "https://luckymedia.dev/?utm_campaign=sponsor&utm_source=filament&utm_medium=web",
      "filename": "lucky-media.png"
    },
    {
      "name": "Relaticle",
      "url": "https://relaticle.com",
      "filename": "relaticle.png"
    },
    {
      "name": "SaaSykit",
      "url": "https://saasykit.com/?utm_source=filament",
      "filename": "saasykit.png"
    },
    {
      "name": "Score Agency",
      "url": "https://scoreagency.nl/?utm_source=filament",
      "filename": "score-agency.png"
    },
    {
      "name": "ServerAuth",
      "url": "https://serverauth.com/?utm_source=filament&utm_medium=web&utm_campaign=sponsor",
      "filename": "serverauth.png"
    },
    {
      "name": "Solution Forest",
      "url": "https://solutionforest.net",
      "filename": "solution-forest.png"
    },
    {
      "name": "Sorane",
      "url": "https://sorane.io/?utm_source=filamentphp",
      "filename": "sorane.png"
    }
  ]
}`);
  function shuffleArray(items) {
    const result = [...items];
    for (let index = result.length - 1; index > 0; index--) {
      const randomIndex = Math.floor(Math.random() * (index + 1));
      [result[index], result[randomIndex]] = [result[randomIndex], result[index]];
    }
    return result;
  }
  const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
  return <div className="not-prose sponsors-grid">
      {sponsors.map(sponsor => <a key={sponsor.name} href={sponsor.url} target="_blank">
          <img src={`/docs/images/sponsors/banners/${sponsor.filename}`} alt={sponsor.name} noZoom />
        </a>)}

      <a href="https://github.com/sponsors/danharrin" target="_blank" className="sponsor-banner-cta">
        <span className="sponsor-cta-content sponsor-cta-content-lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14" />
            <path d="M12 5v14" />
          </svg>
          <span>Your logo here</span>
        </span>
        <span className="line-pattern-overlay line-pattern-60" />
      </a>
    </div>;
};

export const Footer = () => {
  const sponsorsByTier = JSON.parse(`{
  "agency_partner": [
    {
      "name": "Kirschbaum",
      "url": "https://kirschbaumdevelopment.com/solutions/filament-development",
      "filename": "kirschbaum.svg"
    }
  ],
  "gold": [
    {
      "name": "Agiledrop",
      "url": "https://www.agiledrop.com/laravel?utm_source=filament",
      "filename": "agiledrop.svg"
    },
    {
      "name": "Baiz.ai",
      "url": "https://baiz.ai",
      "filename": "baiz-ai.svg"
    },
    {
      "name": "CMS Max",
      "url": "https://cmsmax.com?ref=filamentphp.com",
      "filename": "cms-max.svg"
    },
    {
      "name": "Mailtrap",
      "url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
      "filename": "mailtrap.svg"
    },
    {
      "name": "SerpApi",
      "url": "https://serpapi.com/?utm_source=filamentphp",
      "filename": "serpapi.svg"
    }
  ]
}`);
  function shuffleArray(items) {
    const result = [...items];
    for (let index = result.length - 1; index > 0; index--) {
      const randomIndex = Math.floor(Math.random() * (index + 1));
      [result[index], result[randomIndex]] = [result[randomIndex], result[index]];
    }
    return result;
  }
  const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
  return <div className="mt-16 flex flex-col gap-4">
      <h2 className="text-center text-2xl font-medium text-gray-800 dark:text-gray-200">
        Sponsored by
      </h2>

      <div className="not-prose flex flex-wrap items-center justify-center gap-5">
        {sponsors.map(sponsor => <a key={sponsor.name} className="footer-sponsor-card" href={sponsor.url} target="_blank" title={sponsor.name}>
            <img src={`/docs/images/sponsors/footer/${sponsor.filename}`} alt={sponsor.name} noZoom />
            <span className="line-pattern-overlay line-pattern-80" />
          </a>)}

        <a href="https://github.com/sponsors/danharrin" target="_blank" className="footer-sponsor-cta">
          <span className="sponsor-cta-content">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14" />
              <path d="M12 5v14" />
            </svg>
            <span>Your logo here</span>
          </span>
          <span className="line-pattern-overlay line-pattern-60" />
        </a>
      </div>
    </div>;
};

<div className="flex flex-col gap-12 max-w-5xl py-12 px-2 mx-auto">
  <div className="flex flex-col gap-6">
    <h1 className="home-hero-title font-medium text-gray-900 dark:text-gray-100 text-center">
      Filament Documentation
    </h1>

    <p className="home-hero-subtitle text-gray-700 dark:text-gray-300 text-center max-w-3xl mx-auto">
      From first install to production-ready apps: <br />
      Everything you need to build with confidence.
    </p>
  </div>

  <img src="https://mintcdn.com/filament-34a8cf01/TGqCET1V_8pwvcC0/images/hero.webp?fit=max&auto=format&n=TGqCET1V_8pwvcC0&q=85&s=8f0c182b58dd4439ce4b6eb2868d4b1f" alt="Barney the owl reading a documentation book" className="home-hero-image mx-auto dark:hidden" noZoom width="1214" height="859" data-path="images/hero.webp" />

  <div className="px-6 flex flex-col gap-4">
    <h2 className="font-medium text-2xl text-gray-800 dark:text-gray-200">
      Quick Links
    </h2>

    <div class="quick-links-grid">
      <Card title="Getting started" icon="rocket" href="/5.x/getting-started">
        Take a tour of Filament and learn how the pieces fit together to build
        your app.
      </Card>

      <Card title="Resources" icon="database" href="/5.x/resources/overview">
        Build a CRUD interface for your Eloquent model.
      </Card>

      <Card title="Form fields" icon="sliders" href="/5.x/forms/overview">
        View a list of all available fields to build interactive user forms
        with.
      </Card>

      <Card title="Table columns" icon="table" href="/5.x/tables/columns">
        View a list of all available table columns which provide different cell
        content.
      </Card>

      <Card title="Action buttons" icon="play" href="/5.x/actions/overview">
        Learn how to customize the appearance of a button, and open modals and
        slide-overs.
      </Card>

      <Card title="Schema layouts" icon="border-all" href="/5.x/schemas/layouts">
        View a list of all available layout components to organize your forms
        and infolists with.
      </Card>

      <Card title="Infolist entries" icon="list" href="/5.x/infolists/overview">
        View a list of all available infolist entries to display read-only
        information with.
      </Card>

      <Card title="Notifications" icon="bell" href="/5.x/notifications/overview">
        Notify your users of important events by delivering real-time messages
        using Livewire.
      </Card>

      <Card title="Widgets" icon="chart-area" href="/5.x/widgets/overview">
        View a list of all available widgets to build dashboards with.
      </Card>
    </div>
  </div>
</div>

<div className="px-8">
  <div className="mx-auto mt-16 flex max-w-7xl flex-col gap-4">
    <h2 className="text-2xl font-medium text-gray-800 dark:text-gray-200">
      With support from our partners
    </h2>

    <SponsorBanners />
  </div>
</div>

<div className="px-8 mb-16">
  <div className="mx-auto max-w-7xl">
    <Footer />
  </div>
</div>