UI ComponentsLink to section

This page showcases various UI components available in the site.

Decorative DividersLink to section

Dotted DividerLink to section

The DottedDivider component creates an elegant separation between content sections using dots with gradient opacity.

Default Spacing (Medium)Link to section

Small SpacingLink to section

Large SpacingLink to section

UsageLink to section

---
import DottedDivider from '@/components/DottedDivider.astro'
---

<!-- Default medium spacing -->
<DottedDivider />

<!-- Small spacing -->
<DottedDivider spacing="sm" />

<!-- Large spacing -->
<DottedDivider spacing="lg" />

<!-- With custom classes -->
<DottedDivider className="opacity-50" />

The component adapts to your theme colors automatically, using the --theme-primary CSS variable.