Fulldev UI

Github Docs
Join our discord for updates and chats 🤖

The Astro UI library to build entire websites

Make good looking websites, no matter your design skills

Build entire websites with just components

Fulldev UI is unique in that it introduces larger components to build entire pages, and even websites. Like a Section component that just works.

Integrates with any JS / CSS framework

Want to use Tailwind, or something else? You can overwrite all styles. Need an interactive framework component? Styles can be applied with one simple class.

Adaptive, responsive, customizable sizes

Everything is carefully designed to be fully responsive. Component adapt to their environment, like a Heading being different in a Section than in a Card. You can also customize via simple props.

Have a look at some examples

A section with equal columns

Well, at least when it fits. On mobile it's a single column, of course. Now the rest of this paragraph is just filler text. Have a look at the code, it's down below. Quick and straightforward.

placeholder
---
import {
Button,
Group,
Heading,
Image,
Paragraph,
Section,
Stack,
} from 'fulldev-ui'
---
<Section structure="split" align="center">
<Stack>
<Heading> A section with equal columns </Heading>
<Paragraph variant="muted">
Well, at least when it fits. On mobile it's a single column, of course.
Now the rest of this paragraph is just filler text. Have a look at the
code, it's down below. Quick and straightforward.
</Paragraph>
<Group>
<Button href="/overview/installation"> Installation </Button>
<Button variant="secondary" href="/structure/split"> Component </Button>
</Group>
</Stack>
<Image src="/placeholder.jpeg" />
</Section>

Do I grab your attention?

A large CTA, in a panel for increased hierarchy.

Let's get started!
---
import { Button, Heading, Paragraph, Section } from 'fulldev-ui'
---
<Section align="center" frame="panel" variant="raised" size="lg">
<Heading> Do I grab your attention? </Heading>
<Paragraph variant="muted">
A large CTA, in a panel for increased hierarchy.
</Paragraph>
<Button href="/segment/section"> Let's get started! </Button>
</Section>
---
import {
Button,
Card,
Deck,
Group,
Heading,
Image,
Paragraph,
Section,
Spread,
Stack,
} from 'fulldev-ui'
const cards = Array.from({ length: 18 })
---
<Section size="sm">
<Spread>
<Stack>
<Heading> Buy some components </Heading>
<Paragraph variant="muted">
It's fake though. Just some filler to display this carousel.
</Paragraph>
</Stack>
<Button href="/structure/carousel"> View component </Button>
</Spread>
<Deck structure="carousel" frame="fill">
{
cards.map((card) => (
<Card frame="none" href="/structure/carousel">
<Image src="/product-placeholder.jpeg" />
<Group>
<Heading>Component</Heading>
<Paragraph> - $20</Paragraph>
</Group>
</Card>
))
}
</Deck>
</Section>
Let Fulldev UI help you

Build content websites
in a fraction of time

Get Started Github