DOCSEARCHbyAlgolia
Submit Docs

Fulldev UI

repository·main·Indexed 20 days ago

https://github.com/fulldotdev/ui

An open-source collection of Astro UI components and blocks distributed as a shadcn-compatible registry. It provides customizable source files for building content-driven websites, featuring components such as Accordion, AlertDialog, Alert, Avatar, Badge, Banner, Breadcrumb, Button, Card, and Carousel.

Tokens
127.6K
Snippets
386
Records
498
Agent score
68%

What's inside fulldev-ui

  1. Overview of Fulldev UI Components and Blocks

    main

    Fulldev UI provides open-source UI components and prebuilt blocks specifically designed for building content-driven websites with Astro.

    Key characteristics:

    • Shadcn-style components: Uses familiar composition patterns and installs as source files via a Shadcn-compatible registry.
    • Astro-first blocks: Ready-made sections (Heroes, Features, FAQs, etc.) that can be used directly or as reference material for AI agents to generate custom layouts.
    • Hybrid approach: Works alongside shadcn/ui for interactive React components while providing Astro-native components for performance-critical content pages.

  2. Overview of Fulldev UI

    main
    Fulldev UI provides open-source Astro components and blocks designed for building content-driven websites. It is distributed as a shadcn-compatible registry, allowing you to install components and blocks directly as source files. This approach enables developers and AI agents to customize, extend, and compose the UI elements within their own Astro projects.

  3. What is Fulldev UI?

    main
    Fulldev UI is a collection of open-source Astro UI components and blocks designed for building content-driven Astro websites. It is built using the Shadcn registry format, meaning components and blocks are installed directly into your project as plain Astro and Tailwind CSS source files. This allows for direct reading, editing, and composition by both developers and AI agents.

  4. Use Banner blocks for announcements and promos

    main
    The Banner block is used to create announcement or promotional bars that can be positioned either above or inside page content. The library provides different variations of the Banner component, such as Banner 1 and Banner 2, which can be imported and used as standalone blocks in your layout.

  5. Use Contact blocks for project inquiries and support

    main
    The Contact block category provides pre-built UI sections designed for project inquiries, support, and sales conversations. You can choose from different layout variations (Contact 1, Contact 2, or Contact 3) depending on your design requirements. These blocks are intended to be dropped into your layouts to facilitate user communication.

  6. Explore Feature section layouts

    main
    The features block category provides various layout options designed for product narratives, launch pages, and capability overviews. You can choose from six distinct feature section styles (Features 1 through Features 6) to match your UI requirements. Each layout is available as a standalone component/example within the library.

  7. How Header, HeaderContainer, and HeaderGroup work together

    main

    The Header system uses a hierarchical structure to manage responsive site layouts:

    • Header: The top-level layout controller. It supports a variant prop. The default variant is full-width, while the floating variant renders as a constrained, rounded card.
    • HeaderContainer: An optional middle slot used to create a flex region between left and right content groups.
    • HeaderGroup: An unopinionated flex row used to group related items (like a logo group or a navigation group). Since it is unopinionated, you should use utility classes (e.g., ml-auto, justify-end) on the HeaderGroup to control alignment.

    Mobile Menus: The Header does not include a built-in mobile menu. To implement one, place Sheet and SheetTrigger components from @/components/ui/sheet directly inside a HeaderGroup.

    <Header variant="floating">
  <HeaderContainer>
    <HeaderGroup>
      <Logo href="/">
        <LogoText>Fulldev UI</LogoText>
      </Logo>
    </HeaderGroup>

    <HeaderGroup class="ml-auto justify-end">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderGroup>
  </HeaderContainer>
</Header>

  8. How the Sidebar components compose

    main

    The Sidebar is a highly composable system. The SidebarProvider acts as the root, managing the collapse state and persisting it via the sidebar_state cookie. The Sidebar component renders the shell (desktop or mobile drawer), while SidebarInset is used to wrap the main content area, especially when using the inset variant.

    Common layout structure:

    SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   ├── SidebarGroup
│   │   │   ├── SidebarGroupLabel
│   │   │   ├── SidebarGroupAction
│   │   │   ├── SidebarGroupContent
│   │   │   └── SidebarMenu
│   │   │       ├── SidebarMenuItem
│   │   │       │   ├── SidebarMenuButton
│   │   │       │   ├── SidebarMenuAction
│   │   │       │   └── SidebarMenuBadge
│   │   │       └── SidebarMenuItem
│   │   │           ├── SidebarMenuButton
│   │   │           └── SidebarMenuSub
│   │   │               ├── SidebarMenuSubItem
│   │   │               └── SidebarMenuSubItem
│   │   └── SidebarGroup
│   │       └── SidebarMenu
│   │           ├── SidebarMenuItem
│   │           └── SidebarMenuItem
│   ├── SidebarFooter
│   └── SidebarRail
└── SidebarInset
    └── SidebarTrigger
    <SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Label</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton href="/">Home</SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    <main>Content</main>
  </SidebarInset>
</SidebarProvider>

  9. How Popover composition works

    main

    A Popover is built using a specific hierarchy of components. The Popover acts as the root provider, PopoverTrigger is the element that opens the layer, and PopoverContent contains the floating UI. Inside the content, you typically use PopoverHeader, PopoverTitle, and PopoverDescription for structured information.

    Popover
├── PopoverTrigger
└── PopoverContent
    └── PopoverHeader
        ├── PopoverTitle
        └── PopoverDescription

  10. Configure Banner variants and storage

    main

    The Banner component supports different visual styles via the variant prop:

    • variant="default": Renders a full-width announcement.
    • variant="floating": Renders an inset announcement bar.

    When using certain variants (like floating), you can provide a storageKey to persist the banner's state (e.g., if it has been dismissed).

    <Banner variant="floating" storageKey="docs-floating-banner">
  <BannerContainer>
    <p class="text-sm font-medium">Launch</p>
    <p class="text-sm opacity-90">New component docs are ready.</p>
  </BannerContainer>
</Banner>

  11. How Tooltip composition works

    main

    A Tooltip must follow a specific component hierarchy to function correctly:

    • Tooltip: The root container that manages the state.
    • TooltipTrigger: The interactive element (e.g., a button or link) that the user hovers over or focuses to reveal the tooltip.
    • TooltipContent: The container that holds the information being displayed.

  12. How Dropdown Menu composition works

    main

    The DropdownMenu is built using a composition pattern. You wrap the menu in a DropdownMenu root, use a DropdownMenuTrigger to open it, and DropdownMenuContent to house the items. Items can be grouped using DropdownMenuGroup, separated by DropdownMenuSeparator, and labeled with DropdownMenuLabel.

    Commonly used sub-components include:

    • DropdownMenuItem: A standard clickable item.
    • DropdownMenuCheckboxItem: An item for toggling boolean states.
    • DropdownMenuRadioItem: An item for selecting one option from a group.
    • DropdownMenuShortcut: A component to display keyboard shortcuts next to an item.
    DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    └── DropdownMenuGroup
        ├── DropdownMenuCheckboxItem
        ├── DropdownMenuRadioItem
        └── DropdownMenuItem
            └── DropdownMenuShortcut