Spline UI components examples

Spline

A dark-themed feature grid displaying six distinct 3D design capabilities. Each feature is presented in a rounded card containing a 3D illustration, a title, and a brief description.

• Bento box

Spline

A vertical list of features with checkmark icons, typically found in a pricing or upgrade modal.

• Benefit List

Spline

A file card displaying a 3D cube icon placeholder for a thumbnail, with the file name below it currently selected for inline editing.

• Inline editing

Spline

• Artificial intelligence

Spline

A pill-shaped badge indicating a default status or selection.

• Badge

Spline

A vertical timeline displaying a chronological list of product updates, bug fixes, and improvements. Each entry features a date badge and a bulleted list of changes.

• Timeline & history

Spline

A dark-themed toast notification confirming an invitation was sent successfully.

• Notification Toast

Spline

A dark-themed input area displaying an email address as a removable tag, followed by a dropdown selector to assign a role to the invited members.

• Input tag

Spline

A dark-themed input area containing three removable email address tags.

• Input tag

Spline

A dark-themed banner prompting the user to upgrade their plan. It displays current seat usage and a call-to-action button.

• Upgrade your plan

Spline

An inline informational message with an icon, explaining limitations of a specific export format.

• Tips

Spline

An expanded informational alert box explaining the purpose of Drafts in the export process.

• Tips