Astro UI (fulldotdev/ui)

Astro UI

https://github.com/fulldotdev/ui
Admin
Fulldev UI is an Astro UI library designed for building entire websites with prebuilt components and...

Tokens:33,249
Snippets:299
Trust Score:5.8
Update:3 months ago
Show doc for...
Context Summary (auto-generated)
Raw
# fulldev/ui

fulldev/ui is a shadcn-compatible component library built specifically for Astro, designed for content-driven websites. It provides over 100 pure vanilla Astro components and pre-built page blocks without framework dependencies, styled with Tailwind CSS v4 and featuring full TypeScript support. The library leverages the shadcn CLI and registry system for seamless component installation.

The library focuses on content-first components such as sections, tiles, and items that are optimized for building marketing pages, landing pages, and content-heavy websites. Components are distributed through a namespaced registry (`@fulldev`) and can be installed individually or in bulk using the shadcn CLI, making it easy to incrementally adopt components as needed.

## Installation

Initialize shadcn in your Astro project and add the fulldev/ui registry to install components via the CLI.

```bash
# Create a new Astro project (if needed)
npx create-astro@latest my-project --template with-tailwindcss --install --git
cd my-project

# Initialize shadcn
npx shadcn@latest init

# Add fulldev/ui registry to components.json
# Edit components.json:
{
  "registries": {
    "@fulldev": "https://ui.full.dev/r/{name}.json"
  }
}

# Configure TypeScript paths in tsconfig.json:
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

# Install individual components
npx shadcn@latest add @fulldev/button
npx shadcn@latest add @fulldev/button @fulldev/item @fulldev/list

# Or install all components and blocks at once
npx shadcn@latest add @fulldev/components
npx shadcn@latest add @fulldev/blocks
```

## Button Component

Displays a button or link element with multiple variants including default, outline, secondary, ghost, destructive, and link styles. Supports icons, loading states, and can render as an anchor tag using the `href` attribute.

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

<!-- Basic button variants -->
<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

<!-- Button sizes -->
<Button variant="outline" size="sm">Small</Button>
<Button variant="outline">Default</Button>
<Button variant="outline" size="lg">Large</Button>

<!-- Button as link -->
<Button href="/login">Login</Button>

<!-- Icon button -->
<Button variant="outline" size="icon" aria-label="Submit">
  <Icon name="arrow-up-right" />
</Button>

<!-- Button with icon and text -->
<Button variant="outline" size="sm">
  <Icon name="git-branch" />
  New branch
</Button>

<!-- Loading state with spinner -->
<Button size="sm" variant="outline" disabled>
  <Spinner />
  Submit
</Button>

<!-- Rounded button -->
<Button class="rounded-full" size="icon" variant="outline">
  <Icon name="arrow-up" />
</Button>
```

## Section Component

A layout component for organizing page content into distinct sections with support for content, actions, prose, media, and grid layouts. Perfect for building hero sections, feature sections, and content blocks.

```astro
---
import image from "@/assets/image-placeholder.webp"
import { Button } from "@/components/ui/button"
import { Image } from "@/components/ui/image"
import {
  Section,
  SectionActions,
  SectionContent,
  SectionProse,
} from "@/components/ui/section"
---

<!-- Basic section with prose and actions -->
<Section>
  <SectionContent>
    <SectionProse>
      <h2>Section heading</h2>
      <p>This is a section component for organizing page content.</p>
    </SectionProse>
    <SectionActions>
      <Button>Primary Action</Button>
      <Button variant="outline">Secondary Action</Button>
    </SectionActions>
    <Image class="rounded-lg" src={image} alt="Section Image" />
  </SectionContent>
</Section>

<!-- Floating variant with elevated appearance -->
<Section variant="floating">
  <SectionContent>
    <SectionProse>
      <h2>Floating Section</h2>
      <p>This section has a floating card-like appearance.</p>
    </SectionProse>
  </SectionContent>
</Section>
```

## Tile Component

A card-like container component for displaying content tiles with support for media, split layouts, and interactive hover states. Ideal for product cards, feature showcases, and navigation items.

```astro
---
import image from "@/assets/image-placeholder.webp"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Image } from "@/components/ui/image"
import {
  Tile,
  TileActions,
  TileContent,
  TileDescription,
  TileMedia,
  TileSplit,
  TileSpread,
  TileTitle,
} from "@/components/ui/tile"
---

