Components

Reusable UI elements shared across multiple views.

Purpose

The components/ directory contains styles for UI elements that appear on more than one page. A button, a navbar, a form input, a modal — these all belong here.

If a style only applies to a single page, it belongs in views/, not here.

What belongs here

Buttons and links
Navigation bars and menus
Forms, inputs, selects
Cards and panels
Modals and overlays
Badges, tags and labels

One file per component. Keep each file focused — _button.sass should only contain button styles.

Example

 components/_button.sass 
 @use '../utilities' as *

.btn
  display: inline-flex
  align-items: center
  padding: 0.6rem 1.25rem
  border-radius: 8px
  font-weight: 600
  cursor: pointer
  transition: opacity 0.15s ease

.btn-primary
  background: $color-text
  color: $color-bg

  &:hover
    opacity: 0.9

.btn-secondary
  border: 1px solid currentColor
  color: $color-text

  &:hover
    opacity: 0.7 