# Kliping

> Vue 3 + Tailwind CSS v4 components, blocks, variants, charts and composables in the shadcn-vue style (Reka UI). 888 MIT-licensed items. The kliping CLI copies the source into the user's project, so the code is theirs to edit. Front-end only: blocks ship with sample data to replace.

## How to use

- Add items to a Vue (Vite or Nuxt) project: `npx kliping@latest add <name> [<name> …]`. It installs npm packages, dependent items and theme variables. A project without Tailwind CSS v4 or the `@` alias is set up first (`npx kliping@latest init`).
- Build a page from blocks, in order: `npx kliping@latest add navbar-01 hero-01 features-01 footer-01 --page src/LandingPage.vue`, then render `LandingPage` from `App.vue` (Nuxt: `--page app/pages/index.vue`).
- Where files land: components in `components/ui/<name>/` (import from `@/components/ui/<name>`), blocks in `components/blocks/<name>/<name>.vue`, variants in `components/variants/<name>/`, charts in `components/charts/<name>/`, composables in `composables/`.
- Item source: `https://kliping.pro/r/<name>.json` holds the files, npm dependencies and registry dependencies of one item. The full index is `https://kliping.pro/r/registry.json`.
- MCP server for AI editors (search, view and add items): `npx kliping@latest mcp init --client claude` (or cursor, vscode, codex, opencode). No account and no API key.
- Composition: variants are styled examples of one component, blocks are page sections built from components, a page is blocks stacked in order. Prefer an existing block or variant over writing new UI; adapt its text and sample data.
- Docs: https://kliping.pro/introduction · Concepts (item levels, file locations, how to read the API tables): https://kliping.pro/concepts · CLI: https://kliping.pro/cli · MCP: https://kliping.pro/mcp · Builder (assemble a page visually): https://kliping.pro/builder

## Components (132)

Each component has a short API page for agents (install, import, props, events, slots, data attributes): `https://kliping.pro/llms/components/<name>.md`.

