Components

Fulldev UI offers a collection of components that are styled with regular CSS, have cascading styles, and are easy to customize.

Usage

To use a component, you need to import it from the fulldev-ui package.

---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button text="Click me" />

---
import Hero from 'fulldev-ui/blocks/Hero.astro'
---

<Hero text="Props here" />

---
import Hero from 'fulldev-ui/blocks/Hero.astro'
import Layout from 'fulldev-ui/layouts/Layout.astro'
---

<Layout>
  <Hero />
</Layout>

Slots

Even though we recommend using props to pass content into components, you can also use slots to inject content into a component.

---
import Button from 'fulldev-ui/components/Button.astro'
---

{/* Slots example */}
<Button>Click me</Button>

{/* Props example */}
<Button text="Click me" />

Rendering

If no content passed to a component, it will NOT render anything. unless you pass an if prop.

---
import Button from 'fulldev-ui/components/Button.astro'
---

{/* This will not render anything */}
<Button />

{/* This will render a button */}
<Button if={true} />

Overriding Components

You can override components by creating a new component with the same name as one from the library in the src/components directory and adding your custom code. This also works for blocks and layouts.