blocKit Component Documentation

• Styles

• Root Color Scheme:

  Light Mode

  --background: #ebebeb;
--foreground: #000000;
--accent: #470FF4;
--hyperlink: #26C485;

  Dark Mode

  --background: #000000;
--foreground: #ebebeb;
--accent: #470FF4;
--hyperlink: #26C485;

  Fonts

  { Anton, Goldman, Iceland } from "next/font/google";

• Container Element Styling:

  html, body

  max-width: 100vw;
scroll-behavior: smooth;

  body

  color: var(--foreground);
background: var(--background);
font-family: var(--font-anton), var(--font-goldman), var(--font-iceland);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; font-weight: 400;

  all (*)

  box-sizing: border-box;
padding: 0;
margin: 0;

• Components

• MainTitle

  Serves as primary heading/title text. Extends the <h1> class.

  Example Usage: 
  
   <MainTitle 
      titleText={"Trending News - Today"} 
      id={"defaultTitle"} 
   /> 
  
  (.tsx)

  Default Style Attributes : 
  
   h1.mainTitle { 
    font-family: var(--font-anton); 
    font-weight: 400; 
    font-size: 64px; 
    letter-spacing: 1px; 
    -webkit-text-stroke-color: var(--background); 
    -webkit-text-stroke-width: 1px; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  titleText

  titleText={"Example Title"}

  string

  required

  ...

  

• Subtitle

  Provides a secondary heading/title text. Extends the <h3> class.

  Example Usage: 
  
   <Subtitle 
      subtitleText={"Log In"} 
      id={"defaultSubtitle"} 
   /> 
  
  (.tsx)

  Default Style Attributes : 
  
   h3.subTitle { 
    font-family: var(--font-goldman); 
    font-size: 56px; 
    font-weight: 400; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  subText

  subText={"Example subtitle"}

  string

  required

  ...

  

• Description

  Serves as paragraph/description text. Extends the <p> class.

  Example Usage: 
  
   <Description 
      text={"These animals are unable to swim. Because of this, 
            they tend to stay near the shoreline when feeding"} 
      id={"defaultDescription"} 
   /> 
  
  (.tsx)

  Default Style Attributes : 
  
   p.description { 
    font-family: var(--font-iceland); 
    font-size: 42px; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  text

  text={"Example description text..."}

  string

  required

  ...

  

• Hyperlink

  Provides a wrapper for any children and/or text recieved via the 'text' prop. Extends the <a> class.

  Example Usage: 
  
   <Hyperlink text="Github" href="#"> 
      <Image src="/icon_github.svg" /> 
      id={"github logo"} 
   /> 
  
  (.tsx)

  Default Style Attributes : 
  
   div.hyperlink a {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: fit-content; 
    height: fit-content; 
    } a.hyperlinkText { 
      font-family: var(--font-iceland); 
      color: var(--hyperlink); 
      width: fit-content; 
      text-decoration: none; 
      cursor: pointer; 
    } a.hyperlink:hover { 
      filter: opacity(.8); 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  ...

  

• Icon

  A custom Image component for seamless hyperlink wrapping. Uses the <Image /> class from 'next/image'. If an href prop is provided, the Image is wrapped in an <a> tag, linking the Image to the address.

  Example Usage: 
  
    <Icon 
      src={'/icon_light.svg'} 
      href={"www.xyz.com"} 
      width={50} 
      iconType={"invertable"} 
      id={"defaultIcon"} 
    /> 
  
  (.tsx)

  Default Style Attributes : 
  
   @media (prefers-color-scheme: light) { 
    #invertable { 
      filter:invert(1) 
    } 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  src

  src={"./icon_social.svg"}

  string

  required

  href

  href={"www.xyz.com"}

  string

  required

  ...

  

• MainButton

  A button component wrapped in an <a> tag. For the buttons display text, it can be passed text, an image source, or both.

  Example Usage: 
  
    <MainButton 
      buttonText={"Send"}          /* Optional IFF an 'icon' is provided */ 
      icon={'/icon_envelope.svg'}  /* Optional IFF a 'buttonText' is provided */ 
      iconWidth={50} 
      id={"defaultButton"} 
    /> 
  
  (.tsx)

  Default Style Attributes : 
  
   button.mainButton{ 
    padding: 10px; 
    border-radius: 5px; 
    border: 1px solid var(--background); 
    box-shadow: 1px 0px 1px 0px #000000; 
    background-color: var(--accent); 
   } button.mainButton:hover { 
      opacity: .8; 
      cursor: pointer; 
      transition: all .1s; 
   } .mainButton p{ 
      color: #ebebeb; 
  } 
  
  (.css)

  Props:

  Name

  Type

  Status

  buttonText

  buttonText={"Submit"}

  string

  required

  icon

  icon={"./icon_star.svg"}

  string

  required

  ...

  

• Navbar

  A navbar component with a standardized layout and minimal customizability. 2 icon buttons, 2 text buttons, and a title. They will be displayed in order (Left -> Right), the second element of each prop will be the corresponding button's href destination.

  Example Usage : 
  
   <Navbar 
    leftIcon={["./smile.svg", "#about"]} 
    leftText={["Shop", "/shop"]} 
    navbarTitle={["Home", "#"]} 
    rightText={["Contact", "#"]} 
    rightIcon={["./phone.svg", "#contact"]} 
    id={"defaultNavbar"}  
   /> 
  
  (.tsx) 
  

  Default Style Attributes : 
  
   div.navbar { 
    background-color: transparent; 
    backdrop-filter: invert(.1); 
    position: sticky; 
    width: 100%; 
    top: 0; 
    padding: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    border-radius: 0px 0px 5px 5px; 
   } .navbarSection { 
      display: flex; 
      align-items: center; 
      gap: 5px 
   } .navbarSection a { 
      color: #ebebeb; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  navbarTitle

  navbarTitle={["Home", "#home"]}

  Array<string>[2]

  required

  ...

  

• Card

  A minimal component that combines a title, and description section. Can be passed title text or a description text individually, however, it is designed for both.

  Example Usage : 
  
   <Card  
      header={"Pointer"}                      /* Optional IFF a 'body' is provided */ 
      body={"References a memory address"}    /* Optional IFF a 'header' is provided */ 
      id={"defaultCard"}    
    /> 
  
  (.tsx) 
  

  Default Style Attributes : 
  
   div.card { 
    border: 1px solid var(--foreground); 
    width: fit-content; 
    max-width: 850px; 
    padding: 5px 15px; 
    border-radius: 10px; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  header

  header={"Card Title"}

  string

  required

  body

  body={"Card body text"}

  string

  required

  ...

  

• CardDeck

  A dynamic component that combines an undefined number of cards into a vertical stack or 'deck'. Allows for a title to be provided and displayed as a MainTitle component above the card stack.

  Example Usage : 
  
   <CardDeck  
      deckTitle={"Dough Recipie"} 
      cardData={[ 
        ["Flour", 
         "8oz - Packed" 
        ], 
        ["Salt", 
         "2tbsp" 
        ], 
        ["Purified Water", 
         "4oz" 
        ], 
       ]} 
      id={"defaultDeck"}  
   /> 
  
  (.tsx) 
  

  Default Style Attributes : 
  
   div.cardDeck { 
    border: 1px solid var(--foreground); 
    border-radius: 10px; 
    width: fit-content; 
    padding: 15px; 
    padding-top: 0px; 
   } .cardDeck .card { 
      width: 650px; 
      border: none; 
   } .cardDeck h1 { 
      text-align: center; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  cardData

  cardData={[
       ["Ingredients -",       //Card 1 Header
         "1 Tomato, 1 Bread"], //Card 1 Description
       ["Tools Needed -", 
         "Fork, Knife"] 
   ]}

  Array<<string>[2]>

  required

  ...

  

• ContactForm

  Serves as a standard contact form component for an emailJS message. Credentials must be updated via the environment. Accepts an array of fields, [fieldTitle, fieldType, fieldName]

  Example Usage : 
  
   <ContactForm   
      fields={[ 
        ["Name", "text", "name"], 
        ["Email", "email", "email"], 
        ["Message", "textarea", "message"], 
      ]} 
      buttonText={"Send"} 
      id={"defaultForm"}  
   /> 
  
  (.tsx) 
  

  Default Style Attributes : 
  
   div.contactForm { 
    display: flex; 
    flex-direction: column; 
    padding: 0px 20px; 
    width: 500px; 
    border: 1px solid var(--foreground); 
    border-radius: 10px; 
   } .contactForm label { 
      padding: 10px; 
   } .contactForm input { 
      min-height: 40px; 
      min-width: 75%; 
      width: fit-content; 
      max-width: 100%; 
      padding: 10px; 
   } .contactForm textarea { 
      resize: none; 
      min-height: 150px; 
      width: 100%; 
      padding: 10px; 
   } .contactForm .submitButton { 
     margin: 20px 0px; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  fields

  fields={[
       ["-Name-",    //Field 1 Text
         "text",     //Field 1 Type
         "field1"],  //Field 1 Name
       ["-Email-", 
         "email",  
         "field2"] 
   ]}

  Array<<string>[3]>

  required

  ...

  

• IconBelt

  A custom belt style icon container that can be passed an array of tuples. These tuples will describe the icons within the belt itself, with the first element of each tuple designating the icon's image address, and the second element designating the icon's hyperlink wrapper

  Example Usage : 
  
   <IconBelt    
      icons={[   
        "./home_icon.svg", 
        "./contact_icon.svg", 
      ]} 
      hyperlinks={[ 
            "#", 
            "#", 
      ]} 
      id={"defaultBelt"}  
   /> 
  
  (.tsx) 
  

  Default Style Attributes : 
  
   div.iconBelt { 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-evenly; 
    align-items: center; 
   } 
  
  (.css)

  Props:

  Name

  Type

  Status

  icons

  icons={[
       "./x_icon.svg",     //src [0]
       "./info_icon.svg"   //src [1]
   ]}

  Array<string>

  required

  ...

  

• Footer

  Minimal footer component with 3 content sections. The 'icon section', the 'hyperlink section', and the 'description section'. The visual display of these sections rely on the root styling of the subcomponents.

  Example Usage : 
  
   <Footer   
      iconData= {[ 
        ["./icon_x.svg", "https://x.com/user"], 
        ["./icon_insta.svg", "https://instagram.com/user"], 
        ["./icon_github.svg", "https://github.com/user"], 
        ["./icon_linkedin.svg", "https://linkedin.com/user"] 
      ]} 
      hyperlinkData={[ 
            ["Legal", "/legal.html"], 
            ["Contact", "#contact"], 
            ["More", "#"] 
      ]} 
      descriptions={[ 
            "Copyright Kyle Kirchgessner", 
            "All rights reserved, 2025" 
      ]} 
      id={"defaultFooter"}  
   /> 
  
  (.tsx) 
  

  Default Style Attributes : 
  
   div.footer { 
    border-top: 1px solid var(--foreground); 
    width: 100%; 
    padding: 25px 10px; 
    display: flex; 
    flex-direction: column; 
   } .footer .iconBelt { 
       margin: 25px 0px; 
       padding: 25px 0px; 
   } .footer .footerText { 
       width: 100%; 
       display: flex; 
       flex-direction: row; 
       justify-content: center; 
       align-items: center; 
       gap: 15%; 
    } .footerText #left { 
        width: fit-content; 
     } .footerText #right { 
        width: fit-content; 
     } 
  
  (.css)

  Props:

  Name

  Type

  Status

  descriptions

  descriptions={[
        "Copyright KK - 2025",
        "All rights reserved"
   ]}

  Array<string>

  required

  ...

  

• Carousel

  A standard carousel component that allows for alternation between images, each image can be provided a description and a hyperlink. The 'numModals' prop must exactly reflect the size of the modalData prop.

  Example Usage : 
  
   <Carousel    
      numModals={3} 
      modalData={[ 
        ["Project 1", "Project 1 Description", "/icon_light.svg", "#proj1"], 
        ["Project 2", "Project 2 Description", "/icon_proj1.svg", "#proj2"], 
        ["Project 3", "Project 3 Description", "/icon_dark.svg", "#proj3"] 
      ]} 
      id={"defaultCarousel"} 
   /> 
  
  (.tsx) 
  

  Default Style Attributes : 
  
   div.modalContainer { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    width: 100%; 
   } .modalContainer .modalFocus { 
       text-align: center; 
       align-self: center; 
       align-items: center; 
   } .carouselButton { 
       width: 100%; 
       display: flex; 
       justify-content: space-evenly; 
       margin-top: 20px; 
     } 
  
  (.css)

  Props:

  Name

  Type

  Status

  numModals

  numModals={4}

  number

  required

  modalData

  modalData={[
       ["-Project 1-",             /*Modal 1 Title*/
         "My first project",       /*Modal 1 Description*/
         "./preview_img.png",      /*Modal 1 Img Address*/
         "https://project.com"],   /*Modal 1 Hyperlink*/
       ["-Project 1-",
         "My first project",
         "./preview_img.png",
         "https://project.com"],
   ]}

  Array<<string[4]>>

  required

  ...