- [accordion](https://kliping.pro/r/accordion.json): A vertically stacked set of interactive headings that each reveal a section of content. API: https://kliping.pro/llms/components/accordion.md
- [alert](https://kliping.pro/r/alert.json): Displays a callout for user attention. API: https://kliping.pro/llms/components/alert.md
- [alert-dialog](https://kliping.pro/r/alert-dialog.json): A modal dialog that interrupts the user with important content and expects a response. API: https://kliping.pro/llms/components/alert-dialog.md
- [animated-grid-pattern](https://kliping.pro/r/animated-grid-pattern.json): A grid pattern background with squares that fade in and out in turn. API: https://kliping.pro/llms/components/animated-grid-pattern.md
- [aspect-ratio](https://kliping.pro/r/aspect-ratio.json): Displays content within a desired width-to-height ratio. API: https://kliping.pro/llms/components/aspect-ratio.md
- [attachment](https://kliping.pro/r/attachment.json): Displays a file or image attachment with its media, metadata, upload status, and actions. API: https://kliping.pro/llms/components/attachment.md
- [avatar](https://kliping.pro/r/avatar.json): An image element with a fallback for representing the user. API: https://kliping.pro/llms/components/avatar.md
- [badge](https://kliping.pro/r/badge.json): Displays a badge or a component that looks like a badge. API: https://kliping.pro/llms/components/badge.md
- [border-beam](https://kliping.pro/r/border-beam.json): A beam of light that travels around the border of an element. API: https://kliping.pro/llms/components/border-beam.md
- [breadcrumb](https://kliping.pro/r/breadcrumb.json): Displays the path to the current page using a hierarchy of links. API: https://kliping.pro/llms/components/breadcrumb.md
- [bubble](https://kliping.pro/r/bubble.json): Displays chat content in message bubbles, with variants, alignment, grouping, reactions, and collapsible content. API: https://kliping.pro/llms/components/bubble.md
- [button](https://kliping.pro/r/button.json): Displays a button or a component that looks like a button. API: https://kliping.pro/llms/components/button.md
- [button-group](https://kliping.pro/r/button-group.json): A container that groups related buttons together with consistent styling. API: https://kliping.pro/llms/components/button-group.md
- [calendar](https://kliping.pro/r/calendar.json): A date field component that allows users to enter and edit a date. API: https://kliping.pro/llms/components/calendar.md
- [card](https://kliping.pro/r/card.json): Displays a card with header, content, and footer. API: https://kliping.pro/llms/components/card.md
- [carousel](https://kliping.pro/r/carousel.json): A carousel with motion and swipe gestures, built using Embla. API: https://kliping.pro/llms/components/carousel.md
- [chart](https://kliping.pro/r/chart.json): Charts built using Unovis that you can copy and paste into your apps. API: https://kliping.pro/llms/components/chart.md
- [checkbox](https://kliping.pro/r/checkbox.json): A control that allows the user to toggle between checked and not checked. API: https://kliping.pro/llms/components/checkbox.md
- [collapsible](https://kliping.pro/r/collapsible.json): An interactive component that expands and collapses a panel. API: https://kliping.pro/llms/components/collapsible.md
- [combobox](https://kliping.pro/r/combobox.json): An autocomplete input and command palette with a list of suggestions. API: https://kliping.pro/llms/components/combobox.md
- [command](https://kliping.pro/r/command.json): A fast, composable, unstyled command menu for Vue. API: https://kliping.pro/llms/components/command.md
- [context-menu](https://kliping.pro/r/context-menu.json): Displays a menu of actions or functions, triggered by a right click. API: https://kliping.pro/llms/components/context-menu.md
- [dialog](https://kliping.pro/r/dialog.json): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. API: https://kliping.pro/llms/components/dialog.md
- [dot-pattern](https://kliping.pro/r/dot-pattern.json): A dot pattern background, with optional pulsing dots. API: https://kliping.pro/llms/components/dot-pattern.md
- [drawer](https://kliping.pro/r/drawer.json): A sliding drawer component designed for mobile devices. API: https://kliping.pro/llms/components/drawer.md
- [dropdown-menu](https://kliping.pro/r/dropdown-menu.json): Displays a menu of actions or functions, triggered by a button. API: https://kliping.pro/llms/components/dropdown-menu.md
- [empty](https://kliping.pro/r/empty.json): Displays an empty state when there is no data to show. API: https://kliping.pro/llms/components/empty.md
- [field](https://kliping.pro/r/field.json): Combines a label, control, and help text into a single accessible form row. API: https://kliping.pro/llms/components/field.md
- [form](https://kliping.pro/r/form.json): Builds forms with VeeValidate and Zod. API: https://kliping.pro/llms/components/form.md
- [hover-card](https://kliping.pro/r/hover-card.json): For sighted users to preview content available behind a link. API: https://kliping.pro/llms/components/hover-card.md
- [input](https://kliping.pro/r/input.json): Displays a form input field or a component that looks like an input field. API: https://kliping.pro/llms/components/input.md
- [input-group](https://kliping.pro/r/input-group.json): Adds extra information or actions inside an input or textarea. API: https://kliping.pro/llms/components/input-group.md
- [input-otp](https://kliping.pro/r/input-otp.json): An accessible one-time password component with copy-paste support. API: https://kliping.pro/llms/components/input-otp.md
- [item](https://kliping.pro/r/item.json): A versatile component for displaying any content in a single row. API: https://kliping.pro/llms/components/item.md
- [kbd](https://kliping.pro/r/kbd.json): Displays a keyboard key pressed by the user. API: https://kliping.pro/llms/components/kbd.md
- [label](https://kliping.pro/r/label.json): Renders an accessible label associated with a control. API: https://kliping.pro/llms/components/label.md
- [marker](https://kliping.pro/r/marker.json): Displays an inline status, system note, framed row, or labeled divider within a conversation. API: https://kliping.pro/llms/components/marker.md
- [marquee-basic](https://kliping.pro/r/marquee-basic.json): A row of content that scrolls endlessly, in the single-component version used by blocks. API: https://kliping.pro/llms/components/marquee-basic.md
- [menubar](https://kliping.pro/r/menubar.json): A persistent menu common in desktop applications that provides quick access to a set of commands. API: https://kliping.pro/llms/components/menubar.md
- [message](https://kliping.pro/r/message.json): Displays a single chat message with avatar, header, footer, and configurable alignment. API: https://kliping.pro/llms/components/message.md
- [message-scroller](https://kliping.pro/r/message-scroller.json): A scroll container for chat transcripts that anchors turns, follows streaming replies, restores prepended history, and jumps to messages. API: https://kliping.pro/llms/components/message-scroller.md
- [native-select](https://kliping.pro/r/native-select.json): A native HTML select element styled to match your design system. API: https://kliping.pro/llms/components/native-select.md
- [navigation-menu](https://kliping.pro/r/navigation-menu.json): A collection of links for navigating websites. API: https://kliping.pro/llms/components/navigation-menu.md
- [number-field](https://kliping.pro/r/number-field.json): A number input that lets users type a value or increment and decrement it with stepper buttons. API: https://kliping.pro/llms/components/number-field.md
- [pagination](https://kliping.pro/r/pagination.json): Pagination with page navigation and next and previous links. API: https://kliping.pro/llms/components/pagination.md
- [particles](https://kliping.pro/r/particles.json): A background of slowly drifting particles. API: https://kliping.pro/llms/components/particles.md
- [pin-input](https://kliping.pro/r/pin-input.json): An accessible PIN input component with copy-paste support. API: https://kliping.pro/llms/components/pin-input.md
- [popover](https://kliping.pro/r/popover.json): Displays rich content in a portal, triggered by a button. API: https://kliping.pro/llms/components/popover.md
- [progress](https://kliping.pro/r/progress.json): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. API: https://kliping.pro/llms/components/progress.md
- [questionnaire](https://kliping.pro/r/questionnaire.json): A step-by-step questionnaire with single-choice, multiple-choice, free-text, and skippable questions. API: https://kliping.pro/llms/components/questionnaire.md
- [radio-group](https://kliping.pro/r/radio-group.json): A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time. API: https://kliping.pro/llms/components/radio-group.md
- [range-calendar](https://kliping.pro/r/range-calendar.json): A calendar view designed specifically for selecting a date range. API: https://kliping.pro/llms/components/range-calendar.md
- [resizable](https://kliping.pro/r/resizable.json): Accessible resizable panel groups and layouts with keyboard support. API: https://kliping.pro/llms/components/resizable.md
- [scroll-area](https://kliping.pro/r/scroll-area.json): Augments native scroll functionality for custom, cross-browser styling. API: https://kliping.pro/llms/components/scroll-area.md
- [select](https://kliping.pro/r/select.json): Displays a list of options for the user to pick from, triggered by a button. API: https://kliping.pro/llms/components/select.md
- [separator](https://kliping.pro/r/separator.json): Visually or semantically separates content. API: https://kliping.pro/llms/components/separator.md
- [sheet](https://kliping.pro/r/sheet.json): Extends the Dialog component to display content that complements the main content of the screen. API: https://kliping.pro/llms/components/sheet.md
- [sidebar](https://kliping.pro/r/sidebar.json): A composable, themeable, and customizable sidebar component. API: https://kliping.pro/llms/components/sidebar.md
- [skeleton](https://kliping.pro/r/skeleton.json): Displays a placeholder while the actual content is loading. API: https://kliping.pro/llms/components/skeleton.md
- [slider](https://kliping.pro/r/slider.json): An input where the user selects a value from within a given range. API: https://kliping.pro/llms/components/slider.md
- [sonner](https://kliping.pro/r/sonner.json): An opinionated toast notification component for Vue. API: https://kliping.pro/llms/components/sonner.md
- [spinner](https://kliping.pro/r/spinner.json): An indicator that shows something is loading. API: https://kliping.pro/llms/components/spinner.md
- [stepper](https://kliping.pro/r/stepper.json): A set of steps that indicate progress through a multi-step process. API: https://kliping.pro/llms/components/stepper.md
- [switch](https://kliping.pro/r/switch.json): A control that allows the user to toggle between on and off. API: https://kliping.pro/llms/components/switch.md
- [table](https://kliping.pro/r/table.json): A responsive table component. API: https://kliping.pro/llms/components/table.md
- [tabs](https://kliping.pro/r/tabs.json): A set of layered sections of content, known as tab panels, that are displayed one at a time. API: https://kliping.pro/llms/components/tabs.md
- [tags-input](https://kliping.pro/r/tags-input.json): An input that displays tags inside it, followed by an actual text input. API: https://kliping.pro/llms/components/tags-input.md
- [textarea](https://kliping.pro/r/textarea.json): Displays a form textarea or a component that looks like a textarea. API: https://kliping.pro/llms/components/textarea.md
- [toggle](https://kliping.pro/r/toggle.json): A two-state button that can be either on or off. API: https://kliping.pro/llms/components/toggle.md
- [toggle-group](https://kliping.pro/r/toggle-group.json): A set of two-state buttons that can be toggled on or off. API: https://kliping.pro/llms/components/toggle-group.md
- [tooltip](https://kliping.pro/r/tooltip.json): A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it. API: https://kliping.pro/llms/components/tooltip.md
- [action-bar](https://kliping.pro/r/action-bar.json): A floating action bar that appears at the screen edge when items are selected, holding buttons that act on the selection. API: https://kliping.pro/llms/components/action-bar.md
- [ai-chat](https://kliping.pro/r/ai-chat.json): A chat interface for AI apps: messages with markdown, reasoning, tool calls, attachments, and suggestions, built on headless chat primitives. API: https://kliping.pro/llms/components/ai-chat.md
- [ai-thread-list](https://kliping.pro/r/ai-thread-list.json): A list of AI chat threads with a new-chat button, search, date groups, archive, and delete, built on headless chat primitives. API: https://kliping.pro/llms/components/ai-thread-list.md
- [angle-slider](https://kliping.pro/r/angle-slider.json): A circular slider for picking an angle or angle range, with draggable, keyboard-controllable thumbs. API: https://kliping.pro/llms/components/angle-slider.md
- [avatar-group](https://kliping.pro/r/avatar-group.json): A row of overlapping avatars with an overflow counter at the end when the count exceeds a limit. API: https://kliping.pro/llms/components/avatar-group.md
- [badge-overflow](https://kliping.pro/r/badge-overflow.json): A row of badges that measures the available space, shows only those that fit, and collapses the rest into one indicator. API: https://kliping.pro/llms/components/badge-overflow.md
- [banner](https://kliping.pro/r/banner.json): A notification strip at the top or bottom edge of the screen, with queueing, priority, and auto-dismiss. API: https://kliping.pro/llms/components/banner.md
- [checkbox-group](https://kliping.pro/r/checkbox-group.json): A group of checkboxes managed together with one multi-value model, one error message, and one label. API: https://kliping.pro/llms/components/checkbox-group.md
- [chip](https://kliping.pro/r/chip.json): A rounded chip for tags, filters, or selections, in three sizes and six variants. API: https://kliping.pro/llms/components/chip.md
- [circular-progress](https://kliping.pro/r/circular-progress.json): A ring-shaped progress indicator, including a continuously spinning indeterminate state. API: https://kliping.pro/llms/components/circular-progress.md
- [client-only](https://kliping.pro/r/client-only.json): Defers rendering its content until hydration completes, with a server-rendered fallback. API: https://kliping.pro/llms/components/client-only.md
- [color-picker](https://kliping.pro/r/color-picker.json): A color picker with a saturation area, hue and alpha sliders, and text input in several formats. API: https://kliping.pro/llms/components/color-picker.md
- [color-swatch](https://kliping.pro/r/color-swatch.json): A color swatch drawn over a checkerboard so transparent colors read accurately. API: https://kliping.pro/llms/components/color-swatch.md
- [combobox-advanced](https://kliping.pro/r/combobox-advanced.json): A text input paired with a list of options that filters as you type. API: https://kliping.pro/llms/components/combobox-advanced.md
- [compare-slider](https://kliping.pro/r/compare-slider.json): A before-and-after comparison slider with two stacked layers and a draggable divider. API: https://kliping.pro/llms/components/compare-slider.md
- [cropper](https://kliping.pro/r/cropper.json): An image and video cropper with zoom, rotation, and a configurable crop area shape. API: https://kliping.pro/llms/components/cropper.md
- [data-grid](https://kliping.pro/r/data-grid.json): A data grid with inline cell editing, keyboard navigation, clipboard paste, and row virtualization. API: https://kliping.pro/llms/components/data-grid.md
- [data-table-advanced](https://kliping.pro/r/data-table-advanced.json): A full-featured data table with filtering, sorting, pagination, and column visibility. API: https://kliping.pro/llms/components/data-table-advanced.md
- [direction-provider](https://kliping.pro/r/direction-provider.json): Provides reading direction, left-to-right or right-to-left, to the entire tree below it. API: https://kliping.pro/llms/components/direction-provider.md
- [editable](https://kliping.pro/r/editable.json): Inline editable text that turns into an input on click and reverts on Escape. API: https://kliping.pro/llms/components/editable.md
- [file-upload](https://kliping.pro/r/file-upload.json): A file uploader with drag and drop, previews, and a progress bar per file. API: https://kliping.pro/llms/components/file-upload.md
- [fps](https://kliping.pro/r/fps.json): A live frames-per-second counter for checking rendering cost during development. API: https://kliping.pro/llms/components/fps.md
- [gauge](https://kliping.pro/r/gauge.json): An arc-shaped value gauge, full circle or partial, for dashboards and metrics. API: https://kliping.pro/llms/components/gauge.md
- [hitbox](https://kliping.pro/r/hitbox.json): Expands the touchable area of an element without changing its appearance. API: https://kliping.pro/llms/components/hitbox.md
- [kanban](https://kliping.pro/r/kanban.json): A drag-and-drop kanban board where cards move between columns and columns can be reordered. API: https://kliping.pro/llms/components/kanban.md
- [kbd-advanced](https://kliping.pro/r/kbd-advanced.json): Displays keyboard keys for writing out shortcuts. API: https://kliping.pro/llms/components/kbd-advanced.md
- [key-value](https://kliping.pro/r/key-value.json): A self-growing key-value pair input that handles multi-line paste and validates keys. API: https://kliping.pro/llms/components/key-value.md
- [list](https://kliping.pro/r/list.json): A list of rows with leading and trailing slots, selected state, and disabled rows. API: https://kliping.pro/llms/components/list.md
- [listbox](https://kliping.pro/r/listbox.json): A keyboard-navigable list of options, laid out as a list or a grid. API: https://kliping.pro/llms/components/listbox.md
- [logos](https://kliping.pro/r/logos.json): A set of sample logos for blocks and previews. API: https://kliping.pro/llms/components/logos.md
- [map](https://kliping.pro/r/map.json): An interactive MapLibre map with markers, popups, tooltips, routes, clusters, and zoom controls. API: https://kliping.pro/llms/components/map.md
- [marquee](https://kliping.pro/r/marquee.json): A row of content that scrolls endlessly on its own, horizontally or vertically. API: https://kliping.pro/llms/components/marquee.md
- [mask-input](https://kliping.pro/r/mask-input.json): A masked input that formats typing to a defined pattern, such as phone numbers, dates, or card numbers. API: https://kliping.pro/llms/components/mask-input.md
- [masonry](https://kliping.pro/r/masonry.json): A masonry layout that packs columns of uneven-height items tightly to fit the container width. API: https://kliping.pro/llms/components/masonry.md
- [media-player](https://kliping.pro/r/media-player.json): A video and audio player with custom controls for play, seek, volume, speed, captions, and fullscreen. API: https://kliping.pro/llms/components/media-player.md
- [mention](https://kliping.pro/r/mention.json): An input that opens a suggestion list when a trigger character is typed, following the @mention pattern. API: https://kliping.pro/llms/components/mention.md
- [phone-input](https://kliping.pro/r/phone-input.json): An international phone number input with a country picker and per-country number formatting. API: https://kliping.pro/llms/components/phone-input.md
- [portal](https://kliping.pro/r/portal.json): Renders its content elsewhere in the DOM tree. API: https://kliping.pro/llms/components/portal.md
- [presence](https://kliping.pro/r/presence.json): Keeps an element mounted until its exit animation finishes. API: https://kliping.pro/llms/components/presence.md
- [qr-code](https://kliping.pro/r/qr-code.json): Renders a QR code with configurable error correction level, module size, and a centered logo. API: https://kliping.pro/llms/components/qr-code.md
- [rating](https://kliping.pro/r/rating.json): A star rating that supports half values, keyboard control, and native form submission. API: https://kliping.pro/llms/components/rating.md
- [relative-time-card](https://kliping.pro/r/relative-time-card.json): Relative time, such as "3 hours ago", that opens a card with the exact time in several time zones on hover. API: https://kliping.pro/llms/components/relative-time-card.md
- [responsive-dialog](https://kliping.pro/r/responsive-dialog.json): A dialog that adapts to screen width: a centered modal on desktop and a bottom drawer on mobile. API: https://kliping.pro/llms/components/responsive-dialog.md
- [scroll-spy](https://kliping.pro/r/scroll-spy.json): Navigation links that highlight the section currently in view, including nested sections. API: https://kliping.pro/llms/components/scroll-spy.md
- [scroller](https://kliping.pro/r/scroller.json): A scroll container with auto-showing edge shadows and scroll buttons at both ends. API: https://kliping.pro/llms/components/scroller.md
- [segmented-input](https://kliping.pro/r/segmented-input.json): Several input boxes that appear joined as one, for OTP codes, dates, or segmented numbers. API: https://kliping.pro/llms/components/segmented-input.md
- [selection-toolbar](https://kliping.pro/r/selection-toolbar.json): A floating toolbar that appears above the currently selected text. API: https://kliping.pro/llms/components/selection-toolbar.md
- [software-purchase-card](https://kliping.pro/r/software-purchase-card.json): A software purchase approval card with start date, seat count, price, and Approve and Discard buttons. API: https://kliping.pro/llms/components/software-purchase-card.md
- [sortable](https://kliping.pro/r/sortable.json): A list that can be reordered with drag and drop, horizontally or vertically. API: https://kliping.pro/llms/components/sortable.md
- [speed-dial](https://kliping.pro/r/speed-dial.json): A floating action button that fans out a set of actions when pressed. API: https://kliping.pro/llms/components/speed-dial.md
- [stack](https://kliping.pro/r/stack.json): A stack of cards that sits compact at rest and spreads out on hover, like a Sonner toast stack. API: https://kliping.pro/llms/components/stack.md
- [stat](https://kliping.pro/r/stat.json): A headline number with a label, description, and trend indicator. API: https://kliping.pro/llms/components/stat.md
- [status](https://kliping.pro/r/status.json): A status indicator with a pulsing dot, such as online, error, or pending, in color variants. API: https://kliping.pro/llms/components/status.md
- [stepper-advanced](https://kliping.pro/r/stepper-advanced.json): A multi-step process guide with progress indicators, skippable steps, and per-step error states. API: https://kliping.pro/llms/components/stepper-advanced.md
- [swap](https://kliping.pro/r/swap.json): Two pieces of content that swap places on click or hover, with selectable transitions. API: https://kliping.pro/llms/components/swap.md
- [tags-input-advanced](https://kliping.pro/r/tags-input-advanced.json): A tag input where Enter adds a tag, Backspace removes one, and each tag can be edited again. API: https://kliping.pro/llms/components/tags-input-advanced.md
- [time-picker](https://kliping.pro/r/time-picker.json): A time picker that accepts typed input or list selection and follows the locale's 12- or 24-hour format. API: https://kliping.pro/llms/components/time-picker.md
- [timeline](https://kliping.pro/r/timeline.json): A timeline of events, horizontal or vertical, with a state per node. API: https://kliping.pro/llms/components/timeline.md
- [tour](https://kliping.pro/r/tour.json): A guided tour that highlights elements one by one while explaining what they do. API: https://kliping.pro/llms/components/tour.md
- [visually-hidden](https://kliping.pro/r/visually-hidden.json): Hides content visually while keeping it available to screen readers. API: https://kliping.pro/llms/components/visually-hidden.md
- [visually-hidden-input](https://kliping.pro/r/visually-hidden-input.json): A hidden input that stays readable by assistive technology and is still submitted with forms. API: https://kliping.pro/llms/components/visually-hidden-input.md

## Blocks (383)

### Account (7)

- [account-01](https://kliping.pro/r/account-01.json): Two-factor authentication settings with a list of methods and recovery codes. Usage: https://kliping.pro/llms/blocks/account-01.md
- [account-02](https://kliping.pro/r/account-02.json): Profile photo upload with an avatar preview and an availability status switch. Usage: https://kliping.pro/llms/blocks/account-02.md
- [account-03](https://kliping.pro/r/account-03.json): Sectioned personal information form with selects, a date picker, and contact fields. Usage: https://kliping.pro/llms/blocks/account-03.md
- [account-04](https://kliping.pro/r/account-04.json): Two-column change password form with a live-validated requirements checklist. Usage: https://kliping.pro/llms/blocks/account-04.md
- [account-05](https://kliping.pro/r/account-05.json): Third-party integrations list in an accordion with switches and a verification code. Usage: https://kliping.pro/llms/blocks/account-05.md
- [account-06](https://kliping.pro/r/account-06.json): Notification preferences table with Email, Push, and SMS switches per activity. Usage: https://kliping.pro/llms/blocks/account-06.md
- [account-07](https://kliping.pro/r/account-07.json): Active sessions list per device with location, time, and a remove button. Usage: https://kliping.pro/llms/blocks/account-07.md

### AI Agents (3)

- [ai-agents-01](https://kliping.pro/r/ai-agents-01.json): AI chat with provider selection, API key input, streaming responses, and a reasoning view. Usage: https://kliping.pro/llms/blocks/ai-agents-01.md
- [ai-agents-02](https://kliping.pro/r/ai-agents-02.json): AI image generator with a Generate tab and a brightness, contrast, and saturation editor. Usage: https://kliping.pro/llms/blocks/ai-agents-02.md
- [ai-agents-03](https://kliping.pro/r/ai-agents-03.json): AI video generation agent with progress, a player preview, and a list of generated videos. Usage: https://kliping.pro/llms/blocks/ai-agents-03.md

### Authentication (15)

- [login-01](https://kliping.pro/r/login-01.json): A simple login form. Usage: https://kliping.pro/llms/blocks/login-01.md
- [login-02](https://kliping.pro/r/login-02.json): A two-column login page with a cover image. Usage: https://kliping.pro/llms/blocks/login-02.md
- [login-03](https://kliping.pro/r/login-03.json): A login page with a muted background color. Usage: https://kliping.pro/llms/blocks/login-03.md
- [login-04](https://kliping.pro/r/login-04.json): A login page with a form and an image. Usage: https://kliping.pro/llms/blocks/login-04.md
- [login-05](https://kliping.pro/r/login-05.json): A simple email-only login page. Usage: https://kliping.pro/llms/blocks/login-05.md
- [otp-01](https://kliping.pro/r/otp-01.json): A simple one-time password verification form. Usage: https://kliping.pro/llms/blocks/otp-01.md
- [otp-02](https://kliping.pro/r/otp-02.json): A two-column one-time password page with a cover image. Usage: https://kliping.pro/llms/blocks/otp-02.md
- [otp-03](https://kliping.pro/r/otp-03.json): A one-time password page with a muted background color. Usage: https://kliping.pro/llms/blocks/otp-03.md
- [otp-04](https://kliping.pro/r/otp-04.json): A one-time password page with a form and an image. Usage: https://kliping.pro/llms/blocks/otp-04.md
- [otp-05](https://kliping.pro/r/otp-05.json): A one-time password form with options to sign in with another account. Usage: https://kliping.pro/llms/blocks/otp-05.md
- [signup-01](https://kliping.pro/r/signup-01.json): A simple signup form. Usage: https://kliping.pro/llms/blocks/signup-01.md
- [signup-02](https://kliping.pro/r/signup-02.json): A two-column signup page with a cover image. Usage: https://kliping.pro/llms/blocks/signup-02.md
- [signup-03](https://kliping.pro/r/signup-03.json): A signup page with a muted background color. Usage: https://kliping.pro/llms/blocks/signup-03.md
- [signup-04](https://kliping.pro/r/signup-04.json): A signup page with a form and an image. Usage: https://kliping.pro/llms/blocks/signup-04.md
- [signup-05](https://kliping.pro/r/signup-05.json): A signup form with options to sign up with another account. Usage: https://kliping.pro/llms/blocks/signup-05.md

### Banner (4)

- [banner-01](https://kliping.pro/r/banner-01.json): A thin single-line announcement bar at the top of the page. Usage: https://kliping.pro/llms/blocks/banner-01.md
- [banner-02](https://kliping.pro/r/banner-02.json): A card-style announcement bar with a close button in the corner. Usage: https://kliping.pro/llms/blocks/banner-02.md
- [banner-03](https://kliping.pro/r/banner-03.json): An announcement bar with an icon and a close button that repositions on small screens. Usage: https://kliping.pro/llms/blocks/banner-03.md
- [banner-04](https://kliping.pro/r/banner-04.json): A double-bordered sign-up call-to-action bar with two buttons. Usage: https://kliping.pro/llms/blocks/banner-04.md

### Billing (14)

- [billing-01](https://kliping.pro/r/billing-01.json): List of company billing information cards with edit and delete buttons. Usage: https://kliping.pro/llms/blocks/billing-01.md
- [billing-02](https://kliping.pro/r/billing-02.json): Two credit cards side by side in dark and light variants with a gold chip. Usage: https://kliping.pro/llms/blocks/billing-02.md
- [billing-03](https://kliping.pro/r/billing-03.json): Invoice list with due status badges, amounts, and download buttons. Usage: https://kliping.pro/llms/blocks/billing-03.md
- [billing-04](https://kliping.pro/r/billing-04.json): Grid of Visa and Mastercard payment methods with a default label and action tooltips. Usage: https://kliping.pro/llms/blocks/billing-04.md
- [billing-05](https://kliping.pro/r/billing-05.json): Monthly transaction history with up/down trend icons and a date picker. Usage: https://kliping.pro/llms/blocks/billing-05.md
- [billing-06](https://kliping.pro/r/billing-06.json): Invoice history table with a balance summary, status filter, Paid/Open/Overdue badges, download buttons, and pagination. Usage: https://kliping.pro/llms/blocks/billing-06.md
- [billing-07](https://kliping.pro/r/billing-07.json): Payment method picker using radio cards for saved cards, with an add new card dialog. Usage: https://kliping.pro/llms/blocks/billing-07.md
- [billing-08](https://kliping.pro/r/billing-08.json): Payment details form with auto-formatted card number, expiry, and CVC, an order summary, and a pay button showing the amount. Usage: https://kliping.pro/llms/blocks/billing-08.md
- [billing-09](https://kliping.pro/r/billing-09.json): Company billing address form with a Tax ID field, country and state selects, and an invoice address preview. Usage: https://kliping.pro/llms/blocks/billing-09.md
- [billing-10](https://kliping.pro/r/billing-10.json): Gallery of saved payment cards styled as theme-gradient credit cards that flip to show the CVC, with set default and delete actions. Usage: https://kliping.pro/llms/blocks/billing-10.md
- [billing-11](https://kliping.pro/r/billing-11.json): Failed payment view with an error summary, decline reason, retry, change method, and contact support actions, and an attempts timeline. Usage: https://kliping.pro/llms/blocks/billing-11.md
- [billing-12](https://kliping.pro/r/billing-12.json): Billing settings with receipt email notification switches, invoice recipients, auto-pay, and a monthly spending limit. Usage: https://kliping.pro/llms/blocks/billing-12.md
- [billing-13](https://kliping.pro/r/billing-13.json): Advanced billing settings for currency, tax, invoice number prefix, and PO number, with an account closure danger zone and confirm dialog. Usage: https://kliping.pro/llms/blocks/billing-13.md
- [billing-14](https://kliping.pro/r/billing-14.json): Full billing page with plan summary, usage snapshot, payment methods, and recent invoices on one screen. Usage: https://kliping.pro/llms/blocks/billing-14.md

### Blog (12)

- [blog-01](https://kliping.pro/r/blog-01.json): Three-column grid of blog post cards with images and category badges. Usage: https://kliping.pro/llms/blocks/blog-01.md
- [blog-02](https://kliping.pro/r/blog-02.json): Blog post cards with images and a read more button. Usage: https://kliping.pro/llms/blocks/blog-02.md
- [blog-03](https://kliping.pro/r/blog-03.json): One large featured blog post followed by smaller post cards. Usage: https://kliping.pro/llms/blocks/blog-03.md
- [blog-04](https://kliping.pro/r/blog-04.json): Divided list of blog posts with an image beside each post. Usage: https://kliping.pro/llms/blocks/blog-04.md
- [blog-05](https://kliping.pro/r/blog-05.json): Two-column list of blog posts with large images. Usage: https://kliping.pro/llms/blocks/blog-05.md
- [blog-06](https://kliping.pro/r/blog-06.json): Three-column list of blog posts with tags on each post. Usage: https://kliping.pro/llms/blocks/blog-06.md
- [blog-07](https://kliping.pro/r/blog-07.json): Grid of six blog cards with images, badges, authors, and a View More button. Usage: https://kliping.pro/llms/blocks/blog-07.md
- [blog-08](https://kliping.pro/r/blog-08.json): Three blog post previews with images, author names, tag rows, and a View More button. Usage: https://kliping.pro/llms/blocks/blog-08.md
- [blog-09](https://kliping.pro/r/blog-09.json): Four blog posts in two columns with a rectangular image beside the text and author. Usage: https://kliping.pro/llms/blocks/blog-09.md
- [blog-10](https://kliping.pro/r/blog-10.json): A primary-colored highlight card beside four image cards with icons. Usage: https://kliping.pro/llms/blocks/blog-10.md
- [blog-11](https://kliping.pro/r/blog-11.json): A single large blog post preview with the image on the left and title, excerpt, and author on the right. Usage: https://kliping.pro/llms/blocks/blog-11.md
- [blog-12](https://kliping.pro/r/blog-12.json): Three simple blog cards with images, category badges, and post dates. Usage: https://kliping.pro/llms/blocks/blog-12.md

### Carousel Block (2)

- [carousel-block-01](https://kliping.pro/r/carousel-block-01.json): An image carousel with previous and next buttons. Usage: https://kliping.pro/llms/blocks/carousel-block-01.md
- [carousel-block-02](https://kliping.pro/r/carousel-block-02.json): An image carousel without buttons, navigated by swiping. Usage: https://kliping.pro/llms/blocks/carousel-block-02.md

### Changelog (3)

- [changelog-01](https://kliping.pro/r/changelog-01.json): A divided changelog with large release markers. Usage: https://kliping.pro/llms/blocks/changelog-01.md
- [changelog-02](https://kliping.pro/r/changelog-02.json): A changelog with dot markers along a timeline. Usage: https://kliping.pro/llms/blocks/changelog-02.md
- [changelog-03](https://kliping.pro/r/changelog-03.json): A compact changelog without feature grouping. Usage: https://kliping.pro/llms/blocks/changelog-03.md

### Code Block (3)

- [code-block-01](https://kliping.pro/r/code-block-01.json): A single plain syntax-highlighted code block centered on the page. Usage: https://kliping.pro/llms/blocks/code-block-01.md
- [code-block-02](https://kliping.pro/r/code-block-02.json): A code block with a header showing the file name and a copy button. Usage: https://kliping.pro/llms/blocks/code-block-02.md
- [code-block-03](https://kliping.pro/r/code-block-03.json): A tabbed code block with one tab per file. Usage: https://kliping.pro/llms/blocks/code-block-03.md

### Contact (18)

- [contact-01](https://kliping.pro/r/contact-01.json): Contact section with three icon cards and no form. Usage: https://kliping.pro/llms/blocks/contact-01.md
- [contact-02](https://kliping.pro/r/contact-02.json): Contact form side by side with address details. Usage: https://kliping.pro/llms/blocks/contact-02.md
- [contact-03](https://kliping.pro/r/contact-03.json): Contact section with four contact cards and direct links. Usage: https://kliping.pro/llms/blocks/contact-03.md
- [contact-04](https://kliping.pro/r/contact-04.json): Contact form in a card on the left, with a heading and three icon contact details on the right. Usage: https://kliping.pro/llms/blocks/contact-04.md
- [contact-05](https://kliping.pro/r/contact-05.json): Contact form with a phone number field on the left and a full-height photo on the right. Usage: https://kliping.pro/llms/blocks/contact-05.md
- [contact-06](https://kliping.pro/r/contact-06.json): Large card containing a form and a dark contact info panel with social icons. Usage: https://kliping.pro/llms/blocks/contact-06.md
- [contact-07](https://kliping.pro/r/contact-07.json): Darkened background photo with a heading and four icon contact details, no form. Usage: https://kliping.pro/llms/blocks/contact-07.md
- [contact-08](https://kliping.pro/r/contact-08.json): Contact section with a photo on the left and a form with topic choice buttons and a badge above the heading on the right. Usage: https://kliping.pro/llms/blocks/contact-08.md
- [contact-09](https://kliping.pro/r/contact-09.json): Contact section with three icon details in circles and a subheading, no form. Usage: https://kliping.pro/llms/blocks/contact-09.md
- [contact-10](https://kliping.pro/r/contact-10.json): Contact form in a card on the left, office address and phone with icons on the right. Usage: https://kliping.pro/llms/blocks/contact-10.md
- [contact-11](https://kliping.pro/r/contact-11.json): Black contact info panel with social icons on the left and a form with interest radio buttons on the right. Usage: https://kliping.pro/llms/blocks/contact-11.md
- [contact-12](https://kliping.pro/r/contact-12.json): Black contact info panel on the left and a form in a card on the right. Usage: https://kliping.pro/llms/blocks/contact-12.md
- [contact-13](https://kliping.pro/r/contact-13.json): Contact form with a phone number field in a card on the left and three icon contact details on the right. Usage: https://kliping.pro/llms/blocks/contact-13.md
- [contact-14](https://kliping.pro/r/contact-14.json): Frosted glass contact form over a dark gradient background with phone and email below. Usage: https://kliping.pro/llms/blocks/contact-14.md
- [contact-15](https://kliping.pro/r/contact-15.json): Centered contact form with a company name field over a faint background photo. Usage: https://kliping.pro/llms/blocks/contact-15.md
- [contact-16](https://kliping.pro/r/contact-16.json): Contact section with four icon contact cards on top and a form in a card below. Usage: https://kliping.pro/llms/blocks/contact-16.md
- [contact-17](https://kliping.pro/r/contact-17.json): Wide contact form without a card, with required fields and a centered send button with an icon. Usage: https://kliping.pro/llms/blocks/contact-17.md
- [contact-18](https://kliping.pro/r/contact-18.json): Three icon contact options with action links on the left and a short form card on the right. Usage: https://kliping.pro/llms/blocks/contact-18.md

### CRUDs (3)

- [cruds-01](https://kliping.pro/r/cruds-01.json): Edit form for a clothing product with name, brand, price, category, and details. Usage: https://kliping.pro/llms/blocks/cruds-01.md
- [cruds-02](https://kliping.pro/r/cruds-02.json): Update staff profile form with username, work email, and new password fields. Usage: https://kliping.pro/llms/blocks/cruds-02.md
- [cruds-03](https://kliping.pro/r/cruds-03.json): Stylist account settings with profile photo upload, role, and access permissions. Usage: https://kliping.pro/llms/blocks/cruds-03.md

### CTA (6)

- [cta-01](https://kliping.pro/r/cta-01.json): A plain centered call-to-action section without a background. Usage: https://kliping.pro/llms/blocks/cta-01.md
- [cta-02](https://kliping.pro/r/cta-02.json): A call-to-action section over a dark image with a gradient. Usage: https://kliping.pro/llms/blocks/cta-02.md
- [cta-03](https://kliping.pro/r/cta-03.json): A two-column call-to-action section with a phone image on the right. Usage: https://kliping.pro/llms/blocks/cta-03.md
- [cta-04](https://kliping.pro/r/cta-04.json): A bordered call-to-action section with a circuit board background and a phone image. Usage: https://kliping.pro/llms/blocks/cta-04.md
- [cta-05](https://kliping.pro/r/cta-05.json): A call-to-action section with an aurora background and a row of icon tiles. Usage: https://kliping.pro/llms/blocks/cta-05.md
- [cta-07](https://kliping.pro/r/cta-07.json): A call-to-action section in a rounded dark card with a logo mark above. Usage: https://kliping.pro/llms/blocks/cta-07.md

### Dashboard (1)

- [dashboard-01](https://kliping.pro/r/dashboard-01.json): A full dashboard with a sidebar, charts, and a data table. Usage: https://kliping.pro/llms/blocks/dashboard-01.md

### Ecommerce (17)

- [ecommerce-01](https://kliping.pro/r/ecommerce-01.json): Two-column checkout with contact, address, and payment forms and a sticky order summary. Usage: https://kliping.pro/llms/blocks/ecommerce-01.md
- [ecommerce-02](https://kliping.pro/r/ecommerce-02.json): Coat product detail with vertical thumbnails, color and size options, and an info accordion. Usage: https://kliping.pro/llms/blocks/ecommerce-02.md
- [ecommerce-03](https://kliping.pro/r/ecommerce-03.json): Dark product overview with a discounted price, info tabs, and a photo on the right. Usage: https://kliping.pro/llms/blocks/ecommerce-03.md
- [ecommerce-04](https://kliping.pro/r/ecommerce-04.json): Digital product page with a breadcrumb, review stats, and version radio options. Usage: https://kliping.pro/llms/blocks/ecommerce-04.md
- [ecommerce-05](https://kliping.pro/r/ecommerce-05.json): Widescreen YouTube runway video with a play button and three product cards below. Usage: https://kliping.pro/llms/blocks/ecommerce-05.md
- [ecommerce-06](https://kliping.pro/r/ecommerce-06.json): Three-column luxury bag detail page with thumbnails, a main image, and info in collapsible panels. Usage: https://kliping.pro/llms/blocks/ecommerce-06.md
- [ecommerce-07](https://kliping.pro/r/ecommerce-07.json): Empty shopping cart with a centered illustration and a back to shop button. Usage: https://kliping.pro/llms/blocks/ecommerce-07.md
- [ecommerce-08](https://kliping.pro/r/ecommerce-08.json): Grid of three image promo cards with one wide banner below. Usage: https://kliping.pro/llms/blocks/ecommerce-08.md
- [ecommerce-09](https://kliping.pro/r/ecommerce-09.json): Large room photo with product hotspots and a vase card with a quantity selector on the right. Usage: https://kliping.pro/llms/blocks/ecommerce-09.md
- [ecommerce-10](https://kliping.pro/r/ecommerce-10.json): Order details with product info, address, a vertical status timeline, and a cost summary. Usage: https://kliping.pro/llms/blocks/ecommerce-10.md
- [ecommerce-11](https://kliping.pro/r/ecommerce-11.json): Order history with an order info card and a product table with Delivered status. Usage: https://kliping.pro/llms/blocks/ecommerce-11.md
- [ecommerce-12](https://kliping.pro/r/ecommerce-12.json): Product description with a breadcrumb, thumbnail gallery, color and size selects, and features. Usage: https://kliping.pro/llms/blocks/ecommerce-12.md
- [ecommerce-13](https://kliping.pro/r/ecommerce-13.json): Product detail with an arrow-navigated image carousel and centered info with size options. Usage: https://kliping.pro/llms/blocks/ecommerce-13.md
- [ecommerce-14](https://kliping.pro/r/ecommerce-14.json): Four-column product listing with filter and sort selects and favorite buttons. Usage: https://kliping.pro/llms/blocks/ecommerce-14.md
- [ecommerce-15](https://kliping.pro/r/ecommerce-15.json): Two-panel promo card with a dot-navigated product showcase and a captioned hero photo. Usage: https://kliping.pro/llms/blocks/ecommerce-15.md
- [ecommerce-16](https://kliping.pro/r/ecommerce-16.json): Shopping cart in a large card with item quantity selectors and a sticky order summary. Usage: https://kliping.pro/llms/blocks/ecommerce-16.md
- [ecommerce-17](https://kliping.pro/r/ecommerce-17.json): Simple two-column product detail with an extra info accordion and two similar item cards. Usage: https://kliping.pro/llms/blocks/ecommerce-17.md

### Empty State (4)

- [empty-state-01](https://kliping.pro/r/empty-state-01.json): An empty state card with an icon and an add button. Usage: https://kliping.pro/llms/blocks/empty-state-01.md
- [empty-state-02](https://kliping.pro/r/empty-state-02.json): An empty state with a dashed border. Usage: https://kliping.pro/llms/blocks/empty-state-02.md
- [empty-state-03](https://kliping.pro/r/empty-state-03.json): A tabbed empty state with suggested content. Usage: https://kliping.pro/llms/blocks/empty-state-03.md
- [empty-state-04](https://kliping.pro/r/empty-state-04.json): An empty state with a scrolling marquee of placeholder rows. Usage: https://kliping.pro/llms/blocks/empty-state-04.md

### FAQ (20)

- [faq-01](https://kliping.pro/r/faq-01.json): A plain full-width single-column FAQ accordion. Usage: https://kliping.pro/llms/blocks/faq-01.md
- [faq-02](https://kliping.pro/r/faq-02.json): A compact FAQ accordion with a short heading above. Usage: https://kliping.pro/llms/blocks/faq-02.md
- [faq-03](https://kliping.pro/r/faq-03.json): FAQ with a heading on the left and a plus-icon accordion on the right. Usage: https://kliping.pro/llms/blocks/faq-03.md
- [faq-04](https://kliping.pro/r/faq-04.json): FAQ as a grid of icon cards instead of an accordion, with all answers visible. Usage: https://kliping.pro/llms/blocks/faq-04.md
- [faq-05](https://kliping.pro/r/faq-05.json): FAQ as a two-column grid of icon cards with a badge above. Usage: https://kliping.pro/llms/blocks/faq-05.md
- [faq-06](https://kliping.pro/r/faq-06.json): A bordered FAQ accordion with plus icons as triggers. Usage: https://kliping.pro/llms/blocks/faq-06.md
- [faq-07](https://kliping.pro/r/faq-07.json): A tightly bordered FAQ accordion where each item is its own card. Usage: https://kliping.pro/llms/blocks/faq-07.md
- [faq-08](https://kliping.pro/r/faq-08.json): A centered FAQ accordion with a large heading. Usage: https://kliping.pro/llms/blocks/faq-08.md
- [faq-09](https://kliping.pro/r/faq-09.json): A centered FAQ accordion with an icon for each question. Usage: https://kliping.pro/llms/blocks/faq-09.md
- [faq-10](https://kliping.pro/r/faq-10.json): FAQ with a heading and call to action on the left and an icon accordion on the right. Usage: https://kliping.pro/llms/blocks/faq-10.md
- [faq-11](https://kliping.pro/r/faq-11.json): A divided FAQ accordion with a contact us call to action below. Usage: https://kliping.pro/llms/blocks/faq-11.md
- [faq-12](https://kliping.pro/r/faq-12.json): FAQ as a two-column grid of icon Q&A cards, all answers visible. Usage: https://kliping.pro/llms/blocks/faq-12.md
- [faq-13](https://kliping.pro/r/faq-13.json): FAQ as two-column Q&A cards with star ratings. Usage: https://kliping.pro/llms/blocks/faq-13.md
- [faq-14](https://kliping.pro/r/faq-14.json): A divided FAQ accordion with a conversational heading. Usage: https://kliping.pro/llms/blocks/faq-14.md
- [faq-15](https://kliping.pro/r/faq-15.json): FAQ with the heading in the left column and four question cards in a two-column grid on the right. Usage: https://kliping.pro/llms/blocks/faq-15.md
- [faq-16](https://kliping.pro/r/faq-16.json): Three FAQ cards with square primary icons and a help call to action below. Usage: https://kliping.pro/llms/blocks/faq-16.md
- [faq-17](https://kliping.pro/r/faq-17.json): Grid of six FAQ cards with round primary icons and no call to action. Usage: https://kliping.pro/llms/blocks/faq-17.md
- [faq-18](https://kliping.pro/r/faq-18.json): Grid of six FAQ cards without icons and a help call to action below. Usage: https://kliping.pro/llms/blocks/faq-18.md
- [faq-19](https://kliping.pro/r/faq-19.json): Five questions in a centered single-column FAQ accordion. Usage: https://kliping.pro/llms/blocks/faq-19.md
- [faq-20](https://kliping.pro/r/faq-20.json): Two static FAQ questions with a divider below the heading. Usage: https://kliping.pro/llms/blocks/faq-20.md

### Features (18)

- [features-01](https://kliping.pro/r/features-01.json): Six icon features in a bordered three-column grid. Usage: https://kliping.pro/llms/blocks/features-01.md
- [features-02](https://kliping.pro/r/features-02.json): Centered image features without icons. Usage: https://kliping.pro/llms/blocks/features-02.md
- [features-03](https://kliping.pro/r/features-03.json): Two wide feature cards side by side with buttons. Usage: https://kliping.pro/llms/blocks/features-03.md
- [features-04](https://kliping.pro/r/features-04.json): Accordion feature list beside an image panel. Usage: https://kliping.pro/llms/blocks/features-04.md
- [features-05](https://kliping.pro/r/features-05.json): Six icon feature cards in three columns. Usage: https://kliping.pro/llms/blocks/features-05.md
- [features-06](https://kliping.pro/r/features-06.json): Two columns of plain features without borders or icons. Usage: https://kliping.pro/llms/blocks/features-06.md
- [features-07](https://kliping.pro/r/features-07.json): Icon features with a supporting image in each cell. Usage: https://kliping.pro/llms/blocks/features-07.md
- [features-08](https://kliping.pro/r/features-08.json): Six icon features in a grid with divider lines. Usage: https://kliping.pro/llms/blocks/features-08.md
- [features-09](https://kliping.pro/r/features-09.json): Six icon features with tight, gapless borders. Usage: https://kliping.pro/llms/blocks/features-09.md
- [features-10](https://kliping.pro/r/features-10.json): Icon feature cards with a button on each card. Usage: https://kliping.pro/llms/blocks/features-10.md
- [features-11](https://kliping.pro/r/features-11.json): Icon features with an arrow link in each cell. Usage: https://kliping.pro/llms/blocks/features-11.md
- [features-12](https://kliping.pro/r/features-12.json): A bento grid of icon features with cells of varying sizes. Usage: https://kliping.pro/llms/blocks/features-12.md
- [features-13](https://kliping.pro/r/features-13.json): Six tightly packed icon features with borders merged into a single grid. Usage: https://kliping.pro/llms/blocks/features-13.md
- [features-14](https://kliping.pro/r/features-14.json): Single-column features with a long heading and a call-to-action button. Usage: https://kliping.pro/llms/blocks/features-14.md
- [features-15](https://kliping.pro/r/features-15.json): Image features alternating between left and right. Usage: https://kliping.pro/llms/blocks/features-15.md
- [features-16](https://kliping.pro/r/features-16.json): Image features in bordered cards across three columns. Usage: https://kliping.pro/llms/blocks/features-16.md
- [features-17](https://kliping.pro/r/features-17.json): Icon features with a badge and star ratings. Usage: https://kliping.pro/llms/blocks/features-17.md
- [features-18](https://kliping.pro/r/features-18.json): Icon features for a product page with a button below. Usage: https://kliping.pro/llms/blocks/features-18.md

### Footer (22)

- [footer-01](https://kliping.pro/r/footer-01.json): Footer with six link columns and a logo and copyright below. Usage: https://kliping.pro/llms/blocks/footer-01.md
- [footer-02](https://kliping.pro/r/footer-02.json): Footer with seven link columns and a divider before the copyright row. Usage: https://kliping.pro/llms/blocks/footer-02.md
- [footer-03](https://kliping.pro/r/footer-03.json): Footer with link columns and an email subscription box. Usage: https://kliping.pro/llms/blocks/footer-03.md
- [footer-04](https://kliping.pro/r/footer-04.json): Compact footer with email subscription and social media icons. Usage: https://kliping.pro/llms/blocks/footer-04.md
- [footer-05](https://kliping.pro/r/footer-05.json): Two-row footer with links on top and copyright below. Usage: https://kliping.pro/llms/blocks/footer-05.md
- [footer-06](https://kliping.pro/r/footer-06.json): The most compact single-row footer. Usage: https://kliping.pro/llms/blocks/footer-06.md
- [footer-07](https://kliping.pro/r/footer-07.json): Footer with a large logo and a row of links below. Usage: https://kliping.pro/llms/blocks/footer-07.md
- [footer-08](https://kliping.pro/r/footer-08.json): Single-row footer with copyright and four small social icons. Usage: https://kliping.pro/llms/blocks/footer-08.md
- [footer-09](https://kliping.pro/r/footer-09.json): Footer with three link columns on the left and an email subscription form with a checkbox on the right. Usage: https://kliping.pro/llms/blocks/footer-09.md
- [footer-10](https://kliping.pro/r/footer-10.json): Footer with a top border, copyright, four links, and a Sign in button. Usage: https://kliping.pro/llms/blocks/footer-10.md
- [footer-11](https://kliping.pro/r/footer-11.json): Footer with a primary-colored newsletter card above a row of links and social icons. Usage: https://kliping.pro/llms/blocks/footer-11.md
- [footer-12](https://kliping.pro/r/footer-12.json): Dark footer with four link columns, language and currency selects, and a newsletter. Usage: https://kliping.pro/llms/blocks/footer-12.md
- [footer-13](https://kliping.pro/r/footer-13.json): Footer with brand, tagline, and social icons on the left and four link columns on the right. Usage: https://kliping.pro/llms/blocks/footer-13.md
- [footer-14](https://kliping.pro/r/footer-14.json): Footer with links and copyright on the left and a settings icon and country select with flags on the right. Usage: https://kliping.pro/llms/blocks/footer-14.md
- [footer-15](https://kliping.pro/r/footer-15.json): Compact footer with copyright, a version badge, and a settings icon button. Usage: https://kliping.pro/llms/blocks/footer-15.md
- [footer-16](https://kliping.pro/r/footer-16.json): Footer with a new feature announcement and Upgrade button on the left, links and copyright on the right. Usage: https://kliping.pro/llms/blocks/footer-16.md
- [footer-17](https://kliping.pro/r/footer-17.json): Footer with six centered bold links and copyright below. Usage: https://kliping.pro/llms/blocks/footer-17.md
- [footer-18](https://kliping.pro/r/footer-18.json): Footer with brand and tagline on the left, three link columns, and a quote and copyright above a top border. Usage: https://kliping.pro/llms/blocks/footer-18.md
- [footer-19](https://kliping.pro/r/footer-19.json): Single-row footer with five bold links and copyright text. Usage: https://kliping.pro/llms/blocks/footer-19.md
- [footer-20](https://kliping.pro/r/footer-20.json): Footer with links, social icons, and copyright stacked and centered. Usage: https://kliping.pro/llms/blocks/footer-20.md
- [footer-21](https://kliping.pro/r/footer-21.json): Dark footer with Google Play and App Store download buttons and social icons. Usage: https://kliping.pro/llms/blocks/footer-21.md
- [footer-22](https://kliping.pro/r/footer-22.json): Footer with brand and links on the left and a two-line quote and social icons aligned right. Usage: https://kliping.pro/llms/blocks/footer-22.md

### Forms (1)

- [software-purchase-01](https://kliping.pro/r/software-purchase-01.json): A two-column software purchase request details view with an Approve/Discard approval card. Usage: https://kliping.pro/llms/blocks/software-purchase-01.md

### Hero (8)

- [hero-01](https://kliping.pro/r/hero-01.json): A centered hero section with a blurred gradient background. Usage: https://kliping.pro/llms/blocks/hero-01.md
- [hero-02](https://kliping.pro/r/hero-02.json): A two-column hero section with a media slot on the right. Usage: https://kliping.pro/llms/blocks/hero-02.md
- [hero-03](https://kliping.pro/r/hero-03.json): A hero section with a pill navbar, gradient heading, and an outlined product preview. Usage: https://kliping.pro/llms/blocks/hero-03.md
- [hero-04](https://kliping.pro/r/hero-04.json): A two-column hero section with full-viewport-height media on the right. Usage: https://kliping.pro/llms/blocks/hero-04.md
- [hero-05](https://kliping.pro/r/hero-05.json): A two-column hero section with media bleeding to the edge of the screen. Usage: https://kliping.pro/llms/blocks/hero-05.md
- [hero-06](https://kliping.pro/r/hero-06.json): A centered hero section with a dot background and particles that avoid the cursor. Usage: https://kliping.pro/llms/blocks/hero-06.md
- [hero-07](https://kliping.pro/r/hero-07.json): A centered hero section with a grid of squares that light up in turn. Usage: https://kliping.pro/llms/blocks/hero-07.md
- [hero-08](https://kliping.pro/r/hero-08.json): A hero section with an underlined navbar and a row of customer logos. Usage: https://kliping.pro/llms/blocks/hero-08.md

### Integrations (5)

- [integrations-01](https://kliping.pro/r/integrations-01.json): Grid of integration cards with logos and connect buttons. Usage: https://kliping.pro/llms/blocks/integrations-01.md
- [integrations-02](https://kliping.pro/r/integrations-02.json): Integrations list indicating which ones are already connected. Usage: https://kliping.pro/llms/blocks/integrations-02.md
- [integrations-03](https://kliping.pro/r/integrations-03.json): Grid of integration cards with a status badge on each card. Usage: https://kliping.pro/llms/blocks/integrations-03.md
- [integrations-04](https://kliping.pro/r/integrations-04.json): Display-only grid of integration logos without buttons. Usage: https://kliping.pro/llms/blocks/integrations-04.md
- [integrations-05](https://kliping.pro/r/integrations-05.json): Tightly bordered grid of integration logos. Usage: https://kliping.pro/llms/blocks/integrations-05.md

### Invite Member (3)

- [invite-member-01](https://kliping.pro/r/invite-member-01.json): Invite member dialog with an email input and role selection. Usage: https://kliping.pro/llms/blocks/invite-member-01.md
- [invite-member-02](https://kliping.pro/r/invite-member-02.json): Invite panel with a list of members who have already joined. Usage: https://kliping.pro/llms/blocks/invite-member-02.md
- [invite-member-03](https://kliping.pro/r/invite-member-03.json): Invite via a shareable link instead of email. Usage: https://kliping.pro/llms/blocks/invite-member-03.md

### Keyboard Shortcuts (4)

- [keyboard-shortcuts-01](https://kliping.pro/r/keyboard-shortcuts-01.json): Keyboard shortcuts list in a card with divider lines. Usage: https://kliping.pro/llms/blocks/keyboard-shortcuts-01.md
- [keyboard-shortcuts-02](https://kliping.pro/r/keyboard-shortcuts-02.json): Keyboard shortcuts grouped by section in bordered cards. Usage: https://kliping.pro/llms/blocks/keyboard-shortcuts-02.md
- [keyboard-shortcuts-03](https://kliping.pro/r/keyboard-shortcuts-03.json): Keyboard shortcuts in masonry columns. Usage: https://kliping.pro/llms/blocks/keyboard-shortcuts-03.md
- [keyboard-shortcuts-04](https://kliping.pro/r/keyboard-shortcuts-04.json): Keyboard shortcuts in two tightly bordered columns. Usage: https://kliping.pro/llms/blocks/keyboard-shortcuts-04.md

### Login (8)

- [login-06](https://kliping.pro/r/login-06.json): Login card on a grid background with a Google button. Usage: https://kliping.pro/llms/blocks/login-06.md
- [login-07](https://kliping.pro/r/login-07.json): Bordered login card with a separator between sign-in methods. Usage: https://kliping.pro/llms/blocks/login-07.md
- [login-08](https://kliping.pro/r/login-08.json): Two-column login page with an image on the right. Usage: https://kliping.pro/llms/blocks/login-08.md
- [login-09](https://kliping.pro/r/login-09.json): Login page with a full image behind the form. Usage: https://kliping.pro/llms/blocks/login-09.md
- [login-10](https://kliping.pro/r/login-10.json): Two-column login page with a product description beside it. Usage: https://kliping.pro/llms/blocks/login-10.md
- [login-11](https://kliping.pro/r/login-11.json): Login page with a navigation bar above it. Usage: https://kliping.pro/llms/blocks/login-11.md
- [login-12](https://kliping.pro/r/login-12.json): Two-column login page with a testimonial on the image side. Usage: https://kliping.pro/llms/blocks/login-12.md
- [login-13](https://kliping.pro/r/login-13.json): Full login page with navigation and a footer. Usage: https://kliping.pro/llms/blocks/login-13.md

### Logo Cloud (15)

- [logo-cloud-01](https://kliping.pro/r/logo-cloud-01.json): A single row of logos with a short heading above. Usage: https://kliping.pro/llms/blocks/logo-cloud-01.md
- [logo-cloud-02](https://kliping.pro/r/logo-cloud-02.json): A tight row of logos centered on the page, without a heading. Usage: https://kliping.pro/llms/blocks/logo-cloud-02.md
- [logo-cloud-03](https://kliping.pro/r/logo-cloud-03.json): A bordered logo grid with a call to action beside it. Usage: https://kliping.pro/llms/blocks/logo-cloud-03.md
- [logo-cloud-04](https://kliping.pro/r/logo-cloud-04.json): A spacious four-column logo grid. Usage: https://kliping.pro/llms/blocks/logo-cloud-04.md
- [logo-cloud-05](https://kliping.pro/r/logo-cloud-05.json): A bordered logo grid where each cell has its own box. Usage: https://kliping.pro/llms/blocks/logo-cloud-05.md
- [logo-cloud-06](https://kliping.pro/r/logo-cloud-06.json): A single lane of logos scrolling in an infinite marquee. Usage: https://kliping.pro/llms/blocks/logo-cloud-06.md
- [logo-cloud-07](https://kliping.pro/r/logo-cloud-07.json): Two lanes of logos scrolling in opposite directions. Usage: https://kliping.pro/llms/blocks/logo-cloud-07.md
- [logo-cloud-08](https://kliping.pro/r/logo-cloud-08.json): A logo grid with a heading and description above it. Usage: https://kliping.pro/llms/blocks/logo-cloud-08.md
- [logo-cloud-09](https://kliping.pro/r/logo-cloud-09.json): A tight logo grid with no gap between cells. Usage: https://kliping.pro/llms/blocks/logo-cloud-09.md
- [logo-cloud-10](https://kliping.pro/r/logo-cloud-10.json): A scrolling logo marquee with edges that fade out on the left and right. Usage: https://kliping.pro/llms/blocks/logo-cloud-10.md
- [logo-cloud-11](https://kliping.pro/r/logo-cloud-11.json): A bordered logo grid whose cells merge into a single board. Usage: https://kliping.pro/llms/blocks/logo-cloud-11.md
- [logo-cloud-12](https://kliping.pro/r/logo-cloud-12.json): A logo grid with the heading on the left. Usage: https://kliping.pro/llms/blocks/logo-cloud-12.md
- [logo-cloud-13](https://kliping.pro/r/logo-cloud-13.json): A full-width single-lane logo marquee with no gap between logos. Usage: https://kliping.pro/llms/blocks/logo-cloud-13.md
- [logo-cloud-14](https://kliping.pro/r/logo-cloud-14.json): A logo row with a call to action and an arrow link below it. Usage: https://kliping.pro/llms/blocks/logo-cloud-14.md
- [logo-cloud-15](https://kliping.pro/r/logo-cloud-15.json): A scrolling logo marquee inside a card with a glowing border. Usage: https://kliping.pro/llms/blocks/logo-cloud-15.md

### Members (3)

- [members-01](https://kliping.pro/r/members-01.json): A team members table with a role icon on each row. Usage: https://kliping.pro/llms/blocks/members-01.md
- [members-02](https://kliping.pro/r/members-02.json): A team members table with a manage button on each row. Usage: https://kliping.pro/llms/blocks/members-02.md
- [members-03](https://kliping.pro/r/members-03.json): A grid of team member cards with photos. Usage: https://kliping.pro/llms/blocks/members-03.md

### Modals (11)

- [modals-01](https://kliping.pro/r/modals-01.json): A reset-settings warning modal with a text confirmation input. Usage: https://kliping.pro/llms/blocks/modals-01.md
- [modals-02](https://kliping.pro/r/modals-02.json): An edit profile modal with inputs, a profession select, a checkbox, and notification radio options. Usage: https://kliping.pro/llms/blocks/modals-02.md
- [modals-03](https://kliping.pro/r/modals-03.json): An invite team members modal with email input, a member list, and access permissions. Usage: https://kliping.pro/llms/blocks/modals-03.md
- [modals-04](https://kliping.pro/r/modals-04.json): An update product modal with a three-image gallery, form fields, a select, and a textarea. Usage: https://kliping.pro/llms/blocks/modals-04.md
- [modals-05](https://kliping.pro/r/modals-05.json): A file upload modal with a drag-and-drop area and a list of uploaded files. Usage: https://kliping.pro/llms/blocks/modals-05.md
- [modals-06](https://kliping.pro/r/modals-06.json): A publish collection modal with an unlocked padlock icon and a metadata card. Usage: https://kliping.pro/llms/blocks/modals-06.md
- [modals-07](https://kliping.pro/r/modals-07.json): A compact collection visibility settings modal with a destructive button. Usage: https://kliping.pro/llms/blocks/modals-07.md
- [modals-08](https://kliping.pro/r/modals-08.json): A disable lock rule modal with a warning card and a list of consequences. Usage: https://kliping.pro/llms/blocks/modals-08.md
- [modals-09](https://kliping.pro/r/modals-09.json): A transfer ownership modal with an owner select, a handle input, and a yellow warning. Usage: https://kliping.pro/llms/blocks/modals-09.md
- [modals-10](https://kliping.pro/r/modals-10.json): A permanently delete archive modal with a review card and a list of action effects. Usage: https://kliping.pro/llms/blocks/modals-10.md
- [modals-11](https://kliping.pro/r/modals-11.json): A delete vault modal that requires typing the collection identifier to confirm. Usage: https://kliping.pro/llms/blocks/modals-11.md

### Navbar (5)

- [navbar-01](https://kliping.pro/r/navbar-01.json): A full-width navigation bar with a slide-out menu on small screens. Usage: https://kliping.pro/llms/blocks/navbar-01.md
- [navbar-02](https://kliping.pro/r/navbar-02.json): A navigation bar with a centered logo. Usage: https://kliping.pro/llms/blocks/navbar-02.md
- [navbar-03](https://kliping.pro/r/navbar-03.json): A navigation bar with nested dropdown menus. Usage: https://kliping.pro/llms/blocks/navbar-03.md
- [navbar-04](https://kliping.pro/r/navbar-04.json): A floating pill-shaped navigation bar. Usage: https://kliping.pro/llms/blocks/navbar-04.md
- [navbar-05](https://kliping.pro/r/navbar-05.json): A bordered navigation bar with two buttons on the right. Usage: https://kliping.pro/llms/blocks/navbar-05.md

### Not Found (8)

- [not-found-01](https://kliping.pro/r/not-found-01.json): A plain centered 404 page with two buttons. Usage: https://kliping.pro/llms/blocks/not-found-01.md
- [not-found-02](https://kliping.pro/r/not-found-02.json): A 404 page with a list of pages the visitor may be looking for. Usage: https://kliping.pro/llms/blocks/not-found-02.md
- [not-found-03](https://kliping.pro/r/not-found-03.json): A two-column 404 page with a dark panel showing colored numbers. Usage: https://kliping.pro/llms/blocks/not-found-03.md
- [not-found-04](https://kliping.pro/r/not-found-04.json): A 404 page with a search box. Usage: https://kliping.pro/llms/blocks/not-found-04.md
- [not-found-05](https://kliping.pro/r/not-found-05.json): A minimal 404 page with one icon, one heading, and one button. Usage: https://kliping.pro/llms/blocks/not-found-05.md
- [not-found-06](https://kliping.pro/r/not-found-06.json): A 404 page with a grid of suggested destination cards. Usage: https://kliping.pro/llms/blocks/not-found-06.md
- [not-found-07](https://kliping.pro/r/not-found-07.json): A 404 page with numbers that glitch like a broken signal. Usage: https://kliping.pro/llms/blocks/not-found-07.md
- [not-found-08](https://kliping.pro/r/not-found-08.json): A 404 page with giant faded numbers in the background. Usage: https://kliping.pro/llms/blocks/not-found-08.md

### Order Confirmation (2)

- [order-confirmation-01](https://kliping.pro/r/order-confirmation-01.json): A compact order confirmation with the order number and a track order button. Usage: https://kliping.pro/llms/blocks/order-confirmation-01.md
- [order-confirmation-02](https://kliping.pro/r/order-confirmation-02.json): A detailed order confirmation with itemized products and images. Usage: https://kliping.pro/llms/blocks/order-confirmation-02.md

### Other (2)

- [products-01](https://kliping.pro/r/products-01.json): A product list page with a data table, filters, and bulk actions. Usage: https://kliping.pro/llms/blocks/products-01.md
- [sidebar-demo](https://kliping.pro/r/sidebar-demo.json): A complete sidebar example showing all of its parts at once. Usage: https://kliping.pro/llms/blocks/sidebar-demo.md

### Pricing (18)

- [pricing-01](https://kliping.pro/r/pricing-01.json): A pricing section with three plans side by side and checkmark feature lists. Usage: https://kliping.pro/llms/blocks/pricing-01.md
- [pricing-02](https://kliping.pro/r/pricing-02.json): A pricing section with three plans and a most popular badge. Usage: https://kliping.pro/llms/blocks/pricing-02.md
- [pricing-03](https://kliping.pro/r/pricing-03.json): A pricing section with three plans and a monthly/yearly tab that animates the price change. Usage: https://kliping.pro/llms/blocks/pricing-03.md
- [pricing-04](https://kliping.pro/r/pricing-04.json): A pricing section with three plans, billing tabs, and a tooltip explaining each feature. Usage: https://kliping.pro/llms/blocks/pricing-04.md
- [pricing-05](https://kliping.pro/r/pricing-05.json): A pricing section with three plans where the middle plan is raised. Usage: https://kliping.pro/llms/blocks/pricing-05.md
- [pricing-06](https://kliping.pro/r/pricing-06.json): A pricing section with three tightly bordered plans merged into a single board. Usage: https://kliping.pro/llms/blocks/pricing-06.md
- [pricing-07](https://kliping.pro/r/pricing-07.json): Pricing cards with plan icons, billing tabs, and animated prices. Usage: https://kliping.pro/llms/blocks/pricing-07.md
- [pricing-08](https://kliping.pro/r/pricing-08.json): Pricing cards with a star rating below them. Usage: https://kliping.pro/llms/blocks/pricing-08.md
- [pricing-09](https://kliping.pro/r/pricing-09.json): Pricing cards with a light beam running along the border of the featured plan. Usage: https://kliping.pro/llms/blocks/pricing-09.md
- [pricing-10](https://kliping.pro/r/pricing-10.json): A single pricing plan for a fixed-price product. Usage: https://kliping.pro/llms/blocks/pricing-10.md
- [pricing-11](https://kliping.pro/r/pricing-11.json): A pricing section with three plans, a monthly/yearly tab, a save 20% badge, and a highlighted middle plan. Usage: https://kliping.pro/llms/blocks/pricing-11.md
- [pricing-12](https://kliping.pro/r/pricing-12.json): A feature comparison table across plans with checkmarks and a sticky plan header row. Usage: https://kliping.pro/llms/blocks/pricing-12.md
- [pricing-13](https://kliping.pro/r/pricing-13.json): Per-seat pricing with a team size slider and a live calculated total. Usage: https://kliping.pro/llms/blocks/pricing-13.md
- [pricing-14](https://kliping.pro/r/pricing-14.json): A single main pricing card with a feature list, FAQ-style notes, and an enterprise contact banner. Usage: https://kliping.pro/llms/blocks/pricing-14.md
- [pricing-15](https://kliping.pro/r/pricing-15.json): A plan picker with radio rows, a summary panel, and a checkout button. Usage: https://kliping.pro/llms/blocks/pricing-15.md
- [pricing-16](https://kliping.pro/r/pricing-16.json): Volume-based tiered pricing with a small tier table and a cost estimate input. Usage: https://kliping.pro/llms/blocks/pricing-16.md
- [pricing-17](https://kliping.pro/r/pricing-17.json): Four compact plans in a grid with a USD/EUR/IDR currency switcher that updates prices instantly. Usage: https://kliping.pro/llms/blocks/pricing-17.md
- [pricing-18](https://kliping.pro/r/pricing-18.json): Two plans side by side, Free and Pro, with a most popular ribbon and a row of testimonials. Usage: https://kliping.pro/llms/blocks/pricing-18.md

### Profile (4)

- [profile-01](https://kliping.pro/r/profile-01.json): A compact profile card with an avatar and an edit button. Usage: https://kliping.pro/llms/blocks/profile-01.md
- [profile-02](https://kliping.pro/r/profile-02.json): A profile with a cover image above the avatar. Usage: https://kliping.pro/llms/blocks/profile-02.md
- [profile-03](https://kliping.pro/r/profile-03.json): A tabbed profile separating personal details and settings. Usage: https://kliping.pro/llms/blocks/profile-03.md
- [profile-04](https://kliping.pro/r/profile-04.json): A two-column tabbed profile with a form beside it. Usage: https://kliping.pro/llms/blocks/profile-04.md

### Setup Guide (4)

- [setup-guide-01](https://kliping.pro/r/setup-guide-01.json): A setup guide with a divided step list and completed badges. Usage: https://kliping.pro/llms/blocks/setup-guide-01.md
- [setup-guide-02](https://kliping.pro/r/setup-guide-02.json): A setup guide with each step in its own separate card. Usage: https://kliping.pro/llms/blocks/setup-guide-02.md
- [setup-guide-03](https://kliping.pro/r/setup-guide-03.json): A setup guide with a numbered step list and checkmarks on completion. Usage: https://kliping.pro/llms/blocks/setup-guide-03.md
- [setup-guide-04](https://kliping.pro/r/setup-guide-04.json): A compact setup guide step list with status indicators only, no buttons. Usage: https://kliping.pro/llms/blocks/setup-guide-04.md

### Sidebar (16)

- [sidebar-01](https://kliping.pro/r/sidebar-01.json): A simple sidebar with navigation grouped by section. Usage: https://kliping.pro/llms/blocks/sidebar-01.md
- [sidebar-02](https://kliping.pro/r/sidebar-02.json): A sidebar with collapsible sections. Usage: https://kliping.pro/llms/blocks/sidebar-02.md
- [sidebar-03](https://kliping.pro/r/sidebar-03.json): A sidebar with submenus. Usage: https://kliping.pro/llms/blocks/sidebar-03.md
- [sidebar-04](https://kliping.pro/r/sidebar-04.json): A floating sidebar with submenus. Usage: https://kliping.pro/llms/blocks/sidebar-04.md
- [sidebar-05](https://kliping.pro/r/sidebar-05.json): A sidebar with collapsible submenus. Usage: https://kliping.pro/llms/blocks/sidebar-05.md
- [sidebar-06](https://kliping.pro/r/sidebar-06.json): A sidebar with submenus as dropdowns. Usage: https://kliping.pro/llms/blocks/sidebar-06.md
- [sidebar-07](https://kliping.pro/r/sidebar-07.json): A sidebar that collapses to icons. Usage: https://kliping.pro/llms/blocks/sidebar-07.md
- [sidebar-08](https://kliping.pro/r/sidebar-08.json): An inset sidebar with secondary navigation. Usage: https://kliping.pro/llms/blocks/sidebar-08.md
- [sidebar-09](https://kliping.pro/r/sidebar-09.json): Collapsible nested sidebars. Usage: https://kliping.pro/llms/blocks/sidebar-09.md
- [sidebar-10](https://kliping.pro/r/sidebar-10.json): A sidebar in a popover. Usage: https://kliping.pro/llms/blocks/sidebar-10.md
- [sidebar-11](https://kliping.pro/r/sidebar-11.json): A sidebar with a collapsible file tree. Usage: https://kliping.pro/llms/blocks/sidebar-11.md
- [sidebar-12](https://kliping.pro/r/sidebar-12.json): A sidebar with a calendar. Usage: https://kliping.pro/llms/blocks/sidebar-12.md
- [sidebar-13](https://kliping.pro/r/sidebar-13.json): A sidebar in a dialog. Usage: https://kliping.pro/llms/blocks/sidebar-13.md
- [sidebar-14](https://kliping.pro/r/sidebar-14.json): A sidebar on the right. Usage: https://kliping.pro/llms/blocks/sidebar-14.md
- [sidebar-15](https://kliping.pro/r/sidebar-15.json): A left and a right sidebar at the same time. Usage: https://kliping.pro/llms/blocks/sidebar-15.md
- [sidebar-16](https://kliping.pro/r/sidebar-16.json): A sidebar with a sticky site header. Usage: https://kliping.pro/llms/blocks/sidebar-16.md

### Signup (8)

- [signup-06](https://kliping.pro/r/signup-06.json): A signup card on a grid-pattern background with a Google button. Usage: https://kliping.pro/llms/blocks/signup-06.md
- [signup-07](https://kliping.pro/r/signup-07.json): A bordered signup card with a divider between sign-up methods. Usage: https://kliping.pro/llms/blocks/signup-07.md
- [signup-08](https://kliping.pro/r/signup-08.json): A two-column signup page with an image on the right. Usage: https://kliping.pro/llms/blocks/signup-08.md
- [signup-09](https://kliping.pro/r/signup-09.json): A signup page with a full-bleed image behind the form. Usage: https://kliping.pro/llms/blocks/signup-09.md
- [signup-10](https://kliping.pro/r/signup-10.json): A two-column signup page with a product description beside the form. Usage: https://kliping.pro/llms/blocks/signup-10.md
- [signup-11](https://kliping.pro/r/signup-11.json): A full signup page with a navigation bar on top. Usage: https://kliping.pro/llms/blocks/signup-11.md
- [signup-12](https://kliping.pro/r/signup-12.json): A two-column signup page with a testimonial on the image side. Usage: https://kliping.pro/llms/blocks/signup-12.md
- [signup-13](https://kliping.pro/r/signup-13.json): A complete single-page signup layout with navigation and a footer. Usage: https://kliping.pro/llms/blocks/signup-13.md

### Stats (11)

- [stats-01](https://kliping.pro/r/stats-01.json): A stats section with three large centered numbers and no borders. Usage: https://kliping.pro/llms/blocks/stats-01.md
- [stats-02](https://kliping.pro/r/stats-02.json): A stats section with four tightly packed numbers in one row and no heading. Usage: https://kliping.pro/llms/blocks/stats-02.md
- [stats-03](https://kliping.pro/r/stats-03.json): A stats section with three numbers in separate bordered cards. Usage: https://kliping.pro/llms/blocks/stats-03.md
- [stats-04](https://kliping.pro/r/stats-04.json): A stats section with three numbers in a single merged bordered grid. Usage: https://kliping.pro/llms/blocks/stats-04.md
- [stats-05](https://kliping.pro/r/stats-05.json): A stats section with three numbers and colored icons in gray-background cards. Usage: https://kliping.pro/llms/blocks/stats-05.md
- [stats-06](https://kliping.pro/r/stats-06.json): A stats section with five numbers and icons in an uneven card grid. Usage: https://kliping.pro/llms/blocks/stats-06.md
- [stats-07](https://kliping.pro/r/stats-07.json): A stats section with three centered numbers on a colored block background. Usage: https://kliping.pro/llms/blocks/stats-07.md
- [stats-08](https://kliping.pro/r/stats-08.json): A full-screen-height stats section with three centered numbers. Usage: https://kliping.pro/llms/blocks/stats-08.md
- [stats-09](https://kliping.pro/r/stats-09.json): A stats section with three numbers separated by thin dividers. Usage: https://kliping.pro/llms/blocks/stats-09.md
- [stats-10](https://kliping.pro/r/stats-10.json): A stats section with numbers side by side and a call to action beside them. Usage: https://kliping.pro/llms/blocks/stats-10.md
- [stats-11](https://kliping.pro/r/stats-11.json): A stats section with three numbers inside a rounded gray panel. Usage: https://kliping.pro/llms/blocks/stats-11.md

### Subscription (8)

- [subscription-01](https://kliping.pro/r/subscription-01.json): A multi-step cancel subscription dialog with reason selection, optional feedback, a retention discount offer, and final confirmation. Usage: https://kliping.pro/llms/blocks/subscription-01.md
- [subscription-02](https://kliping.pro/r/subscription-02.json): A cancel subscription card for a settings page with a list of lost features and a pause option as an alternative. Usage: https://kliping.pro/llms/blocks/subscription-02.md
- [subscription-03](https://kliping.pro/r/subscription-03.json): A change plan dialog with a plan list, current plan indicator, monthly or yearly billing, and a price difference summary. Usage: https://kliping.pro/llms/blocks/subscription-03.md
- [subscription-04](https://kliping.pro/r/subscription-04.json): An inline plan switcher card with upgrade or downgrade badges and a summary of when the change takes effect. Usage: https://kliping.pro/llms/blocks/subscription-04.md
- [subscription-05](https://kliping.pro/r/subscription-05.json): A manage subscription page with the current plan and usage, next invoice, payment method, invoice history, and change or cancel actions. Usage: https://kliping.pro/llms/blocks/subscription-05.md
- [subscription-06](https://kliping.pro/r/subscription-06.json): An expiring trial card with days-remaining progress, a countdown, an upgrade button, and a list of data that stays saved. Usage: https://kliping.pro/llms/blocks/subscription-06.md
- [subscription-07](https://kliping.pro/r/subscription-07.json): A proration preview for a plan change showing old and new plans, unused credit, today's charge versus next cycle, and a period timeline. Usage: https://kliping.pro/llms/blocks/subscription-07.md
- [subscription-08](https://kliping.pro/r/subscription-08.json): A limited-time promo dialog with a discount highlight, a countdown, and a short plan comparison table. Usage: https://kliping.pro/llms/blocks/subscription-08.md

### Team (13)

- [team-01](https://kliping.pro/r/team-01.json): A team section with a four-column grid of round photos, names, and titles. Usage: https://kliping.pro/llms/blocks/team-01.md
- [team-02](https://kliping.pro/r/team-02.json): A team section with a grid of square photos and the heading on the left. Usage: https://kliping.pro/llms/blocks/team-02.md
- [team-03](https://kliping.pro/r/team-03.json): A team section with cards that include social media links for each person. Usage: https://kliping.pro/llms/blocks/team-03.md
- [team-04](https://kliping.pro/r/team-04.json): A centered four-column team grid with social media links. Usage: https://kliping.pro/llms/blocks/team-04.md
- [team-05](https://kliping.pro/r/team-05.json): A team section with large photos in four columns and social media links below. Usage: https://kliping.pro/llms/blocks/team-05.md
- [team-06](https://kliping.pro/r/team-06.json): A compact, spacious team grid of round photos without links. Usage: https://kliping.pro/llms/blocks/team-06.md
- [team-07](https://kliping.pro/r/team-07.json): A four-column team grid with a row of social media icons. Usage: https://kliping.pro/llms/blocks/team-07.md
- [team-08](https://kliping.pro/r/team-08.json): A team section with bordered cards containing photos and social media icons. Usage: https://kliping.pro/llms/blocks/team-08.md
- [team-09](https://kliping.pro/r/team-09.json): A team section with tightly bordered cards merged into a single grid. Usage: https://kliping.pro/llms/blocks/team-09.md
- [team-10](https://kliping.pro/r/team-10.json): A team section with a single row of tall photos and a description beside it. Usage: https://kliping.pro/llms/blocks/team-10.md
- [team-11](https://kliping.pro/r/team-11.json): A three-column team grid with rectangular photos. Usage: https://kliping.pro/llms/blocks/team-11.md
- [team-12](https://kliping.pro/r/team-12.json): A team grid with an empty cell as a placeholder for the next member. Usage: https://kliping.pro/llms/blocks/team-12.md
- [team-13](https://kliping.pro/r/team-13.json): The most compact four-column team grid with small photos and names only. Usage: https://kliping.pro/llms/blocks/team-13.md

### Testimonials (30)

- [testimonials-01](https://kliping.pro/r/testimonials-01.json): A masonry testimonials section with avatars and a load more button. Usage: https://kliping.pro/llms/blocks/testimonials-01.md
- [testimonials-02](https://kliping.pro/r/testimonials-02.json): A bordered masonry testimonials section with fading edges. Usage: https://kliping.pro/llms/blocks/testimonials-02.md
- [testimonials-03](https://kliping.pro/r/testimonials-03.json): A plain masonry testimonials section without borders or buttons. Usage: https://kliping.pro/llms/blocks/testimonials-03.md
- [testimonials-04](https://kliping.pro/r/testimonials-04.json): Two lanes of testimonials scrolling in opposite directions. Usage: https://kliping.pro/llms/blocks/testimonials-04.md
- [testimonials-05](https://kliping.pro/r/testimonials-05.json): A three-column testimonials grid with a star rating in each cell. Usage: https://kliping.pro/llms/blocks/testimonials-05.md
- [testimonials-06](https://kliping.pro/r/testimonials-06.json): A single large testimonial card with stars and an avatar. Usage: https://kliping.pro/llms/blocks/testimonials-06.md
- [testimonials-07](https://kliping.pro/r/testimonials-07.json): Testimonials with photos and divider lines between cells. Usage: https://kliping.pro/llms/blocks/testimonials-07.md
- [testimonials-08](https://kliping.pro/r/testimonials-08.json): A two-column tightly bordered testimonials grid with photos. Usage: https://kliping.pro/llms/blocks/testimonials-08.md
- [testimonials-09](https://kliping.pro/r/testimonials-09.json): A masonry testimonials section with photos and stars. Usage: https://kliping.pro/llms/blocks/testimonials-09.md
- [testimonials-10](https://kliping.pro/r/testimonials-10.json): A masonry testimonials section with photos and thicker borders. Usage: https://kliping.pro/llms/blocks/testimonials-10.md
- [testimonials-11](https://kliping.pro/r/testimonials-11.json): Testimonials in a swipeable carousel. Usage: https://kliping.pro/llms/blocks/testimonials-11.md
- [testimonials-12](https://kliping.pro/r/testimonials-12.json): The most compact masonry testimonials section with photos. Usage: https://kliping.pro/llms/blocks/testimonials-12.md
- [testimonials-13](https://kliping.pro/r/testimonials-13.json): A scrolling testimonials marquee inside a bordered card. Usage: https://kliping.pro/llms/blocks/testimonials-13.md
- [testimonials-14](https://kliping.pro/r/testimonials-14.json): Three centered testimonials with round photos and a badge above the heading. Usage: https://kliping.pro/llms/blocks/testimonials-14.md
- [testimonials-15](https://kliping.pro/r/testimonials-15.json): A grid of six tweet-style testimonial cards with verified checkmarks and dates. Usage: https://kliping.pro/llms/blocks/testimonials-15.md
- [testimonials-16](https://kliping.pro/r/testimonials-16.json): Three-column testimonials with a stats row, stars, and quote icons. Usage: https://kliping.pro/llms/blocks/testimonials-16.md
- [testimonials-17](https://kliping.pro/r/testimonials-17.json): Three centered testimonial cards with large photos, a quote badge, and stars. Usage: https://kliping.pro/llms/blocks/testimonials-17.md
- [testimonials-18](https://kliping.pro/r/testimonials-18.json): Three transparent testimonial cards on a black background with avatars and stars. Usage: https://kliping.pro/llms/blocks/testimonials-18.md
- [testimonials-19](https://kliping.pro/r/testimonials-19.json): A client success story with the company logo on the left and a large quote. Usage: https://kliping.pro/llms/blocks/testimonials-19.md
- [testimonials-20](https://kliping.pro/r/testimonials-20.json): An interactive testimonial with a row of avatars that switches the profile and a large photo. Usage: https://kliping.pro/llms/blocks/testimonials-20.md
- [testimonials-21](https://kliping.pro/r/testimonials-21.json): Three card-less testimonials with large avatars, a quote badge, and stars. Usage: https://kliping.pro/llms/blocks/testimonials-21.md
- [testimonials-22](https://kliping.pro/r/testimonials-22.json): A compact customer story with a photo on the left, heading, quote, and avatar logo. Usage: https://kliping.pro/llms/blocks/testimonials-22.md
- [testimonials-23](https://kliping.pro/r/testimonials-23.json): Three testimonials with company logos, a badge above the heading, and Read More links. Usage: https://kliping.pro/llms/blocks/testimonials-23.md
- [testimonials-24](https://kliping.pro/r/testimonials-24.json): Three testimonial cards with stars and the middle card highlighted in the primary color. Usage: https://kliping.pro/llms/blocks/testimonials-24.md
- [testimonials-25](https://kliping.pro/r/testimonials-25.json): A testimonials grid with two columns plus one wide card and grayscale company logos. Usage: https://kliping.pro/llms/blocks/testimonials-25.md
- [testimonials-26](https://kliping.pro/r/testimonials-26.json): A single testimonial in a black card with a logo, large quote, and round avatar. Usage: https://kliping.pro/llms/blocks/testimonials-26.md
- [testimonials-27](https://kliping.pro/r/testimonials-27.json): Three centered testimonial cards with large avatars, names, and titles. Usage: https://kliping.pro/llms/blocks/testimonials-27.md
- [testimonials-28](https://kliping.pro/r/testimonials-28.json): Four columns of three starred testimonial cards and one dashed Add Testimonial card. Usage: https://kliping.pro/llms/blocks/testimonials-28.md
- [testimonials-29](https://kliping.pro/r/testimonials-29.json): A black-background testimonials carousel with company logos, thumbnails, and navigation arrows. Usage: https://kliping.pro/llms/blocks/testimonials-29.md
- [testimonials-30](https://kliping.pro/r/testimonials-30.json): A testimonial slider in a dark photo-background card with a logo, dots, and arrows. Usage: https://kliping.pro/llms/blocks/testimonials-30.md

### Timeline (7)

- [timeline-01](https://kliping.pro/r/timeline-01.json): A one-sided timeline with a date badge on each item. Usage: https://kliping.pro/llms/blocks/timeline-01.md
- [timeline-02](https://kliping.pro/r/timeline-02.json): A bordered timeline with a card on each item. Usage: https://kliping.pro/llms/blocks/timeline-02.md
- [timeline-03](https://kliping.pro/r/timeline-03.json): A work history timeline with icons and a list of technologies. Usage: https://kliping.pro/llms/blocks/timeline-03.md
- [timeline-04](https://kliping.pro/r/timeline-04.json): A borderless work history timeline with a thin line. Usage: https://kliping.pro/llms/blocks/timeline-04.md
- [timeline-05](https://kliping.pro/r/timeline-05.json): A timeline alternating between left and right. Usage: https://kliping.pro/llms/blocks/timeline-05.md
- [timeline-06](https://kliping.pro/r/timeline-06.json): A step-by-step timeline with markers for completed steps. Usage: https://kliping.pro/llms/blocks/timeline-06.md
- [timeline-07](https://kliping.pro/r/timeline-07.json): A versioned release notes timeline with the newest entry on top. Usage: https://kliping.pro/llms/blocks/timeline-07.md

### Usage (7)

- [usage-01](https://kliping.pro/r/usage-01.json): Linear usage meters for multiple resources with an 80% warning state, a 100% limit, and a reset date. Usage: https://kliping.pro/llms/blocks/usage-01.md
- [usage-02](https://kliping.pro/r/usage-02.json): A grid of circular SVG ring usage meters with percentages, plan limits, and a billing cycle picker. Usage: https://kliping.pro/llms/blocks/usage-02.md
- [usage-03](https://kliping.pro/r/usage-03.json): A usage-based pricing calculator with a volume slider, per-tier cost breakdown, and a live monthly estimate. Usage: https://kliping.pro/llms/blocks/usage-03.md
- [usage-04](https://kliping.pro/r/usage-04.json): A compact usage table with resource, used, limit, percentage with a mini bar, and a status badge. Usage: https://kliping.pro/llms/blocks/usage-04.md
- [usage-05](https://kliping.pro/r/usage-05.json): A detailed daily and per-project usage table with collapsible groups, a total row, a period picker, and a CSV export button. Usage: https://kliping.pro/llms/blocks/usage-05.md
- [usage-06](https://kliping.pro/r/usage-06.json): An upcoming invoice breakdown with line items, tax, credits, total, due date, and a billing cycle timeline. Usage: https://kliping.pro/llms/blocks/usage-06.md
- [usage-07](https://kliping.pro/r/usage-07.json): A prepaid credit balance with top-up amount options, auto-recharge, and recent credit transaction history. Usage: https://kliping.pro/llms/blocks/usage-07.md

### Verification (1)

- [verification-01](https://kliping.pro/r/verification-01.json): An email verification page with a resend button. Usage: https://kliping.pro/llms/blocks/verification-01.md

### Web3 (5)

- [web3-01](https://kliping.pro/r/web3-01.json): An NFT pixel art collection section with three token cards showing the owner avatar and profession. Usage: https://kliping.pro/llms/blocks/web3-01.md
- [web3-02](https://kliping.pro/r/web3-02.json): An NFT creator profile with a Follow button and an auction gallery with time badges. Usage: https://kliping.pro/llms/blocks/web3-02.md
- [web3-03](https://kliping.pro/r/web3-03.json): A grid of top crypto auctions with a Select filter, BTC bids, and time remaining. Usage: https://kliping.pro/llms/blocks/web3-03.md
- [web3-04](https://kliping.pro/r/web3-04.json): A trending NFT collection with a full-bleed image background and a dark gradient overlay. Usage: https://kliping.pro/llms/blocks/web3-04.md
- [web3-05](https://kliping.pro/r/web3-05.json): A top NFT creators section with time filter buttons and three collection thumbnails. Usage: https://kliping.pro/llms/blocks/web3-05.md

### Widget (4)

- [widget-01](https://kliping.pro/r/widget-01.json): Focus timer with short breaks, a long break every four sessions, and a soft chime you can mute. Usage: https://kliping.pro/llms/blocks/widget-01.md
- [widget-02](https://kliping.pro/r/widget-02.json): A light one-to-three-minute movement routine with no equipment and a countdown for each move. Usage: https://kliping.pro/llms/blocks/widget-02.md
- [widget-03](https://kliping.pro/r/widget-03.json): Daily water tracker with your own goal, an hourly chart, and an optional gentle reminder. Usage: https://kliping.pro/llms/blocks/widget-03.md
- [widget-04](https://kliping.pro/r/widget-04.json): Morning and evening routine checklist that resets every day, for skincare, stretching, or screen breaks. Usage: https://kliping.pro/llms/blocks/widget-04.md

## Variants (308)

### Accordion (12)

- [accordion-01](https://kliping.pro/r/accordion-01.json): Plain accordion with only one item open at a time. Usage: https://kliping.pro/llms/variants/accordion-01.md
- [accordion-02](https://kliping.pro/r/accordion-02.json): Accordion with each item in its own bordered box, separated by gaps. Usage: https://kliping.pro/llms/variants/accordion-02.md
- [accordion-03](https://kliping.pro/r/accordion-03.json): Accordion with items joined into a single box, divided by separator lines. Usage: https://kliping.pro/llms/variants/accordion-03.md
- [accordion-04](https://kliping.pro/r/accordion-04.json): Accordion with gray-background items, no borders, separated by gaps. Usage: https://kliping.pro/llms/variants/accordion-04.md
- [accordion-05](https://kliping.pro/r/accordion-05.json): Accordion with gray-background items joined into a single block. Usage: https://kliping.pro/llms/variants/accordion-05.md
- [accordion-06](https://kliping.pro/r/accordion-06.json): Accordion whose item background appears only when the item is open. Usage: https://kliping.pro/llms/variants/accordion-06.md
- [accordion-07](https://kliping.pro/r/accordion-07.json): Accordion whose bottom border and title turn indigo when open. Usage: https://kliping.pro/llms/variants/accordion-07.md
- [accordion-08](https://kliping.pro/r/accordion-08.json): Accordion that allows multiple items to be open at the same time. Usage: https://kliping.pro/llms/variants/accordion-08.md
- [accordion-09](https://kliping.pro/r/accordion-09.json): Accordion with a plus icon that rotates into an X when opened. Usage: https://kliping.pro/llms/variants/accordion-09.md
- [accordion-10](https://kliping.pro/r/accordion-10.json): Accordion with icons in the titles and content aligned under the icon. Usage: https://kliping.pro/llms/variants/accordion-10.md
- [accordion-11](https://kliping.pro/r/accordion-11.json): Accordion with content marked by a dashed line connecting to its icon. Usage: https://kliping.pro/llms/variants/accordion-11.md
- [accordion-12](https://kliping.pro/r/accordion-12.json): Accordion with one disabled item that cannot be opened. Usage: https://kliping.pro/llms/variants/accordion-12.md

### Alert (10)

- [alert-01](https://kliping.pro/r/alert-01.json): Default alert with an icon, a title, and a one-line description. Usage: https://kliping.pro/llms/variants/alert-01.md
- [alert-02](https://kliping.pro/r/alert-02.json): Destructive alert for failure messages. Usage: https://kliping.pro/llms/variants/alert-02.md
- [alert-03](https://kliping.pro/r/alert-03.json): Green success alert. Usage: https://kliping.pro/llms/variants/alert-03.md
- [alert-04](https://kliping.pro/r/alert-04.json): Yellow warning alert for things that need consideration first. Usage: https://kliping.pro/llms/variants/alert-04.md
- [alert-05](https://kliping.pro/r/alert-05.json): Sky-blue informational alert. Usage: https://kliping.pro/llms/variants/alert-05.md
- [alert-06](https://kliping.pro/r/alert-06.json): Alert with a gray background and no tone color. Usage: https://kliping.pro/llms/variants/alert-06.md
- [alert-07](https://kliping.pro/r/alert-07.json): Alert with a tinted background and no border, shown in four tones. Usage: https://kliping.pro/llms/variants/alert-07.md
- [alert-08](https://kliping.pro/r/alert-08.json): Alert with a tinted background and a matching border. Usage: https://kliping.pro/llms/variants/alert-08.md
- [alert-09](https://kliping.pro/r/alert-09.json): Alert with a thick left border and no rounded corners. Usage: https://kliping.pro/llms/variants/alert-09.md
- [alert-10](https://kliping.pro/r/alert-10.json): Dismissible alert with a close button that leaves a link to reopen it. Usage: https://kliping.pro/llms/variants/alert-10.md

### Alert Dialog (6)

- [alert-dialog-01](https://kliping.pro/r/alert-dialog-01.json): Default confirmation alert dialog with two buttons at the bottom right. Usage: https://kliping.pro/llms/variants/alert-dialog-01.md
- [alert-dialog-02](https://kliping.pro/r/alert-dialog-02.json): Alert dialog with a danger icon next to the title. Usage: https://kliping.pro/llms/variants/alert-dialog-02.md
- [alert-dialog-03](https://kliping.pro/r/alert-dialog-03.json): Alert dialog with a large icon and all content centered. Usage: https://kliping.pro/llms/variants/alert-dialog-03.md
- [alert-dialog-04](https://kliping.pro/r/alert-dialog-04.json): Alert dialog announcing an update, with a list of new features with icons and a version badge. Usage: https://kliping.pro/llms/variants/alert-dialog-04.md
- [alert-dialog-05](https://kliping.pro/r/alert-dialog-05.json): Alert dialog with the title and close button on one row, separated by a line. Usage: https://kliping.pro/llms/variants/alert-dialog-05.md
- [alert-dialog-06](https://kliping.pro/r/alert-dialog-06.json): Alert dialog with a long description and a learn more link. Usage: https://kliping.pro/llms/variants/alert-dialog-06.md

### Avatar (16)

- [avatar-01](https://kliping.pro/r/avatar-01.json): Default avatar with a photo and initials as the fallback. Usage: https://kliping.pro/llms/variants/avatar-01.md
- [avatar-02](https://kliping.pro/r/avatar-02.json): Clickable avatar that links to the profile. Usage: https://kliping.pro/llms/variants/avatar-02.md
- [avatar-03](https://kliping.pro/r/avatar-03.json): Avatar that shows the name in a tooltip on hover. Usage: https://kliping.pro/llms/variants/avatar-03.md
- [avatar-04](https://kliping.pro/r/avatar-04.json): Avatar with the name and a verified badge beside it. Usage: https://kliping.pro/llms/variants/avatar-04.md
- [avatar-05](https://kliping.pro/r/avatar-05.json): Avatar that shows a short profile card on hover. Usage: https://kliping.pro/llms/variants/avatar-05.md
- [avatar-06](https://kliping.pro/r/avatar-06.json): Avatar in four sizes, from small to large. Usage: https://kliping.pro/llms/variants/avatar-06.md
- [avatar-07](https://kliping.pro/r/avatar-07.json): Avatar with initials on colored backgrounds, in four colors. Usage: https://kliping.pro/llms/variants/avatar-07.md
- [avatar-08](https://kliping.pro/r/avatar-08.json): Avatar in four corner shapes, from square to fully round. Usage: https://kliping.pro/llms/variants/avatar-08.md
- [avatar-09](https://kliping.pro/r/avatar-09.json): Avatar with an icon as the fallback instead of initials. Usage: https://kliping.pro/llms/variants/avatar-09.md
- [avatar-10](https://kliping.pro/r/avatar-10.json): Avatar with a ring and a gap between the ring and the photo. Usage: https://kliping.pro/llms/variants/avatar-10.md
- [avatar-11](https://kliping.pro/r/avatar-11.json): Avatar with a status dot in the corner: online, busy, and offline. Usage: https://kliping.pro/llms/variants/avatar-11.md
- [avatar-12](https://kliping.pro/r/avatar-12.json): Stack of overlapping avatars. Usage: https://kliping.pro/llms/variants/avatar-12.md
- [avatar-13](https://kliping.pro/r/avatar-13.json): Truncated avatar stack with the remainder summarized as a count. Usage: https://kliping.pro/llms/variants/avatar-13.md
- [avatar-14](https://kliping.pro/r/avatar-14.json): Avatar with a small badge at the bottom right corner, in three states. Usage: https://kliping.pro/llms/variants/avatar-14.md
- [avatar-15](https://kliping.pro/r/avatar-15.json): Avatar next to a name and a one-line message. Usage: https://kliping.pro/llms/variants/avatar-15.md
- [avatar-16](https://kliping.pro/r/avatar-16.json): Avatar used as the trigger for an account menu. Usage: https://kliping.pro/llms/variants/avatar-16.md

### Badge (17)

- [badge-01](https://kliping.pro/r/badge-01.json): Default badge with the primary color background. Usage: https://kliping.pro/llms/variants/badge-01.md
- [badge-02](https://kliping.pro/r/badge-02.json): Secondary badge, more subdued than the default. Usage: https://kliping.pro/llms/variants/badge-02.md
- [badge-03](https://kliping.pro/r/badge-03.json): Outline badge with a border and no background. Usage: https://kliping.pro/llms/variants/badge-03.md
- [badge-04](https://kliping.pro/r/badge-04.json): Destructive badge for things that need attention. Usage: https://kliping.pro/llms/variants/badge-04.md
- [badge-05](https://kliping.pro/r/badge-05.json): Badge in three corner shapes, from square to fully round. Usage: https://kliping.pro/llms/variants/badge-05.md
- [badge-06](https://kliping.pro/r/badge-06.json): Badge with a blue-to-indigo gradient background. Usage: https://kliping.pro/llms/variants/badge-06.md
- [badge-07](https://kliping.pro/r/badge-07.json): Badge with a gradient border instead of a gradient background. Usage: https://kliping.pro/llms/variants/badge-07.md
- [badge-08](https://kliping.pro/r/badge-08.json): Badge with a colored status dot before the text. Usage: https://kliping.pro/llms/variants/badge-08.md
- [badge-09](https://kliping.pro/r/badge-09.json): Badge with a status dot and a border matching its background. Usage: https://kliping.pro/llms/variants/badge-09.md
- [badge-10](https://kliping.pro/r/badge-10.json): Badge with a round photo inside, on the left or the right. Usage: https://kliping.pro/llms/variants/badge-10.md
- [badge-11](https://kliping.pro/r/badge-11.json): Badge with arrow and X icons, on the left or the right. Usage: https://kliping.pro/llms/variants/badge-11.md
- [badge-12](https://kliping.pro/r/badge-12.json): Clickable badge rendered as a button. Usage: https://kliping.pro/llms/variants/badge-12.md
- [badge-13](https://kliping.pro/r/badge-13.json): Badge as a link, with a profile photo. Usage: https://kliping.pro/llms/variants/badge-13.md
- [badge-14](https://kliping.pro/r/badge-14.json): Badge with a count inside its own nested badge. Usage: https://kliping.pro/llms/variants/badge-14.md
- [badge-15](https://kliping.pro/r/badge-15.json): Badge attached to menu rows to mark new and beta items. Usage: https://kliping.pro/llms/variants/badge-15.md
- [badge-16](https://kliping.pro/r/badge-16.json): Badge showing a count next to a tab title. Usage: https://kliping.pro/llms/variants/badge-16.md
- [badge-17](https://kliping.pro/r/badge-17.json): Badge attached to the corner of an icon button as a notification counter. Usage: https://kliping.pro/llms/variants/badge-17.md

### Breadcrumb (15)

- [breadcrumb-01](https://kliping.pro/r/breadcrumb-01.json): Default breadcrumb separated by chevron icons. Usage: https://kliping.pro/llms/variants/breadcrumb-01.md
- [breadcrumb-02](https://kliping.pro/r/breadcrumb-02.json): Breadcrumb separated by slashes. Usage: https://kliping.pro/llms/variants/breadcrumb-02.md
- [breadcrumb-03](https://kliping.pro/r/breadcrumb-03.json): Breadcrumb separated by double chevrons. Usage: https://kliping.pro/llms/variants/breadcrumb-03.md
- [breadcrumb-04](https://kliping.pro/r/breadcrumb-04.json): Breadcrumb separated by dots. Usage: https://kliping.pro/llms/variants/breadcrumb-04.md
- [breadcrumb-05](https://kliping.pro/r/breadcrumb-05.json): Breadcrumb with a home icon replacing the first item. Usage: https://kliping.pro/llms/variants/breadcrumb-05.md
- [breadcrumb-06](https://kliping.pro/r/breadcrumb-06.json): Breadcrumb with every level shown as an icon except the last. Usage: https://kliping.pro/llms/variants/breadcrumb-06.md
- [breadcrumb-07](https://kliping.pro/r/breadcrumb-07.json): Breadcrumb with an icon before each item name. Usage: https://kliping.pro/llms/variants/breadcrumb-07.md
- [breadcrumb-08](https://kliping.pro/r/breadcrumb-08.json): Breadcrumb with icons stacked above each item name. Usage: https://kliping.pro/llms/variants/breadcrumb-08.md
- [breadcrumb-09](https://kliping.pro/r/breadcrumb-09.json): Breadcrumb with the whole path inside a single gray-background box. Usage: https://kliping.pro/llms/variants/breadcrumb-09.md
- [breadcrumb-10](https://kliping.pro/r/breadcrumb-10.json): Breadcrumb with the current page marked by a badge. Usage: https://kliping.pro/llms/variants/breadcrumb-10.md
- [breadcrumb-11](https://kliping.pro/r/breadcrumb-11.json): Breadcrumb with every level shaped as a badge. Usage: https://kliping.pro/llms/variants/breadcrumb-11.md
- [breadcrumb-12](https://kliping.pro/r/breadcrumb-12.json): Breadcrumb of outline badges with the active one filled. Usage: https://kliping.pro/llms/variants/breadcrumb-12.md
- [breadcrumb-13](https://kliping.pro/r/breadcrumb-13.json): Breadcrumb with one level as a dropdown menu listing sibling pages. Usage: https://kliping.pro/llms/variants/breadcrumb-13.md
- [breadcrumb-14](https://kliping.pro/r/breadcrumb-14.json): Breadcrumb with a long path collapsed into an expandable ellipsis. Usage: https://kliping.pro/llms/variants/breadcrumb-14.md
- [breadcrumb-15](https://kliping.pro/r/breadcrumb-15.json): Breadcrumb as a step indicator: round icons connected by horizontal lines. Usage: https://kliping.pro/llms/variants/breadcrumb-15.md

### Button (23)

- [button-01](https://kliping.pro/r/button-01.json): Default button with the primary color background. Usage: https://kliping.pro/llms/variants/button-01.md
- [button-02](https://kliping.pro/r/button-02.json): Secondary button, more subdued than the default. Usage: https://kliping.pro/llms/variants/button-02.md
- [button-03](https://kliping.pro/r/button-03.json): Destructive button for actions that are hard to undo. Usage: https://kliping.pro/llms/variants/button-03.md
- [button-04](https://kliping.pro/r/button-04.json): Outline button with a border and no background. Usage: https://kliping.pro/llms/variants/button-04.md
- [button-05](https://kliping.pro/r/button-05.json): Button with an icon on the left or the right of the label. Usage: https://kliping.pro/llms/variants/button-05.md
- [button-06](https://kliping.pro/r/button-06.json): Loading button with a spinner replacing the icon. Usage: https://kliping.pro/llms/variants/button-06.md
- [button-07](https://kliping.pro/r/button-07.json): Split button with the main action on the left and a dropdown menu on the right. Usage: https://kliping.pro/llms/variants/button-07.md
- [button-08](https://kliping.pro/r/button-08.json): Ghost button with no background or border until hovered. Usage: https://kliping.pro/llms/variants/button-08.md
- [button-09](https://kliping.pro/r/button-09.json): Button with a blue-to-indigo gradient background. Usage: https://kliping.pro/llms/variants/button-09.md
- [button-10](https://kliping.pro/r/button-10.json): Button styled as a link, including a disabled state. Usage: https://kliping.pro/llms/variants/button-10.md
- [button-11](https://kliping.pro/r/button-11.json): Round icon buttons for three social networks. Usage: https://kliping.pro/llms/variants/button-11.md
- [button-12](https://kliping.pro/r/button-12.json): Full-width sign-up buttons, one row per provider. Usage: https://kliping.pro/llms/variants/button-12.md
- [button-13](https://kliping.pro/r/button-13.json): Glowing indigo button with a colored shadow beneath it. Usage: https://kliping.pro/llms/variants/button-13.md
- [button-14](https://kliping.pro/r/button-14.json): Button with fully rounded corners. Usage: https://kliping.pro/llms/variants/button-14.md
- [button-15](https://kliping.pro/r/button-15.json): Like button that changes color when pressed. Usage: https://kliping.pro/llms/variants/button-15.md
- [button-16](https://kliping.pro/r/button-16.json): Button that toggles between light and dark themes. Usage: https://kliping.pro/llms/variants/button-16.md
- [button-17](https://kliping.pro/r/button-17.json): Button that fills the width of its container. Usage: https://kliping.pro/llms/variants/button-17.md
- [button-18](https://kliping.pro/r/button-18.json): Button group of three buttons joined together. Usage: https://kliping.pro/llms/variants/button-18.md
- [button-19](https://kliping.pro/r/button-19.json): Vertical button group with up and down buttons. Usage: https://kliping.pro/llms/variants/button-19.md
- [button-20](https://kliping.pro/r/button-20.json): Copy button that switches to a check icon after copying. Usage: https://kliping.pro/llms/variants/button-20.md
- [button-21](https://kliping.pro/r/button-21.json): Icon button with a notification count attached to its corner. Usage: https://kliping.pro/llms/variants/button-21.md
- [button-22](https://kliping.pro/r/button-22.json): Buttons with tooltips on all four sides. Usage: https://kliping.pro/llms/variants/button-22.md
- [button-23](https://kliping.pro/r/button-23.json): Button that shrinks slightly when pressed. Usage: https://kliping.pro/llms/variants/button-23.md

### Card (13)

- [card-01](https://kliping.pro/r/card-01.json): Form card with a title, description, input fields, and two footer buttons. Usage: https://kliping.pro/llms/variants/card-01.md
- [card-02](https://kliping.pro/r/card-02.json): Card with a gray background and no shadow. Usage: https://kliping.pro/llms/variants/card-02.md
- [card-03](https://kliping.pro/r/card-03.json): Sign-up card with a separator and a sign in with Google button. Usage: https://kliping.pro/llms/variants/card-03.md
- [card-04](https://kliping.pro/r/card-04.json): Centered call-to-action card spanning two columns. Usage: https://kliping.pro/llms/variants/card-04.md
- [card-05](https://kliping.pro/r/card-05.json): Pricing plan card with explanatory tooltips beside it. Usage: https://kliping.pro/llms/variants/card-05.md
- [card-06](https://kliping.pro/r/card-06.json): Social media post card with an avatar, an image, and like, comment, and share buttons. Usage: https://kliping.pro/llms/variants/card-06.md
- [card-07](https://kliping.pro/r/card-07.json): Compact card with an icon and one footer button. Usage: https://kliping.pro/llms/variants/card-07.md
- [card-08](https://kliping.pro/r/card-08.json): Testimonial card with a large quotation mark in the background. Usage: https://kliping.pro/llms/variants/card-08.md
- [card-09](https://kliping.pro/r/card-09.json): Plain card with a single paragraph, no title or buttons. Usage: https://kliping.pro/llms/variants/card-09.md
- [card-10](https://kliping.pro/r/card-10.json): Card with a title, description, content, and one footer button. Usage: https://kliping.pro/llms/variants/card-10.md
- [card-11](https://kliping.pro/r/card-11.json): Blog post card with a gradient cover, date, reading time, and a Read More link. Usage: https://kliping.pro/llms/variants/card-11.md
- [card-12](https://kliping.pro/r/card-12.json): Product card with a New badge, star rating, price, and add-to-cart and favorite buttons. Usage: https://kliping.pro/llms/variants/card-12.md
- [card-13](https://kliping.pro/r/card-13.json): Sign-up form card with name, Email, and Password fields and a full-width Sign Up button. Usage: https://kliping.pro/llms/variants/card-13.md

### Carousel (11)

- [carousel-01](https://kliping.pro/r/carousel-01.json): Default carousel showing one item per slide. Usage: https://kliping.pro/llms/variants/carousel-01.md
- [carousel-02](https://kliping.pro/r/carousel-02.json): Carousel showing several items at once, with the count based on screen width. Usage: https://kliping.pro/llms/variants/carousel-02.md
- [carousel-03](https://kliping.pro/r/carousel-03.json): Vertical carousel that slides up and down instead of sideways. Usage: https://kliping.pro/llms/variants/carousel-03.md
- [carousel-04](https://kliping.pro/r/carousel-04.json): Carousel with the slide number written below it. Usage: https://kliping.pro/llms/variants/carousel-04.md
- [carousel-05](https://kliping.pro/r/carousel-05.json): Carousel with the slide number shown as a fraction. Usage: https://kliping.pro/llms/variants/carousel-05.md
- [carousel-06](https://kliping.pro/r/carousel-06.json): Carousel with clickable dot indicators below it. Usage: https://kliping.pro/llms/variants/carousel-06.md
- [carousel-07](https://kliping.pro/r/carousel-07.json): Carousel with the previous and next buttons moved below it, on the left. Usage: https://kliping.pro/llms/variants/carousel-07.md
- [carousel-08](https://kliping.pro/r/carousel-08.json): Carousel with a progress bar below it that advances with each slide. Usage: https://kliping.pro/llms/variants/carousel-08.md
- [carousel-09](https://kliping.pro/r/carousel-09.json): Carousel with a row of thumbnails below it that act as indicator and selector. Usage: https://kliping.pro/llms/variants/carousel-09.md
- [carousel-10](https://kliping.pro/r/carousel-10.json): Looping carousel that fades out every slide except the center one. Usage: https://kliping.pro/llms/variants/carousel-10.md
- [carousel-11](https://kliping.pro/r/carousel-11.json): Carousel that enlarges the center slide and shrinks the slides on either side. Usage: https://kliping.pro/llms/variants/carousel-11.md

### Checkbox (16)

- [checkbox-01](https://kliping.pro/r/checkbox-01.json): Default checkbox with a label beside it. Usage: https://kliping.pro/llms/variants/checkbox-01.md
- [checkbox-02](https://kliping.pro/r/checkbox-02.json): Disabled checkbox with its label faded as well. Usage: https://kliping.pro/llms/variants/checkbox-02.md
- [checkbox-03](https://kliping.pro/r/checkbox-03.json): Parent and child checkboxes with the parent indeterminate when children differ. Usage: https://kliping.pro/llms/variants/checkbox-03.md
- [checkbox-04](https://kliping.pro/r/checkbox-04.json): Checkbox group laid out horizontally under one heading. Usage: https://kliping.pro/llms/variants/checkbox-04.md
- [checkbox-05](https://kliping.pro/r/checkbox-05.json): Checkbox options with icons, stacked vertically. Usage: https://kliping.pro/llms/variants/checkbox-05.md
- [checkbox-06](https://kliping.pro/r/checkbox-06.json): Controlled checkbox with its value held by the page. Usage: https://kliping.pro/llms/variants/checkbox-06.md
- [checkbox-07](https://kliping.pro/r/checkbox-07.json): Checkbox in three different checked colors. Usage: https://kliping.pro/llms/variants/checkbox-07.md
- [checkbox-08](https://kliping.pro/r/checkbox-08.json): Checkbox in three sizes, from small to large. Usage: https://kliping.pro/llms/variants/checkbox-08.md
- [checkbox-09](https://kliping.pro/r/checkbox-09.json): Checkbox with a custom icon replacing the check mark. Usage: https://kliping.pro/llms/variants/checkbox-09.md
- [checkbox-10](https://kliping.pro/r/checkbox-10.json): Selectable cards marked by a check circle. Usage: https://kliping.pro/llms/variants/checkbox-10.md
- [checkbox-11](https://kliping.pro/r/checkbox-11.json): Checkbox card grid with dashed borders and the check in the top right corner. Usage: https://kliping.pro/llms/variants/checkbox-11.md
- [checkbox-12](https://kliping.pro/r/checkbox-12.json): Checkbox in a validated form, with a description. Usage: https://kliping.pro/llms/variants/checkbox-12.md
- [checkbox-13](https://kliping.pro/r/checkbox-13.json): Checkbox list of roles with a short description on each row. Usage: https://kliping.pro/llms/variants/checkbox-13.md
- [checkbox-14](https://kliping.pro/r/checkbox-14.json): Long checkbox list inside a scrollable area. Usage: https://kliping.pro/llms/variants/checkbox-14.md
- [checkbox-15](https://kliping.pro/r/checkbox-15.json): Weekdays as selectable checkbox badges. Usage: https://kliping.pro/llms/variants/checkbox-15.md
- [checkbox-16](https://kliping.pro/r/checkbox-16.json): Notification settings table of checkboxes with a sticky header when scrolled. Usage: https://kliping.pro/llms/variants/checkbox-16.md

### Collapsible (4)

- [collapsible-01](https://kliping.pro/r/collapsible-01.json): Single collapsible section toggled by an icon button beside it. Usage: https://kliping.pro/llms/variants/collapsible-01.md
- [collapsible-02](https://kliping.pro/r/collapsible-02.json): Truncated list with a show more button. Usage: https://kliping.pro/llms/variants/collapsible-02.md
- [collapsible-03](https://kliping.pro/r/collapsible-03.json): File tree with each folder collapsible. Usage: https://kliping.pro/llms/variants/collapsible-03.md
- [collapsible-04](https://kliping.pro/r/collapsible-04.json): Collapsible shop filter panel with price range, categories, and star rating. Usage: https://kliping.pro/llms/variants/collapsible-04.md

### Dropdown Menu (8)

- [dropdown-menu-01](https://kliping.pro/r/dropdown-menu-01.json): Default dropdown menu with a label, a separator, and a list of actions. Usage: https://kliping.pro/llms/variants/dropdown-menu-01.md
- [dropdown-menu-02](https://kliping.pro/r/dropdown-menu-02.json): Dropdown menu triggered by an avatar, with an icon on each row. Usage: https://kliping.pro/llms/variants/dropdown-menu-02.md
- [dropdown-menu-03](https://kliping.pro/r/dropdown-menu-03.json): Dropdown menu with checkboxes that keep the menu open when selected. Usage: https://kliping.pro/llms/variants/dropdown-menu-03.md
- [dropdown-menu-04](https://kliping.pro/r/dropdown-menu-04.json): Dropdown menu with single selection and colored priority icons. Usage: https://kliping.pro/llms/variants/dropdown-menu-04.md
- [dropdown-menu-05](https://kliping.pro/r/dropdown-menu-05.json): Dropdown menu with a submenu that opens to the side. Usage: https://kliping.pro/llms/variants/dropdown-menu-05.md
- [dropdown-menu-06](https://kliping.pro/r/dropdown-menu-06.json): Dropdown menu with keyboard shortcuts on the right of each row. Usage: https://kliping.pro/llms/variants/dropdown-menu-06.md
- [dropdown-menu-07](https://kliping.pro/r/dropdown-menu-07.json): Workspace dropdown menu with profile, checkboxes, submenu, and a log out button. Usage: https://kliping.pro/llms/variants/dropdown-menu-07.md
- [dropdown-menu-08](https://kliping.pro/r/dropdown-menu-08.json): Workspace switcher dropdown menu with the active workspace marked by a check. Usage: https://kliping.pro/llms/variants/dropdown-menu-08.md

### Input (12)

- [input-01](https://kliping.pro/r/input-01.json): Default text input. Usage: https://kliping.pro/llms/variants/input-01.md
- [input-02](https://kliping.pro/r/input-02.json): Input with a blue focus ring instead of the default color. Usage: https://kliping.pro/llms/variants/input-02.md
- [input-03](https://kliping.pro/r/input-03.json): Input with a gray background and no border. Usage: https://kliping.pro/llms/variants/input-03.md
- [input-04](https://kliping.pro/r/input-04.json): Disabled input that cannot be filled in. Usage: https://kliping.pro/llms/variants/input-04.md
- [input-05](https://kliping.pro/r/input-05.json): Input with a label above it. Usage: https://kliping.pro/llms/variants/input-05.md
- [input-06](https://kliping.pro/r/input-06.json): Input and subscribe button on one row. Usage: https://kliping.pro/llms/variants/input-06.md
- [input-07](https://kliping.pro/r/input-07.json): Input group with icons and a show password button. Usage: https://kliping.pro/llms/variants/input-07.md
- [input-08](https://kliping.pro/r/input-08.json): Input with helper text below it. Usage: https://kliping.pro/llms/variants/input-08.md
- [input-09](https://kliping.pro/r/input-09.json): Input in an error state with a red label, border, and message. Usage: https://kliping.pro/llms/variants/input-09.md
- [input-10](https://kliping.pro/r/input-10.json): Input in a validated form that shows the error after leaving the field. Usage: https://kliping.pro/llms/variants/input-10.md
- [input-11](https://kliping.pro/r/input-11.json): File input. Usage: https://kliping.pro/llms/variants/input-11.md
- [input-12](https://kliping.pro/r/input-12.json): File drop zone input with an image preview shown right after selection. Usage: https://kliping.pro/llms/variants/input-12.md

### Input OTP (7)

- [input-otp-01](https://kliping.pro/r/input-otp-01.json): OTP input with six slots split in two by a dash in the middle. Usage: https://kliping.pro/llms/variants/input-otp-01.md
- [input-otp-02](https://kliping.pro/r/input-otp-02.json): OTP input with four joined slots and no separator. Usage: https://kliping.pro/llms/variants/input-otp-02.md
- [input-otp-03](https://kliping.pro/r/input-otp-03.json): OTP input with each slot standing alone, separated by gaps. Usage: https://kliping.pro/llms/variants/input-otp-03.md
- [input-otp-04](https://kliping.pro/r/input-otp-04.json): OTP input with separate slots split into two groups. Usage: https://kliping.pro/llms/variants/input-otp-04.md
- [input-otp-05](https://kliping.pro/r/input-otp-05.json): OTP input with gray-background slots and bold digits. Usage: https://kliping.pro/llms/variants/input-otp-05.md
- [input-otp-06](https://kliping.pro/r/input-otp-06.json): OTP input split by a dot instead of a dash. Usage: https://kliping.pro/llms/variants/input-otp-06.md
- [input-otp-07](https://kliping.pro/r/input-otp-07.json): OTP input with inset slots and an inner shadow. Usage: https://kliping.pro/llms/variants/input-otp-07.md

### Navigation Menu (8)

- [navigation-menu-01](https://kliping.pro/r/navigation-menu-01.json): Horizontal navigation menu with text links only. Usage: https://kliping.pro/llms/variants/navigation-menu-01.md
- [navigation-menu-02](https://kliping.pro/r/navigation-menu-02.json): Navigation menu with an icon beside each item name. Usage: https://kliping.pro/llms/variants/navigation-menu-02.md
- [navigation-menu-03](https://kliping.pro/r/navigation-menu-03.json): Navigation menu with a large two-column panel and a branded card on the left. Usage: https://kliping.pro/llms/variants/navigation-menu-03.md
- [navigation-menu-04](https://kliping.pro/r/navigation-menu-04.json): Navigation menu with the open item marked by a background. Usage: https://kliping.pro/llms/variants/navigation-menu-04.md
- [navigation-menu-05](https://kliping.pro/r/navigation-menu-05.json): Navigation menu with an underline that widens on hover. Usage: https://kliping.pro/llms/variants/navigation-menu-05.md
- [navigation-menu-06](https://kliping.pro/r/navigation-menu-06.json): Navigation menu with a three-column panel divided by separator lines. Usage: https://kliping.pro/llms/variants/navigation-menu-06.md
- [navigation-menu-07](https://kliping.pro/r/navigation-menu-07.json): Icon-only navigation menu with no text. Usage: https://kliping.pro/llms/variants/navigation-menu-07.md
- [navigation-menu-08](https://kliping.pro/r/navigation-menu-08.json): Navigation menu with icons above item names, like a mobile bottom bar. Usage: https://kliping.pro/llms/variants/navigation-menu-08.md

### Pagination (15)

- [pagination-01](https://kliping.pro/r/pagination-01.json): Default pagination with the active page outlined. Usage: https://kliping.pro/llms/variants/pagination-01.md
- [pagination-02](https://kliping.pro/r/pagination-02.json): Pagination with the active page filled with the primary color. Usage: https://kliping.pro/llms/variants/pagination-02.md
- [pagination-03](https://kliping.pro/r/pagination-03.json): Pagination with the active page on a gray background and no border. Usage: https://kliping.pro/llms/variants/pagination-03.md
- [pagination-04](https://kliping.pro/r/pagination-04.json): Pagination with fully round page buttons. Usage: https://kliping.pro/llms/variants/pagination-04.md
- [pagination-05](https://kliping.pro/r/pagination-05.json): Pagination with double arrows to jump to the first and last pages. Usage: https://kliping.pro/llms/variants/pagination-05.md
- [pagination-06](https://kliping.pro/r/pagination-06.json): Pagination with first, previous, next, and last buttons. Usage: https://kliping.pro/llms/variants/pagination-06.md
- [pagination-07](https://kliping.pro/r/pagination-07.json): Pagination with all buttons joined into one bar divided by separators. Usage: https://kliping.pro/llms/variants/pagination-07.md
- [pagination-08](https://kliping.pro/r/pagination-08.json): Pagination with each button in its own border. Usage: https://kliping.pro/llms/variants/pagination-08.md
- [pagination-09](https://kliping.pro/r/pagination-09.json): Pagination with gray-background buttons and the active page in the primary color. Usage: https://kliping.pro/llms/variants/pagination-09.md
- [pagination-10](https://kliping.pro/r/pagination-10.json): Pagination with previous and next buttons labeled with words, not just arrows. Usage: https://kliping.pro/llms/variants/pagination-10.md
- [pagination-11](https://kliping.pro/r/pagination-11.json): Pagination with only previous and next buttons joined in one bar. Usage: https://kliping.pro/llms/variants/pagination-11.md
- [pagination-12](https://kliping.pro/r/pagination-12.json): Pagination with previous and next at both ends and the page info in the middle. Usage: https://kliping.pro/llms/variants/pagination-12.md
- [pagination-13](https://kliping.pro/r/pagination-13.json): Pagination with an ellipsis marking hidden pages. Usage: https://kliping.pro/llms/variants/pagination-13.md
- [pagination-14](https://kliping.pro/r/pagination-14.json): Pagination with a rows-per-page selector on the left and count and buttons on the right. Usage: https://kliping.pro/llms/variants/pagination-14.md
- [pagination-15](https://kliping.pro/r/pagination-15.json): Pagination with the page info on the left and previous and next buttons on the right. Usage: https://kliping.pro/llms/variants/pagination-15.md

### Progress (12)

- [progress-01](https://kliping.pro/r/progress-01.json): Default progress bar. Usage: https://kliping.pro/llms/variants/progress-01.md
- [progress-02](https://kliping.pro/r/progress-02.json): Progress bar with the percentage written beside it. Usage: https://kliping.pro/llms/variants/progress-02.md
- [progress-03](https://kliping.pro/r/progress-03.json): Progress bar in three colors: green, indigo, and pink. Usage: https://kliping.pro/llms/variants/progress-03.md
- [progress-04](https://kliping.pro/r/progress-04.json): Progress bar with rounded ends. Usage: https://kliping.pro/llms/variants/progress-04.md
- [progress-05](https://kliping.pro/r/progress-05.json): Progress bar with a light blue to indigo gradient fill. Usage: https://kliping.pro/llms/variants/progress-05.md
- [progress-06](https://kliping.pro/r/progress-06.json): Indeterminate progress bar with a continuously moving gradient. Usage: https://kliping.pro/llms/variants/progress-06.md
- [progress-07](https://kliping.pro/r/progress-07.json): Circular progress controlled by a slider below it. Usage: https://kliping.pro/llms/variants/progress-07.md
- [progress-08](https://kliping.pro/r/progress-08.json): Circular progress with a number in the center. Usage: https://kliping.pro/llms/variants/progress-08.md
- [progress-09](https://kliping.pro/r/progress-09.json): Circular progress with a percentage in the center. Usage: https://kliping.pro/llms/variants/progress-09.md
- [progress-10](https://kliping.pro/r/progress-10.json): Two circular progress indicators in different colors. Usage: https://kliping.pro/llms/variants/progress-10.md
- [progress-11](https://kliping.pro/r/progress-11.json): Circular progress with round or square arc ends. Usage: https://kliping.pro/llms/variants/progress-11.md
- [progress-12](https://kliping.pro/r/progress-12.json): Circular progress with arc and track thickness set separately. Usage: https://kliping.pro/llms/variants/progress-12.md

### Radio Group (9)

- [radio-group-01](https://kliping.pro/r/radio-group-01.json): Default radio group stacked vertically. Usage: https://kliping.pro/llms/variants/radio-group-01.md
- [radio-group-02](https://kliping.pro/r/radio-group-02.json): Radio group laid out horizontally. Usage: https://kliping.pro/llms/variants/radio-group-02.md
- [radio-group-03](https://kliping.pro/r/radio-group-03.json): Radio group with one disabled option. Usage: https://kliping.pro/llms/variants/radio-group-03.md
- [radio-group-04](https://kliping.pro/r/radio-group-04.json): Radio group in three different selected colors. Usage: https://kliping.pro/llms/variants/radio-group-04.md
- [radio-group-05](https://kliping.pro/r/radio-group-05.json): Radio group in three sizes, from small to large. Usage: https://kliping.pro/llms/variants/radio-group-05.md
- [radio-group-06](https://kliping.pro/r/radio-group-06.json): Soft radio group with the same color but a lighter fill. Usage: https://kliping.pro/llms/variants/radio-group-06.md
- [radio-group-07](https://kliping.pro/r/radio-group-07.json): Radio group of selectable cards marked by a blue ring. Usage: https://kliping.pro/llms/variants/radio-group-07.md
- [radio-group-08](https://kliping.pro/r/radio-group-08.json): Radio group of cards with icons and a check in the top right corner. Usage: https://kliping.pro/llms/variants/radio-group-08.md
- [radio-group-09](https://kliping.pro/r/radio-group-09.json): Radio group of plan options inside a card, each row with a description. Usage: https://kliping.pro/llms/variants/radio-group-09.md

### Select (11)

- [select-01](https://kliping.pro/r/select-01.json): Default select with options in titled groups. Usage: https://kliping.pro/llms/variants/select-01.md
- [select-02](https://kliping.pro/r/select-02.json): Select with a primary color background and no border. Usage: https://kliping.pro/llms/variants/select-02.md
- [select-03](https://kliping.pro/r/select-03.json): Ghost select with no border or background until hovered. Usage: https://kliping.pro/llms/variants/select-03.md
- [select-04](https://kliping.pro/r/select-04.json): Select with a custom chevron icon. Usage: https://kliping.pro/llms/variants/select-04.md
- [select-05](https://kliping.pro/r/select-05.json): Select in two corner shapes: square and fully round. Usage: https://kliping.pro/llms/variants/select-05.md
- [select-06](https://kliping.pro/r/select-06.json): Select with an icon on each option. Usage: https://kliping.pro/llms/variants/select-06.md
- [select-07](https://kliping.pro/r/select-07.json): Required select inside a validated form. Usage: https://kliping.pro/llms/variants/select-07.md
- [select-08](https://kliping.pro/r/select-08.json): Select for choosing between light and dark themes. Usage: https://kliping.pro/llms/variants/select-08.md
- [select-09](https://kliping.pro/r/select-09.json): Select with two panel positions: aligned to the trigger or overlapping it. Usage: https://kliping.pro/llms/variants/select-09.md
- [select-10](https://kliping.pro/r/select-10.json): Select with options grouped by continent. Usage: https://kliping.pro/llms/variants/select-10.md
- [select-11](https://kliping.pro/r/select-11.json): Controlled select with its value held by the page. Usage: https://kliping.pro/llms/variants/select-11.md

### Separator (7)

- [separator-01](https://kliping.pro/r/separator-01.json): Horizontal and vertical separators in one example. Usage: https://kliping.pro/llms/variants/separator-01.md
- [separator-02](https://kliping.pro/r/separator-02.json): Separator with OR text in the middle of the line. Usage: https://kliping.pro/llms/variants/separator-02.md
- [separator-03](https://kliping.pro/r/separator-03.json): Separator with a rounded badge as its label. Usage: https://kliping.pro/llms/variants/separator-03.md
- [separator-04](https://kliping.pro/r/separator-04.json): Dashed separator instead of a solid line. Usage: https://kliping.pro/llms/variants/separator-04.md
- [separator-05](https://kliping.pro/r/separator-05.json): Vertical separator between two columns. Usage: https://kliping.pro/llms/variants/separator-05.md
- [separator-06](https://kliping.pro/r/separator-06.json): Vertical separator with a rounded label in the middle. Usage: https://kliping.pro/llms/variants/separator-06.md
- [with-label-vertical](https://kliping.pro/r/with-label-vertical.json): Vertical separator with a label inside a card. Usage: https://kliping.pro/llms/variants/with-label-vertical.md

### Slider (15)

- [slider-01](https://kliping.pro/r/slider-01.json): Default slider with a single thumb. Usage: https://kliping.pro/llms/variants/slider-01.md
- [slider-02](https://kliping.pro/r/slider-02.json): Disabled slider that cannot be moved. Usage: https://kliping.pro/llms/variants/slider-02.md
- [slider-03](https://kliping.pro/r/slider-03.json): Slider in three sizes, from thin to thick. Usage: https://kliping.pro/llms/variants/slider-03.md
- [slider-04](https://kliping.pro/r/slider-04.json): Slider in three different fill colors. Usage: https://kliping.pro/llms/variants/slider-04.md
- [slider-05](https://kliping.pro/r/slider-05.json): Slider with a square track and thumb, no rounded corners. Usage: https://kliping.pro/llms/variants/slider-05.md
- [slider-06](https://kliping.pro/r/slider-06.json): Slider with its value written beside it, updating while dragged. Usage: https://kliping.pro/llms/variants/slider-06.md
- [slider-07](https://kliping.pro/r/slider-07.json): Slider with a settings icon inside the thumb. Usage: https://kliping.pro/llms/variants/slider-07.md
- [slider-08](https://kliping.pro/r/slider-08.json): Media player slider with elapsed time on the left and duration on the right. Usage: https://kliping.pro/llms/variants/slider-08.md
- [slider-09](https://kliping.pro/r/slider-09.json): Slider with value tick labels below the track. Usage: https://kliping.pro/llms/variants/slider-09.md
- [slider-10](https://kliping.pro/r/slider-10.json): Slider with its value always floating above the thumb. Usage: https://kliping.pro/llms/variants/slider-10.md
- [slider-11](https://kliping.pro/r/slider-11.json): Slider that shows its value only when hovering the thumb. Usage: https://kliping.pro/llms/variants/slider-11.md
- [slider-12](https://kliping.pro/r/slider-12.json): Slider with its value floating in a tooltip bubble with a tail. Usage: https://kliping.pro/llms/variants/slider-12.md
- [slider-13](https://kliping.pro/r/slider-13.json): Vertical slider dragged up and down. Usage: https://kliping.pro/llms/variants/slider-13.md
- [slider-14](https://kliping.pro/r/slider-14.json): Range slider with two thumbs and the values below. Usage: https://kliping.pro/llms/variants/slider-14.md
- [slider-15](https://kliping.pro/r/slider-15.json): Range slider with the minimum and maximum written at both ends. Usage: https://kliping.pro/llms/variants/slider-15.md

### Spinner (11)

- [spinner-01](https://kliping.pro/r/spinner-01.json): Default spinner using a rotating Lucide icon. Usage: https://kliping.pro/llms/variants/spinner-01.md
- [spinner-02](https://kliping.pro/r/spinner-02.json): Spinner with a single rotating arc. Usage: https://kliping.pro/llms/variants/spinner-02.md
- [spinner-03](https://kliping.pro/r/spinner-03.json): Spinner shaped like a rotating pinwheel. Usage: https://kliping.pro/llms/variants/spinner-03.md
- [spinner-04](https://kliping.pro/r/spinner-04.json): Spinner in four different colors. Usage: https://kliping.pro/llms/variants/spinner-04.md
- [spinner-05](https://kliping.pro/r/spinner-05.json): Spinner in four sizes, from small to large. Usage: https://kliping.pro/llms/variants/spinner-05.md
- [spinner-06](https://kliping.pro/r/spinner-06.json): Spinner with an arc that changes length while rotating. Usage: https://kliping.pro/llms/variants/spinner-06.md
- [spinner-07](https://kliping.pro/r/spinner-07.json): Ring spinner with a colored quarter arc. Usage: https://kliping.pro/llms/variants/spinner-07.md
- [spinner-08](https://kliping.pro/r/spinner-08.json): Ring spinner with a colored half arc. Usage: https://kliping.pro/llms/variants/spinner-08.md
- [spinner-09](https://kliping.pro/r/spinner-09.json): Spinner with a full gray ring and one colored arc. Usage: https://kliping.pro/llms/variants/spinner-09.md
- [spinner-10](https://kliping.pro/r/spinner-10.json): Spinner with two opposing arcs on a faded ring. Usage: https://kliping.pro/llms/variants/spinner-10.md
- [spinner-11](https://kliping.pro/r/spinner-11.json): Spinner with two opposing arcs on a white ring. Usage: https://kliping.pro/llms/variants/spinner-11.md

### Switch (7)

- [switch-01](https://kliping.pro/r/switch-01.json): Default switch. Usage: https://kliping.pro/llms/variants/switch-01.md
- [switch-02](https://kliping.pro/r/switch-02.json): Switch with a label beside it. Usage: https://kliping.pro/llms/variants/switch-02.md
- [switch-03](https://kliping.pro/r/switch-03.json): Disabled switch with its label faded as well. Usage: https://kliping.pro/llms/variants/switch-03.md
- [switch-04](https://kliping.pro/r/switch-04.json): Switch in three different on colors. Usage: https://kliping.pro/llms/variants/switch-04.md
- [switch-05](https://kliping.pro/r/switch-05.json): Switch in three sizes, from small to large. Usage: https://kliping.pro/llms/variants/switch-05.md
- [switch-06](https://kliping.pro/r/switch-06.json): Controlled switch with its value held by the page. Usage: https://kliping.pro/llms/variants/switch-06.md
- [switch-07](https://kliping.pro/r/switch-07.json): Switch with sun and moon icons alternating inside the thumb. Usage: https://kliping.pro/llms/variants/switch-07.md

### Table (11)

- [table-01](https://kliping.pro/r/table-01.json): Default table with a caption and a total row in the footer. Usage: https://kliping.pro/llms/variants/table-01.md
- [table-02](https://kliping.pro/r/table-02.json): Table with full borders, every cell boxed. Usage: https://kliping.pro/llms/variants/table-02.md
- [table-03](https://kliping.pro/r/table-03.json): Table with striped rows inside a bordered box. Usage: https://kliping.pro/llms/variants/table-03.md
- [table-04](https://kliping.pro/r/table-04.json): Table with striped rows and no outer border. Usage: https://kliping.pro/llms/variants/table-04.md
- [table-05](https://kliping.pro/r/table-05.json): Table with pagination below it. Usage: https://kliping.pro/llms/variants/table-05.md
- [table-06](https://kliping.pro/r/table-06.json): Table with a sticky header row when scrolled. Usage: https://kliping.pro/llms/variants/table-06.md
- [table-07](https://kliping.pro/r/table-07.json): Table with the first two columns pinned to the left when scrolled horizontally. Usage: https://kliping.pro/llms/variants/table-07.md
- [table-08](https://kliping.pro/r/table-08.json): Fixed-height table with scrolling body and a fixed header. Usage: https://kliping.pro/llms/variants/table-08.md
- [table-09](https://kliping.pro/r/table-09.json): Data table with row selection, filtering, column hiding, and pagination. Usage: https://kliping.pro/llms/variants/table-09.md
- [table-10](https://kliping.pro/r/table-10.json): Table with adjustable row density: compact, default, or comfortable. Usage: https://kliping.pro/llms/variants/table-10.md
- [table-11](https://kliping.pro/r/table-11.json): Table column picker with a search box and a reset button. Usage: https://kliping.pro/llms/variants/table-11.md

### Tabs (18)

- [tabs-01](https://kliping.pro/r/tabs-01.json): Default tabs inside a gray-background bar. Usage: https://kliping.pro/llms/variants/tabs-01.md
- [tabs-02](https://kliping.pro/r/tabs-02.json): Tabs with an underline marking the active tab. Usage: https://kliping.pro/llms/variants/tabs-02.md
- [tabs-03](https://kliping.pro/r/tabs-03.json): Tabs with the active tab filled with the primary color and no wrapping bar. Usage: https://kliping.pro/llms/variants/tabs-03.md
- [tabs-04](https://kliping.pro/r/tabs-04.json): Tabs with the active tab outlined and the rest plain. Usage: https://kliping.pro/llms/variants/tabs-04.md
- [tabs-05](https://kliping.pro/r/tabs-05.json): Tabs in a bordered bar with the active tab filled with the primary color. Usage: https://kliping.pro/llms/variants/tabs-05.md
- [tabs-06](https://kliping.pro/r/tabs-06.json): Folder-style tabs that merge with their content panel. Usage: https://kliping.pro/llms/variants/tabs-06.md
- [tabs-07](https://kliping.pro/r/tabs-07.json): Tabs with package manager logo icons. Usage: https://kliping.pro/llms/variants/tabs-07.md
- [tabs-08](https://kliping.pro/r/tabs-08.json): Tabs as a mobile bottom bar with icons above the names, in four columns. Usage: https://kliping.pro/llms/variants/tabs-08.md
- [tabs-09](https://kliping.pro/r/tabs-09.json): Tabs with a count badge next to each tab name. Usage: https://kliping.pro/llms/variants/tabs-09.md
- [tabs-10](https://kliping.pro/r/tabs-10.json): Tabs with a thick underline marking the active tab. Usage: https://kliping.pro/llms/variants/tabs-10.md
- [tabs-11](https://kliping.pro/r/tabs-11.json): Tabs with the active tab marked by a shadow instead of a background. Usage: https://kliping.pro/llms/variants/tabs-11.md
- [tabs-12](https://kliping.pro/r/tabs-12.json): Skewed tabs separated by gaps. Usage: https://kliping.pro/llms/variants/tabs-12.md
- [tabs-13](https://kliping.pro/r/tabs-13.json): Vertical tabs on the left with the content on the right. Usage: https://kliping.pro/llms/variants/tabs-13.md
- [tabs-14](https://kliping.pro/r/tabs-14.json): Vertical tabs with no background, text only. Usage: https://kliping.pro/llms/variants/tabs-14.md
- [tabs-15](https://kliping.pro/r/tabs-15.json): Vertical tabs with the active tab filled with the primary color. Usage: https://kliping.pro/llms/variants/tabs-15.md
- [tabs-16](https://kliping.pro/r/tabs-16.json): Vertical tabs with a thick bottom border on each tab. Usage: https://kliping.pro/llms/variants/tabs-16.md
- [tabs-17](https://kliping.pro/r/tabs-17.json): Vertical tabs inside a bordered box, each tab divided by a line. Usage: https://kliping.pro/llms/variants/tabs-17.md
- [tabs-18](https://kliping.pro/r/tabs-18.json): Tabs whose content items appear one by one, staggered from the top. Usage: https://kliping.pro/llms/variants/tabs-18.md

### Textarea (7)

- [textarea-01](https://kliping.pro/r/textarea-01.json): Default textarea. Usage: https://kliping.pro/llms/variants/textarea-01.md
- [textarea-02](https://kliping.pro/r/textarea-02.json): Textarea with a gray background and no shadow. Usage: https://kliping.pro/llms/variants/textarea-02.md
- [textarea-03](https://kliping.pro/r/textarea-03.json): Disabled textarea that cannot be filled in. Usage: https://kliping.pro/llms/variants/textarea-03.md
- [textarea-04](https://kliping.pro/r/textarea-04.json): Textarea with a label above it. Usage: https://kliping.pro/llms/variants/textarea-04.md
- [textarea-05](https://kliping.pro/r/textarea-05.json): Textarea with eight rows, taller than the default. Usage: https://kliping.pro/llms/variants/textarea-05.md
- [textarea-06](https://kliping.pro/r/textarea-06.json): Textarea with helper text below it. Usage: https://kliping.pro/llms/variants/textarea-06.md
- [textarea-07](https://kliping.pro/r/textarea-07.json): Controlled textarea with its value held by the page. Usage: https://kliping.pro/llms/variants/textarea-07.md

### Tooltip (7)

- [tooltip-01](https://kliping.pro/r/tooltip-01.json): Default tooltip that appears when hovering the trigger. Usage: https://kliping.pro/llms/variants/tooltip-01.md
- [tooltip-02](https://kliping.pro/r/tooltip-02.json): Tooltip with a small arrow pointing at its trigger. Usage: https://kliping.pro/llms/variants/tooltip-02.md
- [tooltip-03](https://kliping.pro/r/tooltip-03.json): Tooltip on four sides: left, top, bottom, and right. Usage: https://kliping.pro/llms/variants/tooltip-03.md
- [tooltip-04](https://kliping.pro/r/tooltip-04.json): Tooltip that still appears on a disabled trigger. Usage: https://kliping.pro/llms/variants/tooltip-04.md
- [tooltip-05](https://kliping.pro/r/tooltip-05.json): Tooltip with a custom delay before it appears. Usage: https://kliping.pro/llms/variants/tooltip-05.md
- [tooltip-06](https://kliping.pro/r/tooltip-06.json): Tooltips that open instantly for neighbors after one has opened. Usage: https://kliping.pro/llms/variants/tooltip-06.md
- [tooltip-07](https://kliping.pro/r/tooltip-07.json): Tooltip rendered outside its parent so the container does not clip it. Usage: https://kliping.pro/llms/variants/tooltip-07.md

## Charts (23)

- [chart-area-axes](https://kliping.pro/r/chart-area-axes.json): Area chart with X and Y axes. Usage: https://kliping.pro/llms/charts/chart-area-axes.md
- [chart-area-gradient](https://kliping.pro/r/chart-area-gradient.json): Area chart with a gradient fill. Usage: https://kliping.pro/llms/charts/chart-area-gradient.md
- [chart-area-icons](https://kliping.pro/r/chart-area-icons.json): Area chart with icons in its legend. Usage: https://kliping.pro/llms/charts/chart-area-icons.md
- [chart-area-interactive](https://kliping.pro/r/chart-area-interactive.json): Area chart with a time range filter. Usage: https://kliping.pro/llms/charts/chart-area-interactive.md
- [chart-bar-default](https://kliping.pro/r/chart-bar-default.json): A basic bar chart. Usage: https://kliping.pro/llms/charts/chart-bar-default.md
- [chart-bar-horizontal](https://kliping.pro/r/chart-bar-horizontal.json): Bar chart with horizontal bars. Usage: https://kliping.pro/llms/charts/chart-bar-horizontal.md
- [chart-bar-interactive](https://kliping.pro/r/chart-bar-interactive.json): Bar chart with a data series selector. Usage: https://kliping.pro/llms/charts/chart-bar-interactive.md
- [chart-bar-multiple](https://kliping.pro/r/chart-bar-multiple.json): Bar chart with multiple data series. Usage: https://kliping.pro/llms/charts/chart-bar-multiple.md
- [chart-line-default](https://kliping.pro/r/chart-line-default.json): A basic line chart. Usage: https://kliping.pro/llms/charts/chart-line-default.md
- [chart-line-interactive](https://kliping.pro/r/chart-line-interactive.json): Line chart with a data series selector. Usage: https://kliping.pro/llms/charts/chart-line-interactive.md
- [chart-line-linear](https://kliping.pro/r/chart-line-linear.json): Line chart with linear interpolation. Usage: https://kliping.pro/llms/charts/chart-line-linear.md
- [chart-line-step](https://kliping.pro/r/chart-line-step.json): Line chart with step interpolation. Usage: https://kliping.pro/llms/charts/chart-line-step.md
- [chart-pie-donut](https://kliping.pro/r/chart-pie-donut.json): A donut chart, a pie chart with a hollow center. Usage: https://kliping.pro/llms/charts/chart-pie-donut.md
- [chart-pie-donut-text](https://kliping.pro/r/chart-pie-donut-text.json): Donut chart with a number displayed in its center. Usage: https://kliping.pro/llms/charts/chart-pie-donut-text.md
- [chart-pie-simple](https://kliping.pro/r/chart-pie-simple.json): A basic pie chart. Usage: https://kliping.pro/llms/charts/chart-pie-simple.md
- [chart-pie-stacked](https://kliping.pro/r/chart-pie-stacked.json): Stacked pie chart with concentric rings. Usage: https://kliping.pro/llms/charts/chart-pie-stacked.md
- [chart-tooltip-default](https://kliping.pro/r/chart-tooltip-default.json): Chart with the default tooltip. Usage: https://kliping.pro/llms/charts/chart-tooltip-default.md
- [chart-tooltip-icons](https://kliping.pro/r/chart-tooltip-icons.json): Chart tooltip with icons. Usage: https://kliping.pro/llms/charts/chart-tooltip-icons.md
- [chart-tooltip-indicator-line](https://kliping.pro/r/chart-tooltip-indicator-line.json): Chart tooltip with a line indicator. Usage: https://kliping.pro/llms/charts/chart-tooltip-indicator-line.md
- [chart-tooltip-indicator-none](https://kliping.pro/r/chart-tooltip-indicator-none.json): Chart tooltip without an indicator. Usage: https://kliping.pro/llms/charts/chart-tooltip-indicator-none.md
- [chart-tooltip-label-custom](https://kliping.pro/r/chart-tooltip-label-custom.json): Chart tooltip with a custom label. Usage: https://kliping.pro/llms/charts/chart-tooltip-label-custom.md
- [chart-tooltip-label-formatter](https://kliping.pro/r/chart-tooltip-label-formatter.json): Chart tooltip with a label formatter. Usage: https://kliping.pro/llms/charts/chart-tooltip-label-formatter.md
- [chart-tooltip-label-none](https://kliping.pro/r/chart-tooltip-label-none.json): Chart tooltip without a label. Usage: https://kliping.pro/llms/charts/chart-tooltip-label-none.md

## Composables (37)

- [use-toggle](https://kliping.pro/r/use-toggle.json): Toggles a value back and forth between two options. API: https://kliping.pro/llms/hooks/use-toggle.md
- [use-boolean](https://kliping.pro/r/use-boolean.json): Toggles a boolean value with named actions that state the intent. API: https://kliping.pro/llms/hooks/use-boolean.md
- [use-event-listener](https://kliping.pro/r/use-event-listener.json): Adds an event listener that is removed automatically along with its scope. API: https://kliping.pro/llms/hooks/use-event-listener.md
- [use-debounce-fn](https://kliping.pro/r/use-debounce-fn.json): Delays a function until calls to it pause for a moment. API: https://kliping.pro/llms/hooks/use-debounce-fn.md
- [use-throttle-fn](https://kliping.pro/r/use-throttle-fn.json): Limits a function to run at most once per interval. API: https://kliping.pro/llms/hooks/use-throttle-fn.md
- [use-debounce](https://kliping.pro/r/use-debounce.json): A copy of a value that lags behind it by a short delay. API: https://kliping.pro/llms/hooks/use-debounce.md
- [use-throttle](https://kliping.pro/r/use-throttle.json): A copy of a value that updates at most once per interval. API: https://kliping.pro/llms/hooks/use-throttle.md
- [use-counter](https://kliping.pro/r/use-counter.json): A counter with named actions that state the intent. API: https://kliping.pro/llms/hooks/use-counter.md
- [use-previous](https://kliping.pro/r/use-previous.json): Tracks the previous value of something that changes. API: https://kliping.pro/llms/hooks/use-previous.md
- [use-lock-fn](https://kliping.pro/r/use-lock-fn.json): Wraps an async function so it cannot run twice at the same time. API: https://kliping.pro/llms/hooks/use-lock-fn.md
- [use-reset-state](https://kliping.pro/r/use-reset-state.json): State that can be reset back to its initial value. API: https://kliping.pro/llms/hooks/use-reset-state.md
- [use-controllable-value](https://kliping.pro/r/use-controllable-value.json): A single value that can be controlled from outside or manage itself. API: https://kliping.pro/llms/hooks/use-controllable-value.md
- [use-interval](https://kliping.pro/r/use-interval.json): Runs something repeatedly, with an interval that may change. API: https://kliping.pro/llms/hooks/use-interval.md
- [use-timeout](https://kliping.pro/r/use-timeout.json): Runs something once after a delay. API: https://kliping.pro/llms/hooks/use-timeout.md
- [use-is-hydrated](https://kliping.pro/r/use-is-hydrated.json): Tracks whether the page has been hydrated in the browser. API: https://kliping.pro/llms/hooks/use-is-hydrated.md
- [use-click-any-where](https://kliping.pro/r/use-click-any-where.json): Runs something whenever a click happens anywhere on the page. API: https://kliping.pro/llms/hooks/use-click-any-where.md
- [use-click-away](https://kliping.pro/r/use-click-away.json): Runs something when a click lands outside a set of elements. API: https://kliping.pro/llms/hooks/use-click-away.md
- [use-hover](https://kliping.pro/r/use-hover.json): Tracks whether the pointer is over an element. API: https://kliping.pro/llms/hooks/use-hover.md
- [use-active-element](https://kliping.pro/r/use-active-element.json): Tracks the element that currently has focus. API: https://kliping.pro/llms/hooks/use-active-element.md
- [use-document-visibility](https://kliping.pro/r/use-document-visibility.json): Tracks whether the browser tab is currently visible. API: https://kliping.pro/llms/hooks/use-document-visibility.md
- [use-is-online](https://kliping.pro/r/use-is-online.json): Tracks whether the browser considers itself online. API: https://kliping.pro/llms/hooks/use-is-online.md
- [use-hash](https://kliping.pro/r/use-hash.json): The # part of the page URL, readable and writable. API: https://kliping.pro/llms/hooks/use-hash.md
- [use-is-match-media](https://kliping.pro/r/use-is-match-media.json): Tracks whether a media query currently matches. API: https://kliping.pro/llms/hooks/use-is-match-media.md
- [use-os](https://kliping.pro/r/use-os.json): Detects the current operating system from the navigator. API: https://kliping.pro/llms/hooks/use-os.md
- [use-fps](https://kliping.pro/r/use-fps.json): Tracks how many frames per second the browser is rendering. API: https://kliping.pro/llms/hooks/use-fps.md
- [use-why-did-you-update](https://kliping.pro/r/use-why-did-you-update.json): Logs which props changed each time the component re-renders. API: https://kliping.pro/llms/hooks/use-why-did-you-update.md
- [use-title](https://kliping.pro/r/use-title.json): The page title, readable and writable. API: https://kliping.pro/llms/hooks/use-title.md
- [use-scroll-lock](https://kliping.pro/r/use-scroll-lock.json): Locks page scrolling for dialogs, drawers, and fullscreen menus. API: https://kliping.pro/llms/hooks/use-scroll-lock.md
- [use-element-size](https://kliping.pro/r/use-element-size.json): Tracks the size of an element using ResizeObserver. API: https://kliping.pro/llms/hooks/use-element-size.md
- [use-in-viewport](https://kliping.pro/r/use-in-viewport.json): Tracks whether an element is currently visible on screen. API: https://kliping.pro/llms/hooks/use-in-viewport.md
- [use-text-selection](https://kliping.pro/r/use-text-selection.json): Tracks the currently selected text and its position on screen. API: https://kliping.pro/llms/hooks/use-text-selection.md
- [use-battery](https://kliping.pro/r/use-battery.json): Tracks the device battery status. API: https://kliping.pro/llms/hooks/use-battery.md
- [use-network](https://kliping.pro/r/use-network.json): Tracks network status in as much detail as the browser exposes. API: https://kliping.pro/llms/hooks/use-network.md
- [use-mouse](https://kliping.pro/r/use-mouse.json): Tracks the pointer position, with touch support. API: https://kliping.pro/llms/hooks/use-mouse.md
- [use-clipboard](https://kliping.pro/r/use-clipboard.json): Copies to the clipboard with a copied flag that resets automatically. API: https://kliping.pro/llms/hooks/use-clipboard.md
- [use-fullscreen](https://kliping.pro/r/use-fullscreen.json): Controls fullscreen mode, with all vendor prefixes still required. API: https://kliping.pro/llms/hooks/use-fullscreen.md
- [use-stick-to-bottom](https://kliping.pro/r/use-stick-to-bottom.json): Keeps a scroll container pinned to the bottom as its content grows. API: https://kliping.pro/llms/hooks/use-stick-to-bottom.md

## Lib (5)

- [is-browser](https://kliping.pro/r/is-browser.json): A guard that keeps code touching window from running on the server. API: https://kliping.pro/llms/hooks/is-browser.md
- [target](https://kliping.pro/r/target.json): Resolves a DOM element from a ref, getter, element, or component instance. API: https://kliping.pro/llms/hooks/target.md
- [try-on-mounted](https://kliping.pro/r/try-on-mounted.json): Runs a callback after the component mounts, or immediately when there is no component. API: https://kliping.pro/llms/hooks/try-on-mounted.md
- [create-context](https://kliping.pro/r/create-context.json): Creates a provider and injector pair for the context of a compound component. API: https://kliping.pro/llms/hooks/create-context.md
- [highlight-code](https://kliping.pro/r/highlight-code.json): Highlights code with Shiki, lazy-loaded so it adds zero bytes until used. API: https://kliping.pro/llms/hooks/highlight-code.md