Design System Sandbox

This is a sandbox for the design system.

Spacing variables from props are parsed as css variables:
cssVar('spacing-md') => var(--spacing-md)

Test


            <TestContainer
              $padding='spacing-md'
              $margin='spacing-md'
              $borderRadius='radius-xs'
            >
              <p>Test</p>
            </TestContainer>
            
Light

Dark

Light

Gradient Light

Gradient Dark

Button CTA Button CTA Button CTA

Button CTA

Button CTA Button CTA Button CTA

Heading 3XL

Heading 2XL

Heading XL

Heading LG

Heading MD

Heading SM

Heading XS

Paragraph XL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph LG - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph MD - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph SM - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph XS - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Custom Font Size Heading

Custom Line Height Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Custom Font Weight Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Multiple Custom Properties - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Layout Components

Basic Layouts

Auto (4 cols)

Auto (3 cols)

Responsive Columns

Auto (4 cols)

Custom Columns

Nested Grids

SectionLayout Component Style Guide

Section with Brand Solid Background

Input Components

Text Input with Slider

Slider Value Display

Text Input - Small

Small Input

Text Input - Medium

Medium Input

Text Input - Large

Large Input

Text Input - Required

Required Input*

Text Input - States

Disabled Input

Non-actionable Input

Error Input

This field is required

Slider Input - Default

Default Slider (0-100)

Current value: 50

Slider Input - Custom Range

Custom Range Slider (0-50)

Current value: 25

Slider Input - With Steps

Step Slider (0-100, step 10)

Current value: 0

Slider Input - States

Disabled Slider

Current value: 75

Select Field - Default

Default Select

Select Field - Required

Required Select*

Select Field - States

Disabled Select

Error Select

This field is required

TabbedFeaturesWizard

1. Your goals

2. Your business

3. Pick a time

Step 1: Your goals

Tell us about your goals. This is the first step of the wizard.

Step 2: Your business

Tell us about your business. Click the button below to unlock step 3.

Step 3: Pick a time

Choose a time that works for you. This step was initially locked.

Badge

Pill Color (default)

gray

brand

error

warning

success

Badge Color

gray

brand

error

warning

success

Badge Modern

gray

brand

error

warning

success

RadioGroup

Radio Items with Label

What best describes your business?*

My audience lives on social, email, or a different platform

I'm dealing with algorithm changes, declining open rates, and AI flooding the feed—I need to own the relationship.

I'm duct-taped across multiple tools and nothing talks to each other

It's a bad experience for my members and hard to manage as an admin.

I want to monetize my community but don't know where to start

I need a platform that makes it easy to charge for access and deliver real value.

Radio Items (Interactive)

My audience lives on social, email, or a different platform

I'm dealing with algorithm changes, declining open rates, and AI flooding the feed—I need to own the relationship.

I'm duct-taped across multiple tools and nothing talks to each other

It's a bad experience for my members and hard to manage as an admin.

I want to monetize my community but don't know where to start

I need a platform that makes it easy to charge for access and deliver real value.

Mixed: Radio + Link Item

My audience lives on social, email, or a different platform

I'm dealing with algorithm changes, declining open rates, and AI flooding the feed—I need to own the relationship.

I'm duct-taped across multiple tools and nothing talks to each other

It's a bad experience for my members and hard to manage as an admin.

I'm still learning what a Mighty Network can do

When you start a free trial, we'll invite you to a group demo that covers the basics.

Individual States

Selected:

Selected radio item

This item is selected with green border and filled dot.

Unselected:

Unselected radio item

This item is unselected with gray border and empty dot.

Link:

Link item with arrow

This item navigates to a URL instead of selecting.

Get the app

Start your free trial

14 Days. No Credit Card Required.