Page components

In addition to <Header/>, we have <Navigation/>, <Main/>, and <Footer/> components. These are designed to be used no more than once per page, ensuring your layouts stay clean and semantic. They're standardized extensions of the proper HTML elements you'd typically use. For maintaining grid and responsive visual consistency throughout your page, you can use the <Layout/> and <Module/> components multiple times as needed.

Panel

The <Panel/> component provides a contrasting background against the page's main background, creating areas that stand out or are separated from the main content. This background serves as the base aesthetic contrast for many components like <Header/>, <Footer/>, <Navigation/>, <Code/>, <Button/>, <Card/>, and <Menu/>. It's arguably one of the most important components in the library.

Button

Our <Button/> component is a straightforward extension of the standard HTML button element. It offers various "type" options like "default", "disabled", "error", "panel", and "transparent" to suit different use cases. You can also adjust the "padding" with options like "default", "large", and "compact" to fit your design needs.

Input

The <Input/> component extends the HTML input element but wraps it inside a label element. This approach eliminates the need to manage "for" and "id" attributes while maintaining accessibility. You can control its width using the "max width" attribute, allowing it to stretch to the container's maximum width if needed. If there's an issue, just fill the "error" attribute with your error message, and the input will automatically update its style to reflect the error state. The "placeholder" attribute works just as you'd expect, and adding "required" will display a little "*" next to the label text.

Textarea

The <Textarea/> component follows the same principles as <Input/> but extends the textarea HTML element. It inherits all the convenient features like automatic error styling and accessible labeling.

Select

The <Select/> component also mirrors <Input/> but extends the select HTML element. You can conveniently add possible values using the "options" attribute, which accepts an array of strings or option elements. This saves you from manually looping over option elements. Need a placeholder? It works just like in standard HTML—adding an "option value='' selected hidden" element to the top of the list.

Fieldset

Our <Fieldset/> component extends the fieldset HTML element for grouping related inputs. It includes a "legend" attribute where you can provide a string that adds a legend element for proper semantics. You can nest <Input/> components inside, especially those of type "checkbox" or "radio", all connected using the same "name" attribute to group them logically.

Text

The <Text/> component is as simple as it gets—extending the span element to handle text without imposing any specific semantic HTML elements like h1 or p. This gives you the flexibility to style your text as you see fit. It comes with a "type" attribute where you can choose from "display", "title", "heading", "subheading", "paragraph", or "small". The larger types ("display", "title", "heading") feature a contrasting, colorful tone and a serif typeface (defaults to LibreCaslonText). The smaller types ("subheading", "paragraph", "small") use more neutral colors like whitish or blackish and a sans-serif typeface (defaults to Figtree).

Link

The <Link/> component extends the anchor element but is designed specifically for textual links composed using the <Text/> component. It enforces underline and hover styles to ensure consistency. However, if you need more flexibility or functionality, you're absolutely free to use the standard HTML anchor tag. It's straightforward and sometimes that's all you need!

Kbd

Our <Kbd/> component extends the kbd HTML element, adding standard styles to represent keyboard input. It uses a monospace font (defaults to Fira Code) and defaults to the "small" text type, differentiating it from the <Code/> component.

Code

Similarly, the <Code/> component extends the code HTML element for displaying inline code snippets. It also uses a monospace font (defaults to Fira Code) but defaults to the "paragraph" text type, making it suitable for larger blocks of code.

Pattern

The <Pattern/> component is a unique take on using CSS gradients. Instead of typical gradient effects, it creates solid, repeating patterns that can add interesting edges to your elements. Inspired by designs found online, we've developed three patterns: "cloud", "zigzag", and "wave".

Linkmap

Our <Linkmap/> component makes it easy to generate a table of contents by using the "links" attribute. It leverages the <Link/> component we discussed earlier to create a navigable list.

Loader

The <Loader/> component is an animated loading icon to indicate that something is in progress. It uses the <IconLoader/> component and adds smooth animation to keep users informed while they wait.

Card

The <Card/> component helps you create image-related panels. By adding an image URL, you can display a stylized card that's perfect for showcasing posts, events, or any blocks of information. It comes with added styles like rounded edges and padding to make your content look neat and inviting.

Separator

Our <Separator/> component is a simple extension of the hr HTML element. It includes the library's styles for border color and margins to ensure it fits seamlessly with the rest of your design.

Markdown

The <Markdown/> component automatically interprets and renders markdown content, using styles consistent with the rest of the elements in the library. It employs semantic elements, so when you use "#" in your markdown, it appropriately turns into an "h1" element.

Menu

The <Menu/> component is made up of a clickable element and a floating submenu that contains additional options. It's designed as an island component, handling the interactions for opening and closing, as well as showing and hiding the floating submenu beneath the clickable element. It can be used with the <MenuItem/> component for a standarized list.

InterObs

The <InterObs/> component is a powerful island component that leverages the Intersection Observer API to monitor the visibility of its wrapped content within the viewport. When the observed element enters the viewport, it can trigger animations or execute callback functions, enhancing the interactivity and dynamism of your web pages.

Revealer

The <Revealer/> component is an interactive island designed to show or hide its content based on user interaction. It uses an actuator element, such as a button or link, to control the visibility of its children. By default, the content remains hidden until the actuator is activated, providing a clean and dynamic user experience. This component is perfect for creating expandable sections, modals, or tooltips within your layout. You can customize the actuator through the actuator prop and manage additional properties with the fwd attribute.