Customization

Customize styles and components.

CSS Variables

While outputting 100% vanilla CSS, the underlying theming variables are based on - and therefore fully compatible with - the popular Shadcn/ui.

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 */
}

Overwriting styles

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

• <Button/> uses the class .button
• <Button variant="secondary"/> adds .variant-secondary
• <Card panel={true}/> or <Card panel /> adds .panel

Using vanilla CSS

Write your own CSS wihtin an Astro component, or anywhere else in your project.

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>
  .button {
    border-radius: 999px;

    &.variant-secondary {
      border: 1px solid rgba(0, 0, 0, 0.3);
    }
  }
</style>

Using Tailwind

Using Tailwind is completely optional, but since all styles match Tailwind’s utility values, they work seamlessly together.

Tailwind is pre-installed, so your can use either classes or the @apply directive out of the box.

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

<Button class="rounded-full">Button</Button>

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

Customizing components

Components can be copied from the repository and customized, without breaking imports.

The repositiory is setup like a regular Astro project, so it easy to find your way around, as long as you have basic knowledge of Astro.