# Fulldev UI Agent Entry Point

Navigation: [/sitemap.md](/sitemap.md)

If you are an AI agent, treat this page as the entry point for Fulldev UI. Install the Fulldev skill first if your environment supports skills, then read the relevant Markdown pages before editing a project.

```bash
npx -y skills add fulldotdev/ui --skill fulldev -y
```

Start here:

- Install Fulldev UI: [/docs/installation.md](/docs/installation.md)
- Understand the project model: [/docs/introduction.md](/docs/introduction.md)
- Customize theme tokens: [/docs/theming.md](/docs/theming.md)
- Browse documentation sections: [/docs.md](/docs.md)
- Browse installable components: [/components.md](/components.md)
- Browse installable blocks: [/blocks.md](/blocks.md)
- Discover all pages: [/sitemap.md](/sitemap.md)
- Read registry metadata: [/r/registry.json](/r/registry.json)

Every documentation page has a Markdown version. Add `.md` to a page URL, for example `/components/button.md` or `/blocks/hero.md`.

Recommended agent flow:

1. Read `/docs/installation.md`.
2. Install the Fulldev skill if your agent supports skills.
3. Read the component or block page that matches the user's request.
4. Install registry items with `npx shadcn@latest add @fulldev/<name>`.
5. Use block and component examples as source references, not as hidden sidebar context.

---

## Homepage source

---
type: home
title: Home
description: Open-source Astro UI components and blocks that developers and AI agents can use to build content-driven Astro websites.
seo:
  title: Astro Components and Blocks - Fulldev UI
  description: Fulldev UI ships open-source Astro UI components and blocks that developers and AI agents can use to build content-driven Astro websites.
---

import { Icon } from "@/components/ui/icon"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

# **Components** and **Blocks** for building content-driven <strong><span class="text-primary">Astro</span></strong> websites

Fulldev UI provides open-source Astro UI components and blocks that developers and AI agents can use to build content-driven Astro websites. It uses the Shadcn registry format, installs as source files, and works alongside shadcn/ui when a project needs more interactive React components.

<Alert class="no-typography w-max">
  <Icon name="bot" />
  <AlertTitle>For AI agents</AlertTitle>
  <AlertDescription>
    Start with the Markdown entry point at <a href="/index.md">/index.md</a>.
  </AlertDescription>
</Alert>

```astro live
---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
---

<section
  class="grid gap-6 lg:grid-cols-[0.75fr_1.25fr] lg:items-start lg:gap-10"
>
  <div class="max-w-2xl space-y-3 lg:sticky lg:top-6">
    <h2 class="text-foreground text-2xl font-semibold tracking-tight">
      This homepage is built from live block previews.
    </h2>
  </div>

  <div class="grid gap-4">
    <div
      class="from-primary/6 via-primary/2 to-border rounded-xl bg-linear-to-br p-px"
    >
      <div
        class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-linear-to-br p-5"
      >
        <div class="space-y-2">
          <Icon name="component" class="text-primary size-5" />
          <h3 class="text-foreground text-lg font-semibold tracking-tight">
            Components
          </h3>
          <p class="text-muted-foreground max-w-2xl text-sm leading-6">
            Use Shadcn-style primitives plus Astro extras for content websites:
            typography, pricing, ratings, media, and docs navigation.
          </p>
        </div>
        <Button href="/components/" size="sm" class="mt-5">
          View components
        </Button>
      </div>
    </div>

    <div
      class="from-primary/6 via-primary/2 to-border rounded-xl bg-linear-to-br p-px"
    >
      <div
        class="from-primary/3 via-primary/1 to-background rounded-[11px] bg-linear-to-br p-5"
      >
        <div class="space-y-2">
          <Icon name="blocks" class="text-primary size-5" />
          <h3 class="text-foreground text-lg font-semibold tracking-tight">
            Blocks
          </h3>
          <p class="text-muted-foreground max-w-2xl text-sm leading-6">
            Use complete Astro sections for heroes, features, FAQs, pricing,
            articles, contact pages, and calls to action.
          </p>
        </div>
        <Button href="/blocks/" size="sm" class="mt-5"> View blocks </Button>
      </div>
    </div>
  </div>
</section>
```

<hr style="margin-block: 8rem;" />

## Shadcn-style **components** you know, Astro extras for content websites

Fulldev UI keeps familiar composition patterns for Astro, then adds components
for docs, editorial pages, pricing, media, and source-owned projects.

