Stock Indicator is a lightweight e-commerce component designed to communicate product availability clearly and elegantly.

No code. No setup complexity. Just a small component that solves a real problem.

What It Does

Each state can display custom labels, colors, and messaging, making it suitable for a wide range of products and brands.

Examples:

• In Stock

• 24 In Stock

• Only 3 Left

• Limited Availability

• Sold Out

• Out of Stock

Key Features

Optional Low-Stock Urgency

When inventory drops below the configured threshold, a subtle breathing pulse animation can appear around the status dot to create urgency without overwhelming the design.

Animated Status Dot

A live indicator dot visually communicates availability status and updates automatically based on inventory conditions.

Fully Responsive

Designed to work seamlessly across desktop, tablet, and mobile layouts.

Property Controls

Everything can be customized directly from the Properties Panel.

Stock Data

Control inventory behavior.

• Stock Count

Current inventory amount.

• Low Stock Threshold

The value at which the component switches into Low Stock mode.

Labels

Customize messaging for every state.

• In Stock Label

• Low Stock Label

• Out of Stock Label

• Show Count Toggle

Display or hide inventory numbers.

• Count Format

Customize how counts appear using the {count} placeholder.

Examples:

"{count} left"

"Only {count} remaining"

"{count} available"

Colors

Customize the visual appearance of the badge.

• In Stock Dot Color

• Low Stock Dot Color

• Out of Stock Dot Color

• Text Color

• Background Color

• Border Color

• Background Toggle

• Border Toggle

Typography

Adjust text styling.

• Font Family

• Font Size

• Font Weight

Shape & Layout

Fine-tune the component's appearance.

• Dot Size

• Horizontal Padding

• Vertical Padding

• Corner Radius

• Dot-to-Text Spacing