# Styleframe

## Documentation Sets

- [Styleframe - Type-safe, Composable CSS in TypeScript](https://styleframe.dev/llms-full.txt)

## Landing

- [Cookies](https://styleframe.dev/raw/cookies.md)
- [Figma Plugin - Design Tokens Sync](https://styleframe.dev/raw/figma.md): Styleframe is the source of truth for your design tokens. Sync variables between code and Figma using the W3C DTCG format, with full multi-mode support.
- [Type-safe Composable CSS](https://styleframe.dev/raw/index.md): From simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API — AI-ready by design.
- [License](https://styleframe.dev/raw/license.md)
- [Pricing](https://styleframe.dev/raw/pricing.md): Write composable, type-safe, future-proof Design Systems code using styleframe's powerful TypeScript CSS API.
- [Privacy](https://styleframe.dev/raw/privacy.md)
- [styleframe Pro - Premium Design System Tools](https://styleframe.dev/raw/pro.md): Build beautiful design systems in minutes with styleframe Pro's premium composables, advanced features, and mathematical precision.
- [Utility Scanner - Automatic CSS Generation](https://styleframe.dev/raw/scanner.md): Write utility classes directly in your markup. Styleframe's utility scanner detects them and generates only the CSS you use at build time — type-safe, framework-agnostic, with full HMR support.
- [Terms](https://styleframe.dev/raw/terms.md)

## DocsGettingStarted

- [Introduction](https://styleframe.dev/raw/docs/getting-started/introduction.md): Welcome to styleframe - the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript.
- [Installation](https://styleframe.dev/raw/docs/getting-started/installation.md): Get started with styleframe in your project. Choose the installation method that best fits your setup.
- [Manual Vite Installation](https://styleframe.dev/raw/docs/getting-started/installation/manual/vite.md): Installation instructions for a custom Vite setup with styleframe. Get started with styleframe in your Vite project
- [Manual Nuxt Installation](https://styleframe.dev/raw/docs/getting-started/installation/manual/nuxt.md): Installation instructions for a custom Nuxt setup with styleframe. Get started with styleframe in your Nuxt project
- [Vite Installation](https://styleframe.dev/raw/docs/getting-started/installation/vite.md): Get started with styleframe in your Vite project.
- [Nuxt Installation](https://styleframe.dev/raw/docs/getting-started/installation/nuxt.md): Get started with styleframe in your Nuxt project.
- [Custom Installation](https://styleframe.dev/raw/docs/getting-started/installation/custom.md): Get started with styleframe in your project.
- [Guides](https://styleframe.dev/raw/docs/getting-started/guides.md): Step-by-step tutorials and practical examples to help you get the most out of Styleframe
- [Create a Design System in Under 15 Minutes](https://styleframe.dev/raw/docs/getting-started/guides/create-design-system-in-under-15-minutes.md): Build a complete, production-ready design system with Styleframe. Stand up tokens, themes, semantic typography, utilities, and ready-made component recipes – all type-safe and theme-aware.
- [Implementing a Theme Switcher](https://styleframe.dev/raw/docs/getting-started/guides/theme-switcher.md): Learn how to implement a dynamic theme switcher in your application using Styleframe's data-theme attribute system.
- [Styleframe vs. Vanilla Extract](https://styleframe.dev/raw/docs/getting-started/comparisons/vanilla-extract.md): Comparing Styleframe and Vanilla Extract - two zero-runtime, type-safe CSS-in-TypeScript approaches for large-scale design systems.
- [Styleframe vs. Tailwind CSS](https://styleframe.dev/raw/docs/getting-started/comparisons/tailwind.md): Compare Styleframe's type-safe design system approach with Tailwind CSS's utility-first framework.
- [Comparisons](https://styleframe.dev/raw/docs/getting-started/comparisons.md): See how Styleframe compares to other CSS-in-TypeScript solutions and styling frameworks
- [Licensing](https://styleframe.dev/raw/docs/getting-started/licensing.md): Understanding Styleframe's Open Source MIT license and Styleframe Pro's commercial license for production use.
- [W3C Design Tokens Community Group (DTCG)](https://styleframe.dev/raw/docs/getting-started/integrations/dtcg.md): A spec-conformant parser, validator, and serializer for the W3C Design Tokens Community Group format — the interchange layer behind the styleframe dtcg export command.
- [Figma Plugin](https://styleframe.dev/raw/docs/getting-started/integrations/figma-plugin.md): Sync your Styleframe design tokens with Figma using the plugin and CLI commands for bidirectional token synchronization.
- [Storybook](https://styleframe.dev/raw/docs/getting-started/integrations/storybook.md): Integrate Styleframe with Storybook to showcase your design system with type-safe recipes, design tokens, and dark mode support.
- [CLI Reference](https://styleframe.dev/raw/docs/getting-started/tooling/cli.md): Use the Styleframe CLI to initialize projects and build optimized CSS from your configuration files.
- [Utility Scanner](https://styleframe.dev/raw/docs/getting-started/tooling/scanner.md): Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed.

## DocsApi

- [API Overview](https://styleframe.dev/raw/docs/api.md): Explore Styleframe's comprehensive API for building type-safe, maintainable design systems. From variables and selectors to themes and composables, discover how to create scalable styling architectures.
- [Styleframe Instance](https://styleframe.dev/raw/docs/api/instance.md): Learn how to create and configure Styleframe instances to build type-safe, maintainable design systems with full control over CSS generation.
- [Variables](https://styleframe.dev/raw/docs/api/variables.md): Styleframe variables are the foundation of your design system. They let you define design tokens such as colors, spacing, typography, and more.
- [Selectors](https://styleframe.dev/raw/docs/api/selectors.md): Styleframe selectors allow you to create CSS rules with type-safe property definitions. They provide a powerful way to style your components.
- [At-Rules](https://styleframe.dev/raw/docs/api/at-rules.md): Styleframe at-rules enable you to create modern CSS features like container queries, feature detection, font loading, and more with full type safety and auto-complete support.
- [Media Queries](https://styleframe.dev/raw/docs/api/media-queries.md): Styleframe media queries enable responsive design with type-safe breakpoint definitions. Create adaptive layouts that work seamlessly across all device sizes.
- [Keyframes](https://styleframe.dev/raw/docs/api/keyframes.md): Styleframe keyframes enable you to create smooth CSS animations with type-safe property definitions. Build engaging motion effects that enhance user experience across your application.
- [Interpolation](https://styleframe.dev/raw/docs/api/interpolation.md): Styleframe interpolation provides a powerful CSS template literal utility that enables dynamic value insertion with full type safety. Create flexible, maintainable CSS values that adapt to your design system.
- [Utilities](https://styleframe.dev/raw/docs/api/utilities.md): Styleframe utilities provide reusable, single-purpose CSS classes with full type safety and recipe support. Build consistent, maintainable styling systems with atomic design patterns.
- [Utility Modifiers](https://styleframe.dev/raw/docs/api/utility-modifiers.md): Styleframe utility modifiers transform utility declarations to create conditional variations like hover states, media queries, and breakpoints. Build composable utility variants with full type safety.
- [Themes](https://styleframe.dev/raw/docs/api/themes.md): Styleframe themes provide powerful design system theming capabilities with type-safe variable overrides. Create consistent light/dark modes, brand variants, and user personalization with ease.
- [Recipes Overview](https://styleframe.dev/raw/docs/api/recipes.md): Styleframe recipes provide powerful component variants with type-safe configuration options. Create flexible, reusable UI components with consistent styling patterns and runtime variant selection.
- [Runtime](https://styleframe.dev/raw/docs/api/recipes/runtime.md): Learn how to use Styleframe recipes in your components with the runtime package. Understand how variant resolution works and how to integrate recipes into your React, Vue, or other framework components.
- [Output Format](https://styleframe.dev/raw/docs/api/recipes/output-format.md): Learn how Styleframe recipes generate CSS utility classes, understand the connection between recipe fields and utilities, and master the class naming conventions.
- [Composables](https://styleframe.dev/raw/docs/api/composables.md): Composables are design patterns for building reusable, shareable design system building blocks. They provide idempotency, configurability, and composition for variables, selectors, utilities, and recipes.
- [Imports](https://styleframe.dev/raw/docs/api/imports.md): Learn the two ways to import Styleframe styles into your application—global imports for centralized design systems and per-file imports for component-scoped styling.
- [Merging](https://styleframe.dev/raw/docs/api/merging.md): Combine multiple Styleframe instances into a single unified configuration. Perfect for composing design systems, sharing configurations across projects, or building modular styling architectures.
- [Imports](https://styleframe.dev/raw/docs/api/imports.md): Understand how Styleframe's single-instance architecture works — from the global config, through extension files, to consuming styles and exports in your application code.

## DocsTheme

- [Components Overview](https://styleframe.dev/raw/docs/theme/components.md): Explore Styleframe's component recipes — pre-built, composable styling patterns for common UI elements like badges, buttons, and more.
- [Button](https://styleframe.dev/raw/docs/theme/components/button.md): An interactive control component for actions and navigation. Supports multiple colors, visual styles, sizes, and states through the recipe system.
- [Hamburger Menu](https://styleframe.dev/raw/docs/theme/components/hamburger-menu.md): A three-bar toggle button that animates into a different glyph (X, arrow, plus, or minus) when opened. Supports three colors, three sizes, seven animations, and an active state through the recipe system.
- [Breadcrumb](https://styleframe.dev/raw/docs/theme/components/breadcrumb.md): A navigation aid that displays the user's location within a site hierarchy. Supports three colors, three sizes, and active/disabled states through a two-part recipe system, with a CSS-variable-driven separator.
- [Nav](https://styleframe.dev/raw/docs/theme/components/nav.md): A navigation component for horizontal and vertical link lists. Supports multiple colors, visual styles, sizes, and active/disabled states through a two-part recipe system.
- [Pagination](https://styleframe.dev/raw/docs/theme/components/pagination.md): A navigation component for moving between pages of content. Supports horizontal and vertical orientations, three colors, six visual styles, three sizes, and active/disabled states through a three-part recipe system.
- [Sidebar](https://styleframe.dev/raw/docs/theme/components/sidebar.md): A persistent navigation surface for application shells. Composed of fifteen coordinated recipes — panel, header, content, footer, groups, menus, interactive menu buttons, sub-menus, separators, actions, and badges — with three colors, three surface styles, three sizes, and a collapsible icon rail.
- [Tabs](https://styleframe.dev/raw/docs/theme/components/tabs.md): An accessible tabbed interface for organizing content into selectable panels. Composed of a root wrapper, a tab list, individual triggers, and content panels — with line, pill, and soft styles, light/dark/neutral surfaces, three sizes, and horizontal or vertical orientation.
- [Badge](https://styleframe.dev/raw/docs/theme/components/badge.md): A compact labeling component for status indicators, counts, and categorization. Supports multiple colors, visual styles, and sizes through the recipe system.
- [Callout](https://styleframe.dev/raw/docs/theme/components/callout.md): A contextual feedback component for alerts, notifications, and inline messages. Supports multiple colors, visual styles, sizes, and orientations through the recipe system.
- [Chip](https://styleframe.dev/raw/docs/theme/components/chip.md): A status indicator component positioned at the corner of an element. Supports multiple colors, visual styles, sizes, positions, and inset mode through the recipe system.
- [Progress](https://styleframe.dev/raw/docs/theme/components/progress.md): A progress indicator component with a track and fill bar. Supports multiple colors, sizes, orientations, inverted fill direction, and indeterminate animations through the recipe system.
- [Skeleton](https://styleframe.dev/raw/docs/theme/components/skeleton.md): A loading placeholder component that displays a pulsing gray block to indicate content is being loaded. Supports multiple sizes and a rounded option through the recipe system.
- [Spinner](https://styleframe.dev/raw/docs/theme/components/spinner.md): A loading spinner component with color, size, and optional overlay — built as a multi-part recipe system with SVG-based animation.
- [Calendar](https://styleframe.dev/raw/docs/theme/components/calendar.md): A date-grid styling recipe with selected, today, range, booked, disabled, and outside-month day states, week numbers, month/year selectors, presets and a time-picker footer, plus a custom cell size through the recipe system.
- [Checkbox](https://styleframe.dev/raw/docs/theme/components/checkbox.md): A custom checkbox built on the native input, with a CSS checkmark, checked, indeterminate, disabled, and focus states, light, dark, and neutral surface colors, and three sizes through the recipe system.
- [Checkbox Group](https://styleframe.dev/raw/docs/theme/components/checkbox-group.md): A layout component for arranging a set of checkboxes with shared orientation and spacing. Supports vertical and horizontal layouts and three gap sizes through the recipe system.
- [Color Picker](https://styleframe.dev/raw/docs/theme/components/color-picker.md): A color selection control composed of a saturation/value selector square, a vertical hue track, and shared draggable thumbs. Renders any color through a CSS variable and gradients, with five sizes through the recipe system.
- [Field Group](https://styleframe.dev/raw/docs/theme/components/field-group.md): A layout component for joining buttons, inputs, selects, and other bordered controls into a single unit with merged borders and shared orientation. Supports horizontal and vertical layouts plus full-width block mode through the recipe system.
- [Input](https://styleframe.dev/raw/docs/theme/components/input.md): A text-field component with a wrapper-owned visual surface, inline prefix/suffix addons, and invalid/disabled/readonly states. Supports light, dark, and neutral colors, default/soft/ghost styles, and three sizes through the recipe system.
- [OTP](https://styleframe.dev/raw/docs/theme/components/otp.md): A one-time-password / pin input — a row of single-character cells with light, dark, and neutral surface colors, default, soft, and ghost styles, three sizes, and invalid, disabled, and focus states through the recipe system.
- [Radio](https://styleframe.dev/raw/docs/theme/components/radio.md): A custom radio built on the native input, with a CSS dot indicator, checked, disabled, and focus states, light, dark, and neutral surface colors, and three sizes through the recipe system.
- [Radio Group](https://styleframe.dev/raw/docs/theme/components/radio-group.md): A layout component for arranging a set of radios with shared orientation and spacing. Supports vertical and horizontal layouts and three gap sizes through the recipe system.
- [Select](https://styleframe.dev/raw/docs/theme/components/select.md): A multi-select form control composed of a trigger, a floating listbox panel, selectable options, dismissable value chips, a chevron indicator, group labels, and separators. Supports light, dark, and neutral colors, per-part visual styles, and three sizes through the recipe system.
- [Slider](https://styleframe.dev/raw/docs/theme/components/slider.md): An input control for selecting a value from a range by dragging a thumb along a track. Composed of a root, track, range, and thumb recipe, with color, size, and orientation options through the recipe system.
- [Switch](https://styleframe.dev/raw/docs/theme/components/switch.md): A switch built on the native checkbox input, with a sliding knob, on, disabled, and focus states, light, dark, and neutral track colors, and three sizes through the recipe system.
- [Textarea](https://styleframe.dev/raw/docs/theme/components/textarea.md): A multi-line text-field component with a wrapper-owned visual surface, inline prefix/suffix addons, a resize axis, and invalid/disabled/readonly states. Supports light, dark, and neutral colors, default/soft/ghost styles, and three sizes through the recipe system.
- [Toggle](https://styleframe.dev/raw/docs/theme/components/toggle.md): A button-styled two-state control with an on state driven by aria-pressed, solid, outline, and ghost visual styles, light, dark, and neutral surface colors, and three sizes through the recipe system.
- [Toggle Group](https://styleframe.dev/raw/docs/theme/components/toggle-group.md): A layout component for arranging a set of toggles with shared orientation and spacing. Supports horizontal and vertical layouts and three gap sizes through the recipe system.
- [ContextMenu](https://styleframe.dev/raw/docs/theme/components/context-menu.md): A right-click menu surface for contextual actions. Composed of six coordinated recipes (panel, item, separator, label, shortcut, sub-trigger) with inset, destructive, checkbox/radio, and submenu support across three colors, three visual styles, and three sizes.
- [Drawer](https://styleframe.dev/raw/docs/theme/components/drawer.md): An edge-anchored, slide-out panel composed of overlay, container, header, body, and footer sections. Anchors to any screen edge and supports multiple colors, visual styles, and sizes through the recipe system.
- [Dropdown](https://styleframe.dev/raw/docs/theme/components/dropdown.md): A menu-style floating panel for presenting actions or navigation options. Composed of five coordinated recipes (panel, item, separator, label, arrow) with three colors, three visual styles, and three sizes through the recipe system.
- [Modal](https://styleframe.dev/raw/docs/theme/components/modal.md): A dialog component for focused interactions, composed of overlay, container, header, body, and footer sections. Supports multiple colors, visual styles, and sizes through the recipe system.
- [Popover](https://styleframe.dev/raw/docs/theme/components/popover.md): A floating container component with structured sections and a directional arrow for contextual content. Supports multiple colors, visual styles, and sizes through the recipe system.
- [Tooltip](https://styleframe.dev/raw/docs/theme/components/tooltip.md): A floating label component for supplementary information, composed of a content bubble and directional arrow. Supports multiple colors, visual styles, and sizes through the recipe system.
- [Accordion](https://styleframe.dev/raw/docs/theme/components/accordion.md): A stacked set of collapsible disclosure panels for progressively revealing content. Supports multiple colors, an enclosed or chromeless style, and sizes through the recipe system.
- [Avatar](https://styleframe.dev/raw/docs/theme/components/avatar.md): A user avatar with an image and an automatic initials fallback — circular or square, with an optional status badge — built as a multi-part recipe system.
- [Avatar Group](https://styleframe.dev/raw/docs/theme/components/avatar-group.md): A stacked, overlapping set of avatars with a separating ring and an optional "+N" overflow count.
- [Card](https://styleframe.dev/raw/docs/theme/components/card.md): A structured container component for grouping related content with header, body, and footer sections. Supports multiple colors, visual styles, and sizes through the recipe system.
- [Media](https://styleframe.dev/raw/docs/theme/components/media.md): A flexible layout primitive that places visual content alongside text content. Built for comments, social posts, list items, and any UI where a fixed-size visual sits next to flowing text.
- [PageHero](https://styleframe.dev/raw/docs/theme/components/page-hero.md): A multi-part landing-section primitive composed of a section container plus body, headline, title, description, actions, links, and image sub-recipes. Supports light, dark, and neutral colors with size, orientation, and alignment axes.
- [Placeholder](https://styleframe.dev/raw/docs/theme/components/placeholder.md): A visual placeholder container with a dashed border and hatch pattern for layout prototyping, wireframing, and empty states. Uses the recipe system with dark mode support.
- [ChatMessage](https://styleframe.dev/raw/docs/theme/components/chat-message.md): A chat-bubble component for AI chat transcripts with optional leading avatar, content bubble, and hover-revealed actions row. Side-aware layout with logical start/end alignment, plus compound variants that handle every color-variant combination.
- [Design Tokens Overview](https://styleframe.dev/raw/docs/theme/design-tokens.md): Explore Styleframe's comprehensive design token system. Create consistent, scalable design systems with composable functions for colors, typography, spacing, and more.
- [Design Tokens Preset](https://styleframe.dev/raw/docs/theme/design-tokens/preset.md): Quickly bootstrap a complete design token system with sensible defaults using the useDesignTokensPreset composable.
- [Border Radiuses Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/border-radiuses.md): Create and manage border radius design tokens with CSS variables for consistent rounded corners and curved edges across your application.
- [Borders Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/borders.md): Create and manage border design tokens with CSS variables for consistent border styles, widths, and colors across your application.
- [Box Shadows Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/box-shadows.md): Create and manage box shadow design tokens with CSS variables for consistent elevation and depth effects across your application.
- [Breakpoints Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/breakpoints.md): Create and manage responsive breakpoint design tokens with CSS variables for consistent media query handling and adaptive layouts across your application.
- [Colors Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/colors.md): Create and manage color design tokens with automatic, easily configurable variants, tints, and shades using the oklch color space.
- [Duration Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/duration.md): Create and manage duration design tokens with CSS variables for consistent animation and transition timing across your application.
- [Easing Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/easing.md): Create and manage easing design tokens with CSS variables for consistent animation timing across your application.
- [Fluid Responsive Design](https://styleframe.dev/raw/docs/theme/design-tokens/fluid-design.md): Create fluid, responsive designs that scale smoothly across all viewport sizes using mathematical precision. Based on the Utopia fluid type scale for optimal readability without breakpoints.
- [Fluid Responsive Design - Viewport](https://styleframe.dev/raw/docs/theme/design-tokens/fluid-design/viewport.md): Create fluid, responsive design tokens that scale smoothly between viewport sizes using auto-generated complex CSS calculations.
- [Fluid Responsive Design - Typography](https://styleframe.dev/raw/docs/theme/design-tokens/fluid-design/typography.md): Create fluid typography systems that scale smoothly across viewports using mathematical modular scales and CSS clamp functions.
- [Scales Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/scales.md): Create modular scale systems for typography and spacing using mathematical ratios based on musical intervals and the golden ratio.
- [Spacing Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/spacing.md): Create and manage spacing design tokens with CSS variables for consistent layout spacing, padding, margins, and gaps across your application.
- [Typography Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/typography.md): Create and manage typography design tokens with CSS variables for consistent text styling across your application.
- [Z-Index Design Tokens](https://styleframe.dev/raw/docs/theme/design-tokens/z-index.md): Create and manage z-index design tokens with CSS variables for consistent stacking order across your application.
- [Elements Overview](https://styleframe.dev/raw/docs/theme/elements.md): Apply consistent, theme-aware base styles to HTML elements using Styleframe's element composables for body, headings, links, lists, and more.
- [Global Preset](https://styleframe.dev/raw/docs/theme/elements/preset.md): Apply all HTML element base styles in a single call with useGlobalPreset, including body, headings, links, lists, code, focus, and selection.
- [Body Element](https://styleframe.dev/raw/docs/theme/elements/body.md): Style the body element with configurable color, background, font family, font size, and line height using the useBodyElement composable.
- [Headings Element](https://styleframe.dev/raw/docs/theme/elements/headings.md): Style heading elements h1 through h6 with configurable font family, weight, line height, color, and per-level sizes using the useHeadingElement composable.
- [Paragraph Element](https://styleframe.dev/raw/docs/theme/elements/paragraphs.md): Style paragraph elements with configurable top and bottom margins using the useParagraphElement composable.
- [Link Element](https://styleframe.dev/raw/docs/theme/elements/links.md): Style anchor elements with configurable color, text decoration, and hover states using the useLinkElement composable.
- [Lists Element](https://styleframe.dev/raw/docs/theme/elements/lists.md): Style ordered and unordered list elements with configurable margin and padding using the useOlElement and useUlElement composables.
- [Definition Lists Element](https://styleframe.dev/raw/docs/theme/elements/definition-lists.md): Style definition list elements (dl, dt, dd) with configurable margin, font weight, and spacing using the useDlElement, useDtElement, and useDdElement composables.
- [Abbreviation Element](https://styleframe.dev/raw/docs/theme/elements/abbreviation.md): Style abbreviation elements with configurable cursor and text decoration using the useAbbrElement composable.
- [Code Element](https://styleframe.dev/raw/docs/theme/elements/code.md): Style inline code and preformatted text blocks with configurable font family, font size, and spacing using the useCodeElement and usePreElement composables.
- [Kbd Element](https://styleframe.dev/raw/docs/theme/elements/kbd.md): Style keyboard input elements with configurable background, color, font, border radius, and padding using the useKbdElement composable.
- [Mark Element](https://styleframe.dev/raw/docs/theme/elements/mark.md): Style highlighted text elements with configurable background, color, and padding using the useMarkElement composable.
- [Image Element](https://styleframe.dev/raw/docs/theme/elements/image.md): Align image and SVG elements to vertical middle using the useImgElement composable.
- [Iframe Element](https://styleframe.dev/raw/docs/theme/elements/iframe.md): Remove the default border from iframe elements using the useIframeElement composable.
- [Caption Element](https://styleframe.dev/raw/docs/theme/elements/caption.md): Style table caption elements with configurable color, padding, and text alignment using the useCaptionElement composable.
- [Legend Element](https://styleframe.dev/raw/docs/theme/elements/legend.md): Style legend elements for proper form layout using the useLegendElement composable.
- [Output Elements](https://styleframe.dev/raw/docs/theme/elements/output.md): Style output and sample output elements using the useOutputElement and useSampElement composables.
- [Address Element](https://styleframe.dev/raw/docs/theme/elements/address.md): Style address elements with configurable bottom margin using the useAddressElement composable.
- [Horizontal Rule Element](https://styleframe.dev/raw/docs/theme/elements/horizontal-rule.md): Style horizontal rule elements with configurable border color, width, style, and margin using the useHrElement composable.
- [Focus State](https://styleframe.dev/raw/docs/theme/elements/focus.md): Apply consistent focus-visible outline styles across all elements with configurable color, width, style, and offset using the useFocusState composable.
- [Selection State](https://styleframe.dev/raw/docs/theme/elements/selection.md): Style text selection with configurable background and text color using the useSelectionState composable.
- [Summary Element](https://styleframe.dev/raw/docs/theme/elements/summary.md): Set the cursor style on summary elements using the useSummaryElement composable.
- [Utility Modifiers Overview](https://styleframe.dev/raw/docs/theme/modifiers.md): Explore Styleframe's utility modifier composables for generating state-based, responsive, and structural variants of your utility classes with full type safety.
- [Utility Modifiers Presets](https://styleframe.dev/raw/docs/theme/modifiers/preset.md): Quickly register all modifier composables with the useModifiersPreset function for comprehensive modifier coverage in a single call.
- [ARIA State Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/aria-state.md): Create ARIA state modifiers for styling elements based on their ARIA attribute values with full type safety.
- [Directional Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/directional.md): Create directional modifiers for targeting elements based on text direction (RTL/LTR) with full type safety.
- [Form State Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/form-state.md): Create form state modifiers for styling form elements based on their validation and interaction states with full type safety.
- [Media & Preferences Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/media-preferences.md): Create media and preference modifiers for adaptive styling based on user preferences like dark mode, reduced motion, and more.
- [Other State Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/other-state.md): Create other state modifiers for targeting open and inert elements with full type safety.
- [Pseudo-Elements Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/pseudo-elements.md): Create pseudo-element modifiers for targeting element sub-parts like before, after, placeholder, and selection with full type safety.
- [Pseudo-State Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/pseudo-state.md): Create pseudo-state modifiers for interactive states like hover, focus, active, and more with full type safety.
- [Structural Modifiers](https://styleframe.dev/raw/docs/theme/modifiers/structural.md): Create structural modifiers for targeting elements by their position in the DOM tree with full type safety.
- [Utilities Overview](https://styleframe.dev/raw/docs/theme/utilities.md): Explore Styleframe's utility composables for generating CSS utility classes. Create flexible, reusable styling primitives with full type safety.
- [Utilities Presets](https://styleframe.dev/raw/docs/theme/utilities/preset.md): Quickly register all utility factories with the useUtilitiesPreset composable for seamless recipe integration and comprehensive utility class generation.
- [Accessibility Utilities](https://styleframe.dev/raw/docs/theme/utilities/accessibility.md): Create accessibility utilities for screen reader visibility and forced color adjustments with full type safety.
- [Animations Utilities](https://styleframe.dev/raw/docs/theme/utilities/animations.md): Create animation utilities for continuous motion effects and keyframe-based animations with full type safety.
- [Backgrounds Utilities](https://styleframe.dev/raw/docs/theme/utilities/backgrounds.md): Create background utilities for colors, images, sizing, positioning, and more with full type safety.
- [Borders Utilities](https://styleframe.dev/raw/docs/theme/utilities/borders.md): Create border utilities for colors, widths, radiuses, styles, outlines, and focus rings with full type safety.
- [Effects Utilities](https://styleframe.dev/raw/docs/theme/utilities/effects.md): Create effect utilities for shadows, opacity, and blend modes with full type safety.
- [Filters Utilities](https://styleframe.dev/raw/docs/theme/utilities/filters.md): Create filter utilities for blur, brightness, contrast, grayscale, and backdrop effects with full type safety.
- [Flexbox & Grid Utilities](https://styleframe.dev/raw/docs/theme/utilities/flexbox-grid.md): Create flexbox and grid layout utilities for building responsive layouts with full type safety.
- [Interactivity Utilities](https://styleframe.dev/raw/docs/theme/utilities/interactivity.md): Create interactivity utilities for cursor styles, pointer events, user selection, and scroll behavior with full type safety.
- [Layout Utilities](https://styleframe.dev/raw/docs/theme/utilities/layout.md): Create layout utilities for display, position, overflow, visibility, and more with full type safety.
- [Sizing Utilities](https://styleframe.dev/raw/docs/theme/utilities/sizing.md): Create sizing utilities for width, height, min/max dimensions with full type safety.
- [Spacing Utilities](https://styleframe.dev/raw/docs/theme/utilities/spacing.md): Create spacing utilities for margin and padding with directional variants and full type safety.
- [SVG Utilities](https://styleframe.dev/raw/docs/theme/utilities/svg.md): Create SVG utilities for fill, stroke, and stroke-width with full type safety.
- [Tables Utilities](https://styleframe.dev/raw/docs/theme/utilities/tables.md): Create table utilities for border collapse, spacing, layout, and caption positioning with full type safety.
- [Transforms Utilities](https://styleframe.dev/raw/docs/theme/utilities/transforms.md): Create transform utilities for rotate, scale, translate, skew, and perspective with full type safety.
- [Transitions Utilities](https://styleframe.dev/raw/docs/theme/utilities/transitions.md): Create transition utilities for smooth state changes with full type safety. Control which properties animate, timing, easing, and delays.
- [Typography Utilities](https://styleframe.dev/raw/docs/theme/utilities/typography.md): Create typography utilities for font families, sizes, weights, colors, alignment, and text decoration with full type safety.