humanonlyweb/ui

Styling

Style the data-part hooks with your own CSS.

Markdown

Style the components with your own CSS. Every element has a data-part attribute and states are attributes too; each component page lists them.

[data-part="select-trigger"] {
  border: 1px solid var(--border);
  border-radius: 8px;

  &[data-select-open] {
    border-color: var(--accent);
  }
}

[data-part="select-option"][data-select-active] {
  background: var(--surface-3);
}
Copy code

Fields

On Input, Textarea, Select and Combobox, class, style and other attributes go to the control itself, not the field around it. To size the whole field, label included, wrap it:

<div class="w-80">
  <UiInput v-model="email" label="Email" />
</div>
Copy code

core.css

It's required, and only handles positioning and visibility. It sits in the humanonlyweb-ui cascade layer, so your unlayered CSS always wins over it. If you use layers, list it first:

@layer reset, humanonlyweb-ui, base, components;
Copy code

Motion

Overlays are native popovers, so animate them in with @starting-style:

[data-part="menu-list"] {
  opacity: 0;
  transition:
    opacity 120ms,
    display 120ms allow-discrete,
    overlay 120ms allow-discrete;

  &:popover-open {
    opacity: 1;
  }
}

@starting-style {
  [data-part="menu-list"]:popover-open {
    opacity: 0;
  }
}
Copy code
  • Accordion: transition grid-template-rows on accordion-panel.
  • Tabs, Segmented: transition the indicator under [data-tabs-animate] / [data-segmented-animate].
  • Toasts: ui-toast-enter-from, ui-toast-leave-to and ui-toast-move.