Elements Overview

Element composables apply sensible default styles to native HTML elements — body, headings, paragraphs, links, lists, code blocks, and more. Each composable creates CSS custom properties that you can override per-theme, giving you a fully customizable foundation layer without writing raw CSS.

Why Use Element Composables?

Element composables help you:

• Establish consistent base styles: Apply typographic and spacing defaults to every HTML element in one place.
• Enable theme-aware overrides: Each composable supports the WithThemes<Config> pattern, so dark mode or brand themes can override any property.
• Customize with CSS variables: Every style property is backed by a CSS custom property, making runtime overrides trivial.
• Avoid CSS resets from scratch: Get opinionated but sensible defaults for all common HTML elements out of the box.
• Compose incrementally: Use individual composables for fine-grained control, or useGlobalPreset to apply everything at once.

Quick Start

The fastest way to style all HTML elements is with useGlobalPreset:

import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

const { body, heading, link } = useGlobalPreset(s);

export default s;

This single call registers base styles for all HTML elements, focus outlines, and text selection — with sensible defaults that reference your design tokens.

Learn more about the Global Preset →

Composables

Text Content

Style the core text elements that make up the majority of page content.

Available composables:

• useBodyElement(): Set the base font family, size, line height, color, and background for the body element
• useHeadingElement(): Configure typography for h1 through h6 with per-level font sizes
• useParagraphElement(): Control paragraph spacing with top and bottom margins
• useLinkElement(): Define link colors and text decoration, including hover states

import { styleframe } from 'styleframe';
import { useBodyElement, useHeadingElement, useLinkElement } from '@styleframe/theme';

const s = styleframe();

const { bodyColor, bodyBackground } = useBodyElement(s);
const { headingH1FontSize } = useHeadingElement(s);
const { linkColor, linkHoverColor } = useLinkElement(s);

export default s;

Learn more about Body → · Headings → · Paragraphs → · Links →

Lists

Style ordered, unordered, and definition lists with consistent spacing.

Available composables:

• useOlElement(): Configure ordered list margin and padding
• useUlElement(): Configure unordered list margin and padding
• useDlElement(): Set definition list bottom margin
• useDtElement(): Control definition term font weight
• useDdElement(): Set definition description margins

import { styleframe } from 'styleframe';
import { useOlElement, useUlElement } from '@styleframe/theme';

const s = styleframe();

const { olMarginBottom, olPaddingLeft } = useOlElement(s);
const { ulMarginBottom, ulPaddingLeft } = useUlElement(s);

export default s;

Learn more about Lists → · Definition Lists →

Code & Inline Text

Style code blocks, keyboard input, sample output, abbreviations, and highlighted text.

Available composables:

• useCodeElement(): Set font family and size for inline code and samp elements
• usePreElement(): Configure preformatted text blocks with scroll overflow
• useKbdElement(): Style keyboard input elements with background, color, and padding
• useSampElement(): Set the font family for sample output elements
• useAbbrElement(): Configure abbreviation cursor and text decoration
• useMarkElement(): Style highlighted text with background color and padding

import { styleframe } from 'styleframe';
import { useCodeElement, useKbdElement } from '@styleframe/theme';

const s = styleframe();

const { codeFontFamily, codeFontSize } = useCodeElement(s);
const { kbdBackground, kbdColor } = useKbdElement(s);

export default s;

Learn more about Code → · Kbd → · Mark → · Abbreviation → · Sample Output →

Structural Elements

Style dividers, table captions, addresses, and other structural HTML elements.

Available composables:

• useHrElement(): Configure horizontal rule border style, color, and margin
• useCaptionElement(): Set table caption color, padding, and text alignment
• useAddressElement(): Control address element margins and font style

import { styleframe } from 'styleframe';
import { useHrElement, useCaptionElement } from '@styleframe/theme';

const s = styleframe();

const { hrBorderColor, hrMargin } = useHrElement(s);
const { captionColor, captionTextAlign } = useCaptionElement(s);

export default s;

Learn more about Horizontal Rule → · Caption → · Address →

Global States

Apply consistent focus and selection styles across all elements.

Available composables:

• useFocusState(): Define the :focus-visible outline color, width, style, and offset
• useSelectionState(): Set ::selection background and text color

import { styleframe } from 'styleframe';
import { useFocusState, useSelectionState } from '@styleframe/theme';

const s = styleframe();

const { focusOutlineColor } = useFocusState(s);
const { selectionBackground, selectionColor } = useSelectionState(s);

export default s;

Learn more about Focus → · Selection →

Simple Elements

These composables apply fixed styles with no configuration options.

Available composables:

• useImgElement(): Aligns img and svg elements to vertical-align: middle
• useIframeElement(): Removes the default border from iframe elements
• useOutputElement(): Sets output elements to display: inline-block
• useLegendElement(): Styles legend elements for proper form layout
• useSummaryElement(): Sets cursor: pointer on summary elements

Learn more about Image → · Iframe → · Output → · Legend → · Summary →

Element Reference

Best Practices

• Use useGlobalPreset for new projects: It applies all element styles in a single call with sensible defaults
• Disable elements you don't need: Pass false to any element in the preset config to skip it entirely
• Reference design tokens: Element defaults use @ references like @color.primary and @spacing, so they stay in sync with your token system
• Override per-theme: Use the themes option to customize element styles for dark mode or other themes without duplicating config
• Compose individually when needed: For fine-grained control, use individual composables instead of the preset

Next Steps

• Quick setup? Start with the Global Preset to apply all element styles at once
• Customizing text? Check out Body, Headings, and Links
• Working with code? See Code and Kbd
• Need accessible focus styles? Learn about Focus