👋 Hi, Universe!

` block for preformatted text. Note that KelpUI does not provide syntax highlighting. ```html Inline code: .js-example. /* Preformatted Text */ .js-example { color: #272727; background: #ffffff; } ``` -------------------------------- ### Kelp UI Proportional Scaling Example (HTML) Source: https://kelpui.com/docs/getting-started/typography Demonstrates how to apply size scaling to a parent element, affecting all child elements proportionally using 'em' units. Avoids repeated class application on child elements. Compounding 'em' units can lead to unintended larger sizes if not managed carefully. ```html Hello world! How are you today? ``` -------------------------------- ### Kelp UI Compounding Size Example (HTML) Source: https://kelpui.com/docs/getting-started/typography Shows how nested size classes in Kelp UI, using 'em' units, can lead to elements becoming larger than intended due to compounded scaling. This highlights a potential pitfall when applying multiple size modifiers. ```html Hello world! ``` -------------------------------- ### Kelp UI Dropdown Component Example Source: https://kelpui.com/docs/components/dropdown Demonstrates the implementation of a dropdown menu using the `` web component. This component hides content until a toggling element is activated, offering various interactive options within the dropdown. ```html Now you see me... Now you don't! With a link ``` -------------------------------- ### Input with Placeholder Attribute HTML Source: https://kelpui.com/docs/components/text-input Shows how to use the 'placeholder' attribute on an '' element to provide example or guidance text. It's important to note that placeholder text should not replace a ''. ```html What's the best Pixar movie? ``` -------------------------------- ### Web Component Options & Settings Source: https://kelpui.com/docs/customizing/web-components Kelp UI web components can be customized using HTML attributes. This example shows how to configure the `` component. ```APIDOC ## Web Component Options & Settings Every Web Component in Kelp exposes a set of options you can set using HTML attributes. For example, the `` component lets you specify the heading level, a label for the list, a parent container to target, and any custom CSS to add to the generated list. ### Request Example ```html ``` This is the same as passing an object of options into a class in a traditional JavaScript component. ``` -------------------------------- ### Using Event Keys for Component Communication (HTML) Source: https://kelpui.com/docs/customizing/web-components This example demonstrates how to use `event-keys` on a `` component to filter events received by a `` component. This allows for targeted communication between specific component instances. ```html ``` -------------------------------- ### CSS Media Query Example for Dark Mode Source: https://kelpui.com/docs/getting-started/dark-mode This is an example of how CSS media queries, specifically `prefers-color-scheme: dark`, can be used to detect OS dark mode settings and update CSS variables accordingly. KelpUI explains why it doesn't rely solely on this method. ```css @media (prefers-color-scheme: dark) { /* Update CSS variables */ } ``` -------------------------------- ### HTML Link Example - Kelp UI Source: https://kelpui.com/docs/components/links Demonstrates the default hyperlink styling in Kelp UI, which features a dotted underline that becomes solid on hover. This styling can be customized via CSS variables in the `kelp.theme` cascade layer. ```html Learn more at Go Make Things. ``` -------------------------------- ### Accessing Component Properties (JavaScript) Source: https://kelpui.com/docs/customizing/web-components This example illustrates how to query a KelpUI component, like ``, and access its public properties, such as `.isVisible`, to determine its current state and conditionally execute logic. ```javascript const pw = document.querySelector('kelp-toggle-pw'); if (pw.isVisible) { console.log('The password is visible!'); } else { console.log('You cannot see it...'); } ``` -------------------------------- ### Responsive Scaling with `em` Units - HTML Source: https://kelpui.com/docs/customizing/typography Demonstrates how to use `em` units for scaling UI elements proportionally to font size changes. This example shows a more concise way to apply size adjustments to a group of elements within a container using a single class, compared to applying the size class to each element individually. It highlights the compounding nature of `em` units when nesting size classes. ```html Hello world! How are you today? ``` ```html Hello world! ``` -------------------------------- ### Customizing Skeleton Component with CSS Variables (HTML) Source: https://kelpui.com/docs/components/skeleton This example shows how to customize the appearance of the skeleton component using CSS variables for height, width, and border-radius. These variables allow for fine-grained control over the placeholder's dimensions and shape, enabling more realistic skeleton layouts. ```html ``` -------------------------------- ### Configure Manual Tab Activation Mode in Kelp UI Source: https://kelpui.com/docs/components/tabs This example shows how to set up Kelp UI tabs in manual mode using the `[manual]` attribute. In this mode, tab focus shifts with arrow keys, but content is only displayed upon explicit user activation (click, enter, or spacebar). This is particularly useful for scenarios involving asynchronous content loading via APIs, though the default behavior is generally preferred for accessibility. ```html Wizard Sorcerer Druid ... ... ... ``` -------------------------------- ### Handle Kelp UI Tabs Events with JavaScript Source: https://kelpui.com/docs/components/tabs This JavaScript code demonstrates how to listen for and respond to events emitted by the `` component. It includes examples for `kelp-tabs:ready` (component instantiation), `kelp-tabs:select-before` (before a tab is selected, with the option to cancel), and `kelp-tabs:select` (after a tab has been successfully selected). The `event.detail` object provides information about the current and next tabs/panes. ```javascript document.addEventListener('kelp-tabs:ready', (event) => { console.log('ready:', event.target); }); document.addEventListener('kelp-tabs:select-before', (event) => { console.log('A tab is about to selected in:', event.target); console.log('The currently selected tab is:', event.detail.currentTab); console.log('The currently selected content pane is:', event.detail.currentPane); console.log('The tab that will be selected is:', event.detail.nextTab); console.log('The content pane that will be selected is:', event.detail.nextPane); // Stop this change from happening // The currentTab and currentPane will remain selected event.preventDefault(); }); document.addEventListener('kelp-tabs:select', (event) => { console.log('A tab was selected in:', event.target); console.log('The currently selected tab is:', event.detail.tab); console.log('The currently selected content pane is:', event.detail.pane); }); ``` -------------------------------- ### Listening to KelpUI Disclosure Events Source: https://kelpui.com/docs/components/disclosure Provides JavaScript examples for listening to various events emitted by the `` component, including `ready`, `show-before`, `show`, `hide-before`, and `hide`. It shows how to access event targets and prevent default actions. ```javascript document.addEventListener('kelp-disclosure:ready', (event) => { console.log('ready:', event.target); }); document.addEventListener('kelp-disclosure:show-before', (event) => { console.log('A disclosure is about to show content:', event.target); // Stop this from happening event.preventDefault(); }); document.addEventListener('kelp-disclosure:show', (event) => { console.log('Content was shown:', event.target); }); document.addEventListener('kelp-disclosure:hide-before', (event) => { console.log('A disclosure is about to hide content:', event.target); // Stop this from happening event.preventDefault(); }); document.addEventListener('kelp-disclosure:hide', (event) => { console.log('Content was hidden:', event.target); }); ``` -------------------------------- ### Autogrow Textarea with Starting Value - HTML Source: https://kelpui.com/docs/components/textarea Demonstrates how the `` component handles textareas that are initialized with content exceeding the default height. The component expands the textarea on load to accommodate the initial text. ```html Best Wizards merlin radagast gandalf ursula morgan rand moraine nynaeve ``` -------------------------------- ### Kelp UI Theme Customization for Links Source: https://kelpui.com/docs/components/links Shows how to customize link colors and decorations using CSS variables within the `kelp.theme` cascade layer. This example includes settings for both light and dark themes, allowing for easy theming adjustments. ```css @layer kelp.theme { /* Default Light Theme */ :where(:root), .kelp-theme-light { --color-text-link: var(--color-blue-50); --color-text-link-hover: var(--color-blue-40); --decoration-text-link: underline dotted; --decoration-text-link-hover: underline; } /* Dark Theme */ .kelp-theme-dark { --color-text-link: var(--color-blue-70); --color-text-link-hover: var(--color-blue-80); } } ``` -------------------------------- ### Autogrow Textarea Event Listener - JavaScript Source: https://kelpui.com/docs/components/textarea Provides an example of how to listen for the `kelp-autogrow:ready` event, which is fired by the `` web component once it has been initialized and is ready to function. This event can be used to perform actions after the component is set up. ```javascript document.addEventListener('kelp-autogrow:ready', (event) => { console.log('ready:', event.target); }); ``` -------------------------------- ### Kelp UI Grid System: Mobile-First Breakpoints Source: https://kelpui.com/docs/layout/grid Illustrates how to implement mobile-first grid layouts in Kelp UI using breakpoint-specific classes. These classes, such as `.grid-s`, `.grid-m`, `.grid-l`, and `.grid-xl`, allow the grid to adapt to different screen sizes, starting with a single column on smaller viewports and expanding into a multi-column layout at larger ones. ```html Column 1 Column 2 Column 1 Column 2 Column 1 Column 2 Column 1 Column 2 ``` -------------------------------- ### Stack Layout with Alignment Utilities Source: https://kelpui.com/docs/layout/stack Illustrates how to control the alignment of items within a `.stack` layout using the `.align-*` utility classes. By default, items stretch to fill the column, but this can be modified to align at the start, center, or end. ```html ``` -------------------------------- ### Implement Component Colors with Semantic Variables Source: https://kelpui.com/docs/customizing/css-variables Demonstrates how Kelp components utilize semantic CSS variables for colors. The example shows the `.callout` component setting its background, text, and border colors using `--background-color`, `--color`, and `--border-color`, which are themselves defined by other semantic variables like `--color-fill-muted`. ```css .callout { --background-color: var(--color-fill-muted); --color: var(--color-on-muted); --border-color: var(--color-border-muted); background-color: var(--background-color); border: 1px solid var(--border-color); color: var(--color); } ``` -------------------------------- ### Listen for Kelp Tab Select Custom Event with JavaScript Source: https://kelpui.com/docs/customizing/web-components Shows how to attach an event listener to the `kelp-tabs:select` custom event. This example illustrates fetching and injecting content into a tab pane using AJAX the first time it's selected, preventing redundant loads. ```javascript document.addEventListener('kelp-tabs:select', async (event) => { if (event.detail.pane.hasAttribute('is-loaded')) return; const request = await fetch('/path/to/content'); const response = await request.text(); event.detail.pane.innerHTML = response; event.detail.pane.setAttribute('is-loaded'); }); ``` -------------------------------- ### HTML Definition List Example for KelpUI Source: https://kelpui.com/docs/components/lists This snippet illustrates the standard HTML structure for a definition list (dl). It includes term (dt) and definition (dd) elements, commonly used for glossaries or metadata. No specific KelpUI components are required for this basic HTML structure. ```html Definition List Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). Here's another term And here's the definition that would go with it. ``` -------------------------------- ### Importing Specific CSS Modules in Kelp UI Source: https://kelpui.com/docs/customizing/install This snippet demonstrates how to selectively import CSS files within the `/modules` directory of Kelp UI. It shows how to comment out unwanted module imports (e.g., badges, avatar, skeleton) and include desired ones (e.g., callouts). This method is suitable for buildless setups but may impact compression efficiency. ```css /* Components... but only load callouts */ /*@import "./components/badges.css";*/ @import "./components/callouts.css"; /*@import "./components/avatar.css";*/ /*@import "./components/skeleton.css";*/ ``` -------------------------------- ### KelpUI: Using kelp-toc Methods (JavaScript) Source: https://kelpui.com/docs/components/toc Demonstrates how to access and use the `.render()` and `.init()` methods on a web component instance. These methods are useful for dynamic updates or manual initialization. ```javascript const toc = document.querySelector('kelp-toc'); // Render a fresh table of contents toc.render(); // Manually initialize the component toc.init(); ``` -------------------------------- ### Adjusting Grid Gaps Source: https://kelpui.com/docs/layout/grid Modify the spacing between grid items using the `.gap-*` utility classes. Examples include `.gap-4xs` for smaller gaps and `.gap-6xl` for larger gaps. ```html ``` -------------------------------- ### HTML: Implicitly Associated Label for Checkbox (Not Recommended) Source: https://kelpui.com/docs/forms/label Shows an example of an implicitly associated label where the label wraps the input element without a `for` attribute. This pattern can cause accessibility issues. ```html I love Pixar movies ``` -------------------------------- ### Redirect on Form Success (HTML) Source: https://kelpui.com/docs/components/form-ajax Implement automatic redirection after a successful form submission by using the `[redirect-on-success]` attribute with the target URL. This is useful for guiding users to specific pages post-submission. ```html ``` -------------------------------- ### Dismiss Dialog with `[command]` Attribute Source: https://kelpui.com/docs/components/dialog This example demonstrates dismissing a dialog using the `[command='close']` attribute on a button, linked to the dialog via `[commandfor]`. This provides a declarative way to close dialogs. ```html See you real soon! ``` -------------------------------- ### Basic KelpUI Tabs Implementation Source: https://kelpui.com/docs/components/tabs Demonstrates the fundamental usage of the `` web component by wrapping anchor links and their associated content. It shows how to apply custom classes for styling and ensures ARIA attributes and keyboard navigation are handled automatically. ```html Wizard Sorcerer Druid Wizards gain their magic through study... Sorcerers get their power from an otherworldly being... Druids get their power from nature... ``` -------------------------------- ### Manual Initialization of kelp-autogrow Source: https://kelpui.com/docs/components/textarea This section describes how to manually initialize the `` web component using its `.init()` method, which can be useful if the component fails to self-instantiate. ```APIDOC ## Manual Initialization of `` ### Description Web components typically self-instantiate. However, if the `` element fails to initialize automatically, you can use its `.init()` method to manually trigger the initialization process. ### Method `init()` ### Endpoint N/A (This is a JavaScript method for a web component) ### Parameters This method does not accept any parameters. ### Request Example ```javascript const autogrow = document.querySelector('kelp-autogrow'); autogrow.init(); ``` ### Response This method does not return a value. Its purpose is to ensure the component is properly initialized. #### Success Response (N/A) N/A #### Response Example N/A ``` -------------------------------- ### Direct Download - Kelp UI Source: https://kelpui.com/docs/getting-started/installation Integrate Kelp UI by downloading the CSS and JavaScript files directly from the repository. This approach involves linking to local files within your project structure. ```html ``` -------------------------------- ### Kelp UI Spinner Sizes Source: https://kelpui.com/docs/components/spinner Illustrates how to adjust the size of a Kelp UI spinner using the `.size-*` utility classes. Examples show extra-small (xs), medium (m), and extra-extra-extra-large (4xl) sizes. ```html ``` -------------------------------- ### JavaScript Method to Initialize Component Source: https://kelpui.com/docs/components/heading-anchors This JavaScript snippet shows how to manually initialize the `` web component using its `.init()` method. This is useful if the component fails to self-instantiate. ```javascript const headingAnchors = document.querySelector('kelp-heading-anchors'); headingAnchors.init(); ``` -------------------------------- ### Conditional Form Submission with `[formmethod='dialog']` Source: https://kelpui.com/docs/components/dialog This example shows a form within a dialog where a 'Cancel' button uses `[formmethod='dialog']` to close the dialog without submitting the form, while the 'Submit' button proceeds with the form submission. ```html Username ``` -------------------------------- ### Nav Bar Icon Logo - HTML Source: https://kelpui.com/docs/components/navbar Provides an example of using an inline SVG as a logo within the navbar. Setting `fill="currentColor"` allows the SVG to inherit color changes on hover. ```html ``` -------------------------------- ### Style Disclosure Content with 'callout' Class Source: https://kelpui.com/docs/components/details This example demonstrates how to combine HTML and elements with the 'callout' class to style the content within disclosure groups. It shows two variations: 'callout' and 'callout outline'. ```html Callout Content The content. Callout Wrapper The content. ``` -------------------------------- ### KelpUI Select: Basic Usage (HTML) Source: https://kelpui.com/docs/components/select Demonstrates the basic usage of the KelpUI Select component by creating a dropdown menu with options. It requires a and ``` -------------------------------- ### Controlling Navbar Width with Containers Source: https://kelpui.com/docs/components/navbar Explains how to control the width of the `.navbar` component by nesting it within Kelp UI's `.container` classes. Examples show how to make the navbar very wide (`.container-2xl`) or quite narrow (`.container-s`). ```html ``` -------------------------------- ### Kelp UI Grid System: Fraction-Based Columns Source: https://kelpui.com/docs/layout/grid Demonstrates the usage of Kelp UI's fraction-based column classes for creating responsive grid layouts. These classes define column widths as fractions of the total 12 columns, facilitating easier layout design and responsiveness. The system is mobile-first, with specific classes for different breakpoint sizes. ```html .item-third .item-two-thirds .item-fourth .item-three-fourths .item-half .item-half .item-fourth .item-half .item-fourth ``` -------------------------------- ### Basic File Input HTML Source: https://kelpui.com/docs/components/file-picker Demonstrates how to create a basic file input element using an HTML label and input tag with type 'file'. This is the foundational step for enabling file selection in web forms. ```html Choose a File ``` -------------------------------- ### Web Component Show Until Ready Source: https://kelpui.com/docs/utilities/visibility Provides fallback content for Web Components that is hidden once the component is ready. Elements with '[show-until-ready]' are initially visible and then hidden when the component gains the '[is-ready]' attribute. ```html Learn more ``` -------------------------------- ### Stack Layout with Gap Utilities Source: https://kelpui.com/docs/layout/stack Shows how to adjust the spacing between items in a `.stack` layout using the `.gap-*` utility classes. This leverages the `display: flex` property inherent to the `.stack` class. ```html ``` -------------------------------- ### KelpUI Text Utility Classes Example (HTML) Source: https://kelpui.com/docs/components/text Illustrates how to use KelpUI utility classes to modify text size and color. These classes can be applied directly to text elements for quick styling adjustments without explicit CSS. ```html You can use utility classes to adjust the size and color. ``` -------------------------------- ### Manually Initialize kelp-select-all Component (JavaScript) Source: https://kelpui.com/docs/components/select-all If the kelp-select-all web component fails to initialize automatically, it can be manually initialized using its .init() method. This ensures the component is ready for use. ```javascript const selectAll = document.querySelector('kelp-select-all'); selectAll.init(); ``` -------------------------------- ### HTML for Default Selected Radio Button Source: https://kelpui.com/docs/components/radio This example shows how to set a radio button to be selected by default using the 'checked' attribute. If multiple radio buttons in the same group have this attribute, the last one in the HTML document will be the one that is selected. ```html Up! WALL-E Toy Story ``` -------------------------------- ### Initialize kelp-autogrow Element with JavaScript Source: https://kelpui.com/docs/components/textarea This snippet demonstrates how to select a `` element using `document.querySelector` and then manually initialize it using its `.init()` method. This is a fallback mechanism for cases where the component might not instantiate automatically. No external dependencies are required. ```javascript const autogrow = document.querySelector('kelp-autogrow'); autogrow.init(); ``` -------------------------------- ### Sidecar Layout: Adjusting Vertical Alignment (HTML) Source: https://kelpui.com/docs/layout/sidecar Explains how to control the vertical alignment of items within a `.sidecar` or `.sidecar-end` layout using Kelp UI's `.align-*` utility classes. Examples include `.align-start`, `.align-center`, and `.align-end`. ```html ``` -------------------------------- ### HTML Switch Component - Basic Usage Source: https://kelpui.com/docs/components/switch Demonstrates how to create a basic switch component using an HTML checkbox with the `role='switch'` attribute. This allows users to toggle an option on or off. ```html Allow magic ``` -------------------------------- ### Sidecar Layout: Adjusting Gap with Utility Classes (HTML) Source: https://kelpui.com/docs/layout/sidecar Shows how to modify the space between elements in a `.sidecar` layout using Kelp UI's `.gap-*` utility classes. This example demonstrates using `.gap-4xs` and `.gap-6xl` for different spacing. ```html ``` -------------------------------- ### Form Layout with Grid (HTML) Source: https://kelpui.com/docs/forms/layout Demonstrates how to structure form elements using Kelp UI's grid system for responsive layouts. It utilizes classes like `.grid-m` and `.item-half` to create a two-column form on medium viewports and larger. Input fields and labels are styled to take full width by default within their containers. ```html First Name Last Name ``` -------------------------------- ### Action Header Component in HTML Source: https://kelpui.com/docs/layout/action-header The .action-header class is used to create a dismissable header layout within elements like modals or drawers. It ensures an action button (e.g., a close button) remains inline with the heading. This example demonstrates its usage within a dialog element. ```html This is a modal heading ``` -------------------------------- ### Mixing Button Styles in HTML Source: https://kelpui.com/docs/forms/buttons Demonstrates how to use standard buttons alongside buttons styled as links, leveraging the `.link` class to maintain consistent spacing and alignment. The input consists of standard and link-styled buttons. ```html ``` -------------------------------- ### Basic Skeleton Component (HTML) Source: https://kelpui.com/docs/components/skeleton This snippet demonstrates the basic usage of the skeleton component by applying the `.skeleton` class to a div element. This creates a pulsing placeholder for content that is not yet loaded. ```html ``` -------------------------------- ### Cluster Layout with Gap - HTML Source: https://kelpui.com/docs/layout/cluster Shows how to adjust the spacing between items in a `.cluster` layout using the `.gap-*` utility classes. The `.cluster` class uses `display: flex` internally. ```html ``` -------------------------------- ### Styled File Input with Kelp UI Classes Source: https://kelpui.com/docs/components/file-picker Shows how to style the file input's upload button using Kelp UI utility classes. By applying classes like 'size-2xs', 'vivid', and 'secondary' directly to the input element, you can customize its appearance. ```html ``` -------------------------------- ### Modal with Autofocus on Specific Element Source: https://kelpui.com/docs/components/dialog Demonstrates how to use the `[autofocus]` attribute to set the initial focus on a specific interactive element when a modal opens. This overrides the default behavior where the first interactive element receives focus. The example shows autofocus on an input field within a login form. ```html Login Username ```