Docs Components Structures Blocks
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

Hero

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit

placeholder landscape 
---
import Hero1 from 'fulldev-ui/blocks/Hero1.astro'
---

<Hero1
  badge={{ text: 'Lorem ipsum dolor' }}
  heading="Lorem ipsum dolor sit"
  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit"
  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
  image={{ src: '/images/placeholder-landscape.webp' }}
/>