React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

TotalAmount

Displays the total amount with optional label, used in checkout and order summaries

Interactive Playground

Customize the total amount properties and see the changes in real-time

Total$99.00

All Layouts

Different layout variants

default Layout

Total$99.00

opaque Layout

Total$99.00

Common Use Cases

Different total amount configurations

Basic Total

Total$99.00

With Tax Information

Total$99.00
Includes $9.00 tax

Opaque Layout with Label

Grand Total$149.99
All taxes included

Different Currencies

Total (USD)$99.00
Total (EUR)€89.00
Total (GBP)£79.00

API Reference

Props

title

string (optional) - Label for the total (e.g., "Total")

layout

'default' | 'opaque' - Layout variant (default: 'default')

label

React.ReactNode (optional) - Additional label text (e.g., tax information)

theme

any (optional) - Theme configuration object

className

string (optional) - Additional CSS classes

children

React.ReactNode - The amount to display

Features

  • •Automatically adapts to the current theme
  • •Two layout variants: default (with dashed line) and opaque (with background)
  • •Optional label for additional information (taxes, fees, etc.)
  • •Responsive typography and spacing
  • •Decorative icon support (theme-dependent)