<!-- Basic tile with link -->
<Tile href="#">
  <TileContent>
    <TileTitle>Feature Title</TileTitle>
    <TileDescription>Description for this feature</TileDescription>
  </TileContent>
</Tile>

<!-- Floating variant with media -->
<Tile href="#" variant="floating">
  <TileMedia class="-mx-6 -mt-6 aspect-4/3">
    <Image class="size-full! object-cover" src={image} alt="Product" />
  </TileMedia>
  <TileSpread>
    <TileContent>
      <TileTitle>Product Name</TileTitle>
      <TileDescription>Beautiful product with amazing features</TileDescription>
    </TileContent>
    <Icon name="arrow-right" class="size-5 shrink-0" />
  </TileSpread>
</Tile>

<!-- Split layout with side-by-side content -->
<Tile href="#">
  <TileSplit class="items-center">
    <TileMedia>
      <Image src={image} alt="Sample" class="rounded-md" />
    </TileMedia>
    <TileContent>
      <TileTitle>Side-by-Side Layout</TileTitle>
      <TileDescription>Image on the left, content on the right</TileDescription>
      <TileActions class="mt-4">
        <Button variant="outline" size="sm">Learn More</Button>
      </TileActions>
    </TileContent>
  </TileSplit>
</Tile>

<!-- Tile with tagline -->
<Tile href="#" variant="floating">
  <TileSpread>
    <TileContent>
      <TileDescription class="text-primary text-xs font-medium">
        Featured
      </TileDescription>
      <TileTitle>Premium Feature</TileTitle>
      <TileDescription>Get access to exclusive features</TileDescription>
    </TileContent>
    <Icon name="arrow-right" class="size-5 shrink-0" />
  </TileSpread>
