Styleframe Logo
Composables

Paragraph Element

Style paragraph elements with configurable top and bottom margins using the useParagraphElement composable.

Overview

The useParagraphElement composable styles p elements with configurable top and bottom margins. By default, it removes the top margin and sets the bottom margin to your base spacing token.

useParagraphElement

function useParagraphElement(
    s: Styleframe,
    options?: WithThemes<ParagraphElementConfig>
): ParagraphElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useParagraphElement } from '@styleframe/theme';

const s = styleframe();

const { paragraphMarginTop, paragraphMarginBottom } = useParagraphElement(s);

export default s;

Default Values

OptionDefaultVariableExport
marginTop"0"--paragraph--margin-topparagraphMarginTop
marginBottom"@spacing"--paragraph--margin-bottomparagraphMarginBottom

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useParagraphElement } from '@styleframe/theme';

const s = styleframe();

const { paragraphMarginBottom } = useParagraphElement(s, {
    marginTop: '0',
    marginBottom: '@spacing.lg',
});

export default s;

Best Practices

  • Zero the top margin: The default marginTop: "0" follows the single-direction margin pattern, preventing margin collapse issues between adjacent elements.
  • Use spacing tokens: Reference @spacing or @spacing.lg for bottom margin to stay consistent with your layout system.
  • Keep paragraphs spaced apart: The bottom margin creates visual separation between paragraphs without requiring manual spacing.

Output

Style output and sample output elements using the useOutputElement and useSampElement composables.

Selection

Style text selection with configurable background and text color using the useSelectionState composable.