Skip to main content

UI Components

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button Group Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button Group example

Primary button Secondary button Text button 

<Markdown>

## Button Group component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

### Button Group example

</Markdown>

import BtnGroup from "~/components/ui/buttons/Group.astro";

<BtnGroup
  btns={[
    {
      href: "#primary-btn",
      label: "Primary button",
      type: "primary",
      icon: "material-symbols:arrow-left-alt",
      iconReverse: true,
    },
    {
      href: "#secondary-btn",
      label: "Secondary button",
      type: "secondary",
    },
    {
      href: "#text-btn",
      label: "Text button",
      type: "text",
      icon: "material-symbols:menu-book-outline",
    },
    {
      href: "#icon-btn",
      type: "icon",
      icon: "material-symbols:menu-book-outline",
    },
  ]}
/>

btns object array props

  • href — string
    The URL or path the button links to.
  • label — string
    The visible text on the button.
  • type — "primary" | "secondary" | "text" | "icon"
    Determines which button style component is rendered.
  • icon — string
    (optional) Icon name including the Iconify set prefix if not local (e.g. material-symbols:sunny-outline).
  • iconReverse — boolean
    (optional) If true, places the icon after the label instead of before. Default is false.

Mini Profile Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mini Profile example

John Johnson's profile picture
John Johnson Software Engineer 
<Markdown>

## Mini Profile Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

### Mini Profile example

</Markdown>

import MiniProfile from "~/components/ui/MiniProfile.astro";
import ProfilePicture from "~/assets/jpg/hayden-walker-ihiEd-_4TNY-unsplash.jpg";

<MiniProfile
  name="John Johnson"
  description="Software Engineer"
  image={{
    src: ProfilePicture,
    alt: "John Johnson's profile picture",
  }}
/>

Mini Profile props

  • name — string
    The name of the person.
  • description — string
    A short description or title for the person.
  • image — object
    • src — ImageMetadata
      The imported image metadata (output from Astro’s image import).
    • alt — string
      (optional) Alt text for the image, defaults to empty string "".

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Share this page: 
<Markdown>

## Share Links Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

### Share Links example

</Markdown>

import ShareLinks from "~/components/ui/ShareLinks.astro";

<ShareLinks url="https://example.com" title="Example Page" description="Share this page:" />
  • url — string
    The URL to be shared.
  • title — string
    The title of the page to be shared.
  • description — string
    (optional) A short description to display above the share links.
  • display - array of strings
    (optional) An array of social platforms to display. Defaults are: ["email", "facebook", "linkedin", "whatsapp"].

Tag Cloud component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tag Cloud example

<Markdown>

## Tag Cloud Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

</Markdown>

import TagCloud from "~/components/collections/generic/TagCloud.astro";

<TagCloud class="max-w-72" contentCollection="posts" />

Tag Cloud props

  • contentCollection — string
    The content collection from which to pull tags (e.g. posts, profles).
  • class — string
    (optional) Additional classes to apply to the Tag Cloud container.

JS Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Native Share button

Opens the native share dialog on supported browsers. You can set the title and description. Use {frontmatter.title} and {frontmatter.description} to pull in the current page’s title and description if using MDX.


import NativeShare from "~/components/ui/buttons/NativeShare.astro";

<NativeShare title={frontmatter.title} description={frontmatter.description} label="Share" />

Click to Copy button

You can use the Click to Copy button to allow users to easily copy text (e.g. a URL) to their clipboard with a single click.

Leave the text prop blank to use the current page URL by default, or pass in any custom text you’d like to be copied. You can also set the button label and success label that appears after clicking. Leave them blank to use as an icon only.

import ClickToCopy from "~/components/ui/buttons/ClickToCopy.astro";

<ClickToCopy text="https://example.com" label="Copy URL" labelSuccess="URL copied to clipboard!" />