</Tile>
```

## Item Component

A flexible container for displaying content items with media, titles, and descriptions. Available in default, outline, and muted variants for different visual contexts.

```astro
---
import { Icon } from "@/components/ui/icon"
import {
  Item,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
---

<!-- Default item with icon -->
<Item>
  <ItemMedia>
    <Icon name="heart" class="size-4" />
  </ItemMedia>
  <div class="min-w-0 flex-1">
    <ItemTitle>Item Title</ItemTitle>
    <ItemDescription>Item description goes here</ItemDescription>
  </div>
</Item>

<!-- Outline variant -->
<Item variant="outline">
  <ItemMedia>
    <Icon name="star" class="size-4" />
  </ItemMedia>
  <div class="min-w-0 flex-1">
    <ItemTitle>Outline Variant</ItemTitle>
    <ItemDescription>This item has an outline variant</ItemDescription>
  </div>
</Item>

<!-- Muted variant -->
<Item variant="muted">
  <ItemMedia>
    <Icon name="info" class="size-4" />
  </ItemMedia>
  <div class="min-w-0 flex-1">
    <ItemTitle>Muted Variant</ItemTitle>
    <ItemDescription>This item has a muted variant</ItemDescription>
  </div>
</Item>
```

## Accordion Component

A vertically stacked set of interactive headings that each reveal a section of content. Uses native HTML `details` and `summary` elements for accessibility.

```astro
---
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
---

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Product Information</AccordionTrigger>
    <AccordionContent class="flex flex-col gap-4 text-balance">
      <p>
        Our flagship product combines cutting-edge technology with sleek design.
        Built with premium materials, it offers unparalleled performance.
      </p>
      <p>
        Key features include advanced processing capabilities and an intuitive
        user interface designed for both beginners and experts.
      </p>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Shipping Details</AccordionTrigger>
    <AccordionContent class="flex flex-col gap-4 text-balance">
      <p>
        We offer worldwide shipping through trusted courier partners. Standard
        delivery takes 3-5 business days, while express shipping ensures
        delivery within 1-2 business days.
      </p>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Return Policy</AccordionTrigger>
    <AccordionContent class="flex flex-col gap-4 text-balance">
      <p>
        We stand behind our products with a comprehensive 30-day return policy.
        Our hassle-free return process includes free return shipping.
      </p>
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

## Tabs Component

A set of layered sections of content that display one panel at a time. Provides a clean way to organize related content into switchable views.

```astro
---
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="tab-1" class="w-full max-w-sm">
  <TabsList class="grid w-full grid-cols-2">
    <TabsTrigger value="tab-1">Account</TabsTrigger>
    <TabsTrigger value="tab-2">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1">
    <div class="rounded-md border p-4">
      <h3 class="mb-2 font-semibold">Account</h3>
      <p class="text-muted-foreground text-sm">
        Make changes to your account here. Click save when you're done.
      </p>
    </div>
  </TabsContent>
  <TabsContent value="tab-2">
    <div class="rounded-md border p-4">
      <h3 class="mb-2 font-semibold">Password</h3>
      <p class="text-muted-foreground text-sm">
        Change your password here. You will be logged out after changing.
      </p>
    </div>
  </TabsContent>
</Tabs>
```

## Icon Component

A component for displaying scalable vector icons from lucide-icons and simple-icons libraries. Utilizes Astro's rendering for optimal performance.

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

<!-- Lucide icons -->
<Icon name="heart" />
<Icon name="star" />
<Icon name="check" />
<Icon name="trash-2" />
<Icon name="arrow-up-right" />
<Icon name="check-circle" />

<!-- Simple icons (brand icons) -->
<Icon name="x.com" />
<Icon name="whatsapp" />
<Icon name="github" />

<!-- With custom size -->
<Icon name="heart" class="size-6" />
<Icon name="star" class="size-8" />
```

## Image Component

A minimal wrapper around the Astro Image component with lazy loading support and optimized image handling.

```astro
---
import image from "@/assets/image-placeholder.webp"
import { Image } from "@/components/ui/image"
---

<Image src={image} alt="Image description" class="w-full max-w-md rounded-lg" />
```

## Avatar Component

An image element with a fallback for representing users. Supports custom shapes and can be stacked for group displays.

```astro
---
import avatar from "@/assets/avatar.webp"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
---

<!-- Basic avatar -->
<Avatar>
  <AvatarImage src={avatar} alt="@username" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

<!-- Rounded corners variant -->
<Avatar class="rounded-lg">
  <AvatarImage src={avatar} alt="@username" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

<!-- Stacked avatars group -->
<div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
  <Avatar>
    <AvatarImage src={avatar} alt="User 1" />
    <AvatarFallback>U1</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src={avatar} alt="User 2" />
    <AvatarFallback>U2</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src={avatar} alt="User 3" />
    <AvatarFallback>U3</AvatarFallback>
  </Avatar>
</div>
```

## Badge Component

Displays a badge with support for multiple variants and can render as a link element using the `href` attribute.

```astro
---
import { Badge } from "@/components/ui/badge"
import { Icon } from "@/components/ui/icon"
---

<!-- Badge variants -->
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

<!-- Badge with icon -->
<Badge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
  <Icon name="badge-check" class="size-3" />
  Verified
</Badge>

<!-- Notification badge -->
<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</Badge>

<!-- Badge as link -->
<Badge href="/category">Category</Badge>
```

## Alert Component

Displays a callout for user attention with optional icon, title, and description. Available in default and destructive variants.

```astro
---
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Icon } from "@/components/ui/icon"
---

<!-- Success alert -->
<Alert>
  <Icon name="check-circle-2" />
  <AlertTitle>Success! Your changes have been saved</AlertTitle>
  <AlertDescription>
    This is an alert with icon, title and description.
  </AlertDescription>
</Alert>

<!-- Destructive alert with list -->
<Alert variant="destructive">
  <Icon name="alert-circle" />
  <AlertTitle>Unable to process your payment.</AlertTitle>
  <AlertDescription>
    <p>Please verify your billing information and try again.</p>
    <ul class="list-inside list-disc text-sm">
      <li>Check your card details</li>
      <li>Ensure sufficient funds</li>
      <li>Verify billing address</li>
    </ul>
  </AlertDescription>
</Alert>
```

## Input Component

Displays a form input field with support for various input types and disabled state.

```astro
---
import { Input } from "@/components/ui/input"
---

<div class="flex w-full max-w-sm flex-col gap-3">
  <Input type="text" placeholder="Type here..." />
  <Input type="email" placeholder="Email" />
  <Input type="tel" placeholder="Phone" />
  <Input type="password" placeholder="Password" />
  <Input type="text" placeholder="Disabled" disabled />
