Copperx UI components examples

Copperx

A file upload component with a dashed border dropzone, a label above, and helper text below.

• File upload input

Copperx

A data table displaying a list of invoices with columns for date, amount, invoice number, customer, due date, status, and a more options menu.

• Table

Copperx

A table displaying itemized invoice details, including quantity, price, and amount, followed by a subtotal and total amount due.

• Table

Copperx

A form field for entering a phone number, featuring a country code selector with a flag icon and a text input for the number.

• Input phone number

Copperx

A drag-and-drop file upload area with a dashed border, an upload icon, and text indicating accepted file types and size limits.

• File upload input

Copperx

A form field for selecting a blockchain network, featuring a label, a management link, and a multi-select dropdown currently showing one selected network as a removable tag.

• Input tag

Copperx

A settings row featuring a label on the left and an active toggle switch on the right, accompanied by a status label and a detailed helper text explaining the feature.

• Toggle/Switch

Copperx

A vertical sidebar navigation menu featuring a logo, primary navigation links with icons, a nested submenu for settings, and a footer link.

• Vertical navigation

Copperx

A testimonial card featuring a company logo, a quote from a customer, and the customer's avatar, name, and title.

• Testimonial

Copperx

A vertical list of selectable product cards acting as a radio group. Each card includes an icon, title, description, and a radio button indicator. The first option is currently selected.

• Radio button

Copperx

A form for entering a 6-digit email authentication code, with five digits currently entered and one empty slot. It includes a title, instructional text with the user's email, and a link to resend the code.

• Input code

Copperx

A section displaying customer testimonials with company logos, quotes, and author details.

• Testimonial