```astro live
---
import { Button } from "@/components/ui/button"
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
import { Rating } from "@/components/ui/rating"
---

<div class="grid w-full gap-0 overflow-hidden md:grid-cols-2">
  <div class="flex flex-col gap-5 p-5">
    <div class="space-y-2">
      <p class="text-base font-semibold">Shadcn-style primitives</p>
      <p class="text-muted-foreground text-sm leading-6">
        Button, Card, Tabs, Accordion, Dialog, Form, Select, and other familiar
        building blocks keep Shadcn-style composition patterns.
      </p>
    </div>
    <div class="grid gap-3">
      <div class="flex flex-wrap gap-2">
        <Button size="sm">Save</Button>
        <Button size="sm" variant="outline">Preview</Button>
      </div>
      <Combobox class="w-full max-w-56">
        <ComboboxInput placeholder="Choose content type" />
        <ComboboxContent>
          <ComboboxList>
            <ComboboxEmpty>No content types found.</ComboboxEmpty>
            <ComboboxItem value="page">Page</ComboboxItem>
            <ComboboxItem value="article">Article</ComboboxItem>
            <ComboboxItem value="docs">Docs page</ComboboxItem>
            <ComboboxItem value="guide">Guide</ComboboxItem>
            <ComboboxItem value="landing">Landing page</ComboboxItem>
            <ComboboxItem value="changelog">Changelog</ComboboxItem>
            <ComboboxItem value="case-study">Case study</ComboboxItem>
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  </div>
  <div class="border-border flex flex-col gap-5 p-5 md:border-l">
    <div class="space-y-2">
      <p class="text-base font-semibold">Content-driven extras</p>
      <p class="text-muted-foreground text-sm leading-6">
        Typography, Table of Contents, Price, Rating, Video, Banner, and
        navigation components support docs, articles, and marketing pages.
      </p>
    </div>
    <div class="grid gap-3">
      <Price>
        <PriceValue price={49} />
        <PriceUnit>month</PriceUnit>
      </Price>
      <div class="flex items-center gap-3">
        <Rating value={4.5} />
        <span class="text-muted-foreground text-sm">Editorial kit</span>
      </div>
    </div>
  </div>
</div>
```

<hr style="margin-block: 8rem;" />

## Prebuilt **blocks** you can use directly, or use as references for **AI agents** to generate custom blocks.

Fulldev blocks are ready-made Astro sections for heroes, features, FAQs, CTAs,
articles, and more. Use them by passing props, or use them as references when
building your own blocks with AI agents.

```astro live props={{ name: 'features-2' }}
---
import Features2Block from "@/components/blocks/features-2.astro"
---

<Features2Block
  title="A solid foundation for Astro websites"
  description="Use Fulldev UI when you want installable source files, clear examples, and complete sections that developers and AI agents can adapt safely."
  features={[
    {
      icon: "file-code",
      title: "Source you own",
      description:
        "Components and blocks install into your project as Astro and Tailwind files you can version, inspect, and customize.",
    },
    {
      icon: "terminal",
      title: "Shadcn-compatible installs",
      description:
        "Add individual items through the @fulldev registry namespace with familiar Shadcn CLI commands.",
    },
    {
      icon: "rocket",
      title: "Astro performance model",
      description:
        "Use Astro-first components for content pages and current marketing sections, then add heavier interactivity only where the project needs it.",
    },
    {
      icon: "blocks",
      title: "Composition examples",
      description:
        "Use blocks directly, or let AI agents use them as examples for layout, props, spacing, and component composition.",
    },
    {
      icon: "book-open",
      title: "Docs for AI agents",
      description:
        "Every docs page has a Markdown version, and examples show the rendered preview and source together.",
    },
    {
      icon: "palette",
      title: "Token-driven theming",
      description:
        "Customize color, radius, spacing, and visual tone through CSS variables and Tailwind conventions.",
    },
  ]}
/>
```

```astro live props={{ name: 'cta-7' }}
---
import Cta7Block from "@/components/blocks/cta-7.astro"
import avatarBupt from "@/assets/avatar-contributor-BuptStEve.webp"
import avatarJeremy from "@/assets/avatar-contributor-jeremybosma.webp"
import avatarLjstella from "@/assets/avatar-contributor-ljstella.webp"
import avatarNeko from "@/assets/avatar-contributor-NekoSakuraLucia.webp"
import avatarRakshit from "@/assets/avatar-contributor-RakshitGumber.webp"
import avatarSaran from "@/assets/avatar-contributor-saran13raj.webp"
import avatarSil from "@/assets/avatar-contributor-silveltman.webp"
import avatarSpjpgrd from "@/assets/avatar-contributor-spjpgrd.webp"
---

<Cta7Block
  class="from-primary/8 via-primary/3 to-background bg-background bg-linear-to-br"
  title="Build content-driven Astro websites"
  description="Own the source, install with shadcn-compatible commands, and give developers and AI agents Astro-first examples they can adapt safely."
  buttons={[{ label: "Get started", href: "/docs/installation/" }]}
  socialProof={{
    avatars: [
      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
      { image: avatarJeremy, initials: "JB", name: "Jeremy Bosma" },
      { image: avatarSaran, initials: "SR", name: "Saran Raj" },
      { image: avatarNeko, initials: "NL", name: "NekoSakuraLucia" },
      { image: avatarRakshit, initials: "RG", name: "Rakshit Gumber" },
      { image: avatarBupt, initials: "BS", name: "BuptStEve" },
      { image: avatarLjstella, initials: "LJ", name: "ljstella" },
      { image: avatarSpjpgrd, initials: "SP", name: "spjpgrd" },
    ],
    count: "+9",
    text: "Open-source contributors",
  }}
/>
```