Components

Explore our collection of reusable components with usage examples and source code.

Generic Components

CTAButton#

Default ButtonSecondary ButtonCustom Style
<CTAButton href="#">Default Button</CTAButton>
<CTAButton href="#" variant="secondary">Secondary Button</CTAButton>
<CTAButton href="#" className="bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-600 dark:text-white">
  Custom Style
</CTAButton>

ThemeToggle#

<ThemeToggle />

FloatingNav#

The FloatingNav component appears when scrolling down the page. See it in action by scrolling this page.

<FloatingNav items={{
  'Section 1': [
    { id: 'item1', label: 'Item 1' },
    { id: 'item2', label: 'Item 2' }
  ],
  'Section 2': [
    { id: 'item3', label: 'Item 3' }
  ]
}} />

TableOfContents#

Table of Contents

<TableOfContents items={{
  'Example Section': [
    { id: 'example1', label: 'Example Item 1' },
    { id: 'example2', label: 'Example Item 2' }
  ]
}} />

ScrollIndicator#

The ScrollIndicator component shows reading progress at the top of the page. See it in action as you scroll this page.

<ScrollIndicator />

InfoBox#

The InfoBox component is used to display content in a styled container with consistent padding and background.

This is an example of content inside an InfoBox component.

It can contain multiple paragraphs and other elements.

<InfoBox>
  <p>This is an example of content inside an InfoBox component.</p>
  <p className="mt-4">It can contain multiple paragraphs and other elements.</p>
</InfoBox>

Project Components