</div>
```

## Checkbox Component

A control that allows users to toggle between checked and not checked states. Works with Label component for accessible forms.

```astro
---
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
---

<!-- Basic checkbox with label -->
<div class="flex items-center gap-3">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>

<!-- Pre-checked checkbox with description -->
<div class="flex items-start gap-3">
  <Checkbox id="terms-2" checked />
  <div class="grid gap-2">
    <Label for="terms-2">Accept terms and conditions</Label>
    <p class="text-muted-foreground text-sm">
      By clicking this checkbox, you agree to the terms and conditions.
    </p>
  </div>
</div>

<!-- Disabled checkbox -->
<div class="flex items-start gap-3">
  <Checkbox id="toggle" disabled />
  <Label for="toggle">Enable notifications</Label>
</div>
```

## AutoForm Component

A form component that automatically generates form fields based on a configuration array. Simplifies form creation for common use cases.

```astro
---
import { AutoForm } from "@/components/ui/auto-form"
---

<AutoForm
  fields={[
    { label: "Name", type: "text" },
    { label: "Email", type: "email" },
    { label: "Message", type: "textarea" },
  ]}
  submit="Send"
/>
```

## Table Component

A data table component that displays information in rows and columns with support for headers, body, footer, and captions.

```astro
---
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
---

<Table class="w-full max-w-2xl">
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead class="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell class="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>INV-002</TableCell>
      <TableCell>Pending</TableCell>
      <TableCell>PayPal</TableCell>
      <TableCell class="text-right">$150.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colspan="3">Total</TableCell>
      <TableCell class="text-right">$400.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>
```

## Navigation Menu Component

A collection of links for navigating websites with dropdown menus and content panels.

```astro
---
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
---

<NavigationMenu>
  <NavigationMenuList class="flex-wrap">
    <NavigationMenuItem>
      <NavigationMenuTrigger>Home</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[300px] gap-2">
          <li>
            <NavigationMenuLink href="/">
              <div class="font-medium">Introduction</div>
              <div class="text-muted-foreground text-sm">
                Get started with our library.
              </div>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/docs">
              <div class="font-medium">Documentation</div>
              <div class="text-muted-foreground text-sm">
                Learn how to use components.
              </div>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[300px] gap-2">
          <li>
            <NavigationMenuLink href="/components">
              <div class="font-medium">All Components</div>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

## Sheet Component

A sliding panel component that appears from the edge of the screen. Useful for mobile navigation menus and side panels.

```astro
---
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
---

<Sheet>
  <SheetTrigger variant="outline">Open Sheet</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>
        This is a description of the sheet. You can add any content here.
      </SheetDescription>
    </SheetHeader>
    <!-- Your content here -->
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Close</Button>
      </SheetClose>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

## Header Component

A layout component for the top section of a page with logo, navigation, and action buttons.

```astro
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoText } from "@/components/ui/logo"
---

<Header>
  <HeaderContent>
    <Logo href="/">
      <LogoText>fulldev/ui</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>

<!-- Floating variant -->
<Header variant="floating">
  <HeaderContent>
    <Logo href="/">
      <LogoText>Brand</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>
```

## Logo Component

A component for displaying brand logos with optional image and text elements.

```astro
---
import logo from "@/assets/logo.svg"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---

<Logo href="/">
  <LogoImage src={logo} alt="Brand Logo" />
  <LogoText>fulldev/ui</LogoText>
</Logo>
```

## Rating Component

A star rating component for displaying ratings visually with support for fractional values and custom sizes.

```astro
---
import { Rating } from "@/components/ui/rating"
---

<!-- Different rating values -->
<Rating rating={5} />
<Rating rating={4} />
<Rating rating={3.5} />
<Rating rating={2} />

<!-- Custom sizes -->
<Rating rating={4} class="text-lg" />
<Rating rating={4} class="text-2xl" />
<Rating rating={4} class="text-3xl" />
```

## Price Component

A flexible price display component for showing pricing information with currency and unit support.

```astro
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---

<!-- Basic price -->
<Price>
  <PriceValue price={99} />
  <PriceUnit>month</PriceUnit>
