Design System

UI Components

Four composable building blocks used throughout this site. Each component is built with class-variance-authority for variant management and CSS custom properties for automatic light/dark mode support.

How and why this system was designed: Design System Architecture →

Button

A polymorphic button with four visual variants and three sizes. Supports the Radix asChild pattern to apply button styles to any element without wrapping it in an extra DOM node.

Variants

Sizes

States

Link as button

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'ghost' \| 'outline'	'primary'	Visual style of the button.
size	'sm' \| 'md' \| 'lg'	'md'	Controls padding and font size.
asChild	boolean	false	Passes all styles to the direct child via Radix Slot (polymorphic rendering).
disabled	boolean	false	Disables interaction and reduces opacity to 50%.
...rest	ButtonHTMLAttributes<HTMLButtonElement>	-	All native button attributes are forwarded.

button.tsxtsx

Badge

A pill-shaped label for status indicators and metadata tags. Uses the same semantic color tokens as Callout, keeping the palette consistent across the system.

Variants

DefaultSuccessWarningMuted

Sizes

SmallMediumLarge

Prop	Type	Default	Description
variant	'default' \| 'success' \| 'warning' \| 'muted'	'default'	Color theme of the badge.
size	'sm' \| 'md' \| 'lg'	'md'	Controls padding and font size.
...rest	HTMLAttributes<HTMLSpanElement>	-	All native span attributes are forwarded.

badge.tsxtsx

Callout

A bordered box for surfacing important information inline with content. The optional title renders in a variant-matched color. Omit it for body-only callouts.

Info

Use this for general tips or contextual information.

Success

The operation completed successfully.

Warning

This action cannot be undone.

Note

Worth keeping in mind as you proceed.

A callout without a title, for body-only content.

Prop	Type	Default	Description
variant	'info' \| 'success' \| 'warning' \| 'note'	'info'	Color theme applied to border, background, and title.
title	string	undefined	Optional heading rendered above the body content.
children	ReactNode	-	Body content displayed below the title.
...rest	HTMLAttributes<HTMLDivElement>	-	All native div attributes are forwarded.

callout.tsxtsx

InlineCode

A minimal <code> wrapper for short snippets inline with prose. Uses --inline-code-bg so it adapts to the active theme automatically.

Use useState for local component state and useReducer when logic grows complex.

Install the package: npm install @render-px/ui

Prop	Type	Default	Description
children	ReactNode	-	Code content to display.
className	string	''	Additional CSS classes merged into the element.
...rest	HTMLAttributes<HTMLElement>	-	All native code element attributes are forwarded.

inline-code.tsxtsx