Using Blocks

Ready to use blocks and page building.

Banner
Colleagues
Content
Cta
Features
Footer
Header
Hero
Intro1
Logos
Content
Reviews
images
pages
presets
Using components
Avatar
Badge
Badges

A utility component for displaying multiple badges.

Button
Buttons

A utility component for displaying multiple buttons.

Channel
Channels

A utility component for displaying multiple channels.

Checkbox
Chip
Heading
Icon
Image

A wrapper around the Astro Image component with conditional rendering.

Input
Label
Link
Links

A utility component for displaying multiple links.

List
Logo
Menu
Paragraph
Rating
Select
Social
Socials

A utility component for displaying multiple socials.

Switch
Tagline
Textarea
Customization

Customize styles and components.

Integrating frameworks

Compatible with all JS and CSS frameworks.

Introduction

Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.

Installation
Doc

For documentation pages, just like this one.

Page

For marketing pages, just like the home page.

Generating Pages

Go a step further than just using components.

Using Structures

Build consistent blocks and layouts with structures.

Card

A box with a border, padding and rounded corners

Code

Enhanced code component with live preview.

Container

Sets a max-width, padding and centers the content

Drawer

A panel that slides out from the side of the screen

Group

Group buttons and similar components

Container

Sets a head, body and some base styles

Masonry

Places items like cards in a masonry layout

Matrix

Places items like cards in a grid

Panel

A box with a border, padding and rounded corners used for sections

Prose

Applies styling to child components

Section

Sets vertical padding and some base styles

Stack

Places items like cards in a horizontal or vertical stack

Writeup

Applies styling to child components, similar to Prose

Fulldev UI - Astro component and block library, open-source

Make websites rapidly with pre-built components and blocks.

Showcase

pages

pages

Used for generating pages and/or cards.

Features

  • Pages are automatically generated from .md and .mdx files in src/content/pages
  • References to other pages, and other collections
  • Setting a preset, which automatically gets merged with the current page
  • Type-safe frontmatter validation with helpful error messages

Frontmatter reference

Please reference src/collections/Pages.astro for now.

presets

Type: Filepath of an entry in src/content/presets

component

Type: Filename of a component in src/layouts

theme

Type: 'light' | 'dark' | 'system' | undefined

lang

Type: string | undefined

title

Type: string | undefined

description

Type: string | undefined

image

images

seo

Example

---
presets: [post]
component: PostLayout

seo:
  title: About us - Fulldev
  description: Learn more about Fulldev

title: About us

sections:
  - component: Hero
    tagline: We are a team of passionate developers
    heading: About us
    description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    buttons:
      - text: Get in touch
        href: /contact
---

# Write your markdown here!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Disabling page generation

If no content is passed

No page will be generated if no content is passed, meaning the page does not have body content or any of the following frontmatter keys:

  • component
  • section
  • sections

On a global level

You can disable all automatic page generation by setting the injectRoutes option in your astro.config.ts file.

// astro.config.ts
import { defineConfig } from 'astro/config'
import fulldev from 'fulldev-ui/integration'

export default defineConfig({
  integrations: [
    fulldev({
      injectRoutes: false,
    }),
  ],
})

On a per-page level

You can disable page generation per page by setting the inject key to false.

This makes sense for content you might only want to show as a card on another page, like reviews or the showcases on this website.

---
inject: false
---