</Price>

<!-- Price with currency -->
<Price>
  <PriceValue price={29} currency="EUR" />
  <PriceUnit>month</PriceUnit>
</Price>
```

## List Component

A container for displaying a series of items in a list format with icon support.

```astro
---
import { Icon } from "@/components/ui/icon"
import { List, ListItem } from "@/components/ui/list"
---

<List class="w-full max-w-sm">
  <ListItem>
    <Icon name="check-circle" />
    First item with feature
  </ListItem>
  <ListItem>
    <Icon name="check" />
    Second item included
  </ListItem>
  <ListItem>
    <Icon name="check-circle-2" />
    Third item benefit
  </ListItem>
</List>
```

## Marquee Component

A continuous scrolling animation component for displaying content in a loop with direction and pause-on-hover controls.

```astro
---
import { Marquee, MarqueeContent } from "@/components/ui/marquee"

const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
---

<!-- Basic marquee -->
<Marquee class="mask-x-from-95%">
  <MarqueeContent>
    {items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))}
  </MarqueeContent>
</Marquee>

<!-- Reverse direction -->
<Marquee class="mask-x-from-95%">
  <MarqueeContent direction="right">
    {items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))}
  </MarqueeContent>
</Marquee>

<!-- Pause on hover -->
<Marquee class="mask-x-from-95%">
  <MarqueeContent pauseOnHover>
    {items.map((item) => (
      <span class="text-muted-foreground text-sm">{item}</span>
    ))}
  </MarqueeContent>
</Marquee>
```

## Native Carousel Component

A carousel component using native HTML scroll behavior for seamless slide navigation without JavaScript dependencies.

```astro
---
import {
  NativeCarousel,
  NativeCarouselContent,
  NativeCarouselItem,
  NativeCarouselNext,
  NativeCarouselPrevious,
} from "@/components/ui/native-carousel"
---

<NativeCarousel class="w-full max-w-2xl">
  <NativeCarouselContent>
    <NativeCarouselItem>
      <div class="bg-muted flex aspect-video items-center justify-center rounded-md">
        <span>Slide 1</span>
      </div>
    </NativeCarouselItem>
    <NativeCarouselItem>
      <div class="bg-muted flex aspect-video items-center justify-center rounded-md">
        <span>Slide 2</span>
      </div>
    </NativeCarouselItem>
    <NativeCarouselItem>
      <div class="bg-muted flex aspect-video items-center justify-center rounded-md">
        <span>Slide 3</span>
      </div>
    </NativeCarouselItem>
  </NativeCarouselContent>
  <NativeCarouselPrevious />
  <NativeCarouselNext />
</NativeCarousel>
```

## Theme Toggle Component

A button component that toggles between light and dark theme modes. Requires ThemeProvider in the document head to prevent flash of unstyled content.

```astro
---
// In your layout file
import { ThemeProvider, ThemeToggle } from "@/components/ui/theme-toggle"
---

<html>
  <head>
    <ThemeProvider />
    <!-- other head elements -->
  </head>
  <body>
    <ThemeToggle />
    <!-- your content -->
  </body>
</html>
```

## Collapsible Component

An interactive component which expands and collapses a panel of content.

```astro
---
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
---

<Collapsible class="w-full max-w-xl gap-2">
  <CollapsibleTrigger>
    <span>Can I use this in my project?</span>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p>
      Yes. Free to use for personal and commercial projects.
      No attribution required.
    </p>
  </CollapsibleContent>
</Collapsible>
```

## Summary

fulldev/ui is ideal for building content-driven websites such as marketing pages, landing pages, SaaS websites, portfolios, and documentation sites. The component library excels at rapid page construction using pre-built blocks like hero sections, feature grids, pricing tables, testimonial carousels, and contact forms. The shadcn CLI integration enables teams to selectively install only needed components while maintaining full customization control through Tailwind CSS.

Integration patterns typically involve installing base UI components (button, icon, image) first, then progressively adding layout components (section, tile, header, footer) and specialized blocks. The content-first approach means components are designed to accept dynamic content from CMS systems, markdown files, or Astro's content collections. For theming, fulldev/ui follows shadcn/ui conventions using CSS variables, making it easy to customize colors and apply consistent design tokens across all components.