Shell - Beautify Demo

Base: .shell. Wraps an <input> with visual styling while keeping input functionality.
Variants: shell-subtle, shell-ghost, shell-underline, shell-outline (default).
Prefer compound variant+color classes like shell-outline-primary over shell-outline shell-primary.
Floating placeholder: add [data-role="placeholder"] and input[placeholder=" "]. Minimum size shell-10 recommended.
Sizes: shell-4 ~ shell-15. Width: shell-scale, shell-ratio, shell-full. Layout: shell-v (vertical).

Default shell

name:

With suffix text / icons

name: Forgot?

⌘K

Basic floating

Username

Email

Sizes

9 (tight)

10 (min)

12 (comfort)

14 (large)

Floating + variant colors

Username

Email

Password

Search

Username

Name

Phone

Floating + suffix elements

Search

Search articles⌘K

Invite code

Floating + full width

Search articles, users and tags...⌘K

Floating + custom colors

Blue

Pink

shell-subtle

name:

shell-muted

name:

shell-outline

name:

shell-ghost

name:

shell-underline

name:

Primary / Secondary / Tertiary

name:

Success / Error / Info

name:

Highlight / Warning / Caution

name:

Ink / Title / Description / Caption / Disabled

name:

shell-outline-*

name:

email:

password:

shell-muted-*

name:

email:

password:

code:

search:

highlight:

shell-subtle-*

name:

email:

password:

code:

search:

highlight:

shell-ghost-*

name:

email:

password:

code:

search:

highlight:

shell-underline-*

name:

email:

password:

code:

search:

highlight:

Outline variant

name:

Subtle variant

name:

Muted variant

name:

Ghost variant

name:

Underline variant

name:

shell-v

name: Forgot?

shell-v + colors

Email:

Password: Invalid

16px (shell-4)

name:

20px (shell-5)

name:

24px (shell-6)

name:

28px (shell-7)

name:

32px (shell-8, default)

name:

36px (shell-9)

name:

40px (shell-10)

name:

44px (shell-11)

name:

48px (shell-12)

name:

52px (shell-13)

name:

56px (shell-14)

name:

60px (shell-15)

name:

shell-pill

name:

shell-rounded

name:

shell-square

name:

shell-fluid

name:

shell-scale (fixed)

name:

shell-scale-2 (2x)

name:

shell-ratio (1:1)

shell-ratio-2 (2:1)

shell-full (100%)

name:

Readonly

name:

Disabled

name:

Search with icon + shortcut

⌘K

With action button

Vertical + icon + button

Variant comparison (primary)

name:

Shell Component

Notes

Basic usage

Default shell

With suffix text / icons

Floating placeholder

Basic floating

Sizes

Floating + variant colors

Floating + suffix elements

Floating + full width

Floating + custom colors

Visual variants

shell-subtle

shell-muted

shell-outline

shell-ghost

shell-underline

Theme colors (outline variant)

Primary / Secondary / Tertiary

Success / Error / Info

Highlight / Warning / Caution

Ink / Title / Description / Caption / Disabled

Theme colors + variant compounds

shell-outline-*

shell-muted-*

shell-subtle-*

shell-ghost-*

shell-underline-*

Custom colors

Outline variant

Subtle variant

Muted variant

Ghost variant

Underline variant

Vertical layout (shell-v)

shell-v

shell-v + colors

Sizes (shell-4 ~ shell-15)

16px (shell-4)

20px (shell-5)

24px (shell-6)

28px (shell-7)

32px (shell-8, default)

36px (shell-9)

40px (shell-10)

44px (shell-11)

48px (shell-12)

52px (shell-13)

56px (shell-14)

60px (shell-15)

Shapes

shell-pill

shell-rounded

shell-square

shell-fluid

Width modifiers

shell-scale (fixed)

shell-scale-2 (2x)

shell-ratio (1:1)

shell-ratio-2 (2:1)

shell-full (100%)

State

Readonly

Disabled

Combinations

Search with icon + shortcut

With action button

Vertical + icon + button

Variant comparison (primary)