Customization

Customize styles and components.

Overriding styles

While fulldev-ui outputs 100% vanilla CSS, it is also fully compatible with TailwindCSS and Shadcn/ui.

Using CSS variables

Default colors for backgrounds and text

--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;

Used for muted backgrounds and text

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

Used for <Card/> and other panels

--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;

Default border color

--border: 214.3 31.8% 91.4%;

Border color for inputs such as <Input />, <Select />, <Textarea />

--input: 214.3 31.8% 91.4%;

Primary colors for <Button/>

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

Secondary colors for <Button/>

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

Accent colors ghost and outline <Button/>

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

Used for focus ring

--ring: 215 20.2% 65.1%;

Border radius for cards, panels, input and buttons

--radius: 0.5rem;

Dark mode

Dark mode colors can be customized by adding them within the .dark class:

:root {
  /* Regular color go here */
}

.dark {
  /* Dark mode colors go here */
}

Using vanilla CSS

Components use simple CSS classes that match their names. For example:

• <Button/> uses the class .button
• <Button variant="secondary"/> adds .variant-secondary
• <Heading muted/> adds .muted

You can then simply override the styles in your own CSS file like this:

The plugin postcss-nesting is pre-installed so you can use the & operator to nest your styles.

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

<Button>Button</Button>
<Button variant="secondary">Secondary</Button>

<style is:global>
  .button {
    border-radius: 999px;

    &.variant-secondary {
      border: 1px solid hsl(var(--primary));
      background-color: transparent;
    }
  }
</style>

Using Tailwind classes

Tailwind is pre-installed. You don’t have to use it, but you can.

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

<Button class="rounded-full">Button</Button>
<Button variant="secondary" class="border border-primary bg-transparent">
  Secondary
</Button>

Using Tailwind @apply

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

<Button>Button</Button>
<Button variant="secondary"> Secondary </Button>

<style>
  .button {
    @apply rounded-full;

    &.variant-secondary {
      @apply border border-primary bg-transparent;
    }
  }
</style>

Overriding components

All components can be overridden by defining a new path in the integration:

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

export default defineConfig({
  integrations: [
    fulldev({
      override: {
        Button: 'src/components/Button.astro',
      },
    }),
  ],
})

Everywhere where the Button component is imported, the new component will be used instead.

This not only works for .astro files, but for all files in the entire library. Please check the repository to see what you can override.