Component Customization

Using utility classes

This section explains how to customize Hummingbird to better fit a project’s design needs. For example, consider customizing the button component:

<button class="btn">Base Button</button>

Option 1: Hummingbird utility

Hummingbird’s utility classes allow easy modification of a button’s appearance. For example, the color, variant, size, and other properties can be adjusted as needed.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-subtle-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-text-info">Info</button>

Option 2: Tailwind utility

Customization can be done using Tailwind utility classes. For example, rounded pill buttons can be created by adding the rounded-full class. All other Tailwind utility classes can be applied as well.

<button class="btn btn-primary rounded-full">Pill Button</button>
<button class="btn btn-subtle-secondary px-12 rounded-full hover:shadow-2xs">Pill Button</button>

Option 3: @apply directive

Customization can also be done within a CSS file using Tailwind CSS’s @apply directive.

@utility btn {
  @apply px-12 rounded-full hover:shadow-2xs;
}

Using CSS variables

Hummingbird components are styled using a set of CSS variables. These variables make it easy to customize styles either globally (across the entire project) or locally (for a specific component).

For example, to update or customize the Button component, override its CSS variables:

Option 1: Global variables

Override the theme variables globally under @theme. This will apply the changes across all components in the project.

@theme {
  --background-color-highlight: var(--color-gray-100);
  --text-color-default: var(--color-gray-900);
  --color-hover: var(--color-gray-200);
  --color-disabled: var(--color-gray-300);
  --color-disabled-color: var(--color-gray-500);
}

Option 2: Local variables

Override the component variables locally under specific component classes or in the custom CSS class. This will apply the changes only to that specific component.

.btn {
  --btn-bg: var(--background-color-highlight);
  --btn-color: var(--text-color-default);
  --btn-hover-bg: var(--color-hover);
  --btn-disabled-bg: var(--color-disabled);
  --btn-disabled-color: var(--color-disabled-color);
}