M
Component Library
Version

MyCamgirl-DS

Design system tokens, primitives and components. Modern, confident, timeless — built with Plus Jakarta Sans + Red Hat Text, purple-pink brand palette, and warm purple-tinted shadows.

Color Palette

@for (group of paletteGroups; track group.label) {

{{ group.label }}

@for (t of group.tokens; track t) {
{{ t.replace('--mc-', '') }}
{{ tokenValue(t) }}
}
}

Typography

Plus Jakarta Sans 800 · clamp(32–44px)Database & Reviews
Plus Jakarta Sans 700 · 24pxTrending Models
Plus Jakarta Sans 600 · 17pxProfile Details
Red Hat Text 400 · 14.5px / 1.7The quiet knows her jumps over the lazy dog. Body copy renders in Red Hat Text for long-form reading comfort.
Red Hat Text 400 · 12px · secondaryTertiary caption text for metadata and timestamps.
JetBrains Mono 400 · 13px--mc-primary: #614C92;

Shadows & Elevation

@for (s of shadowSpecs; track s.label) {
{{ s.label }}
{{ s.token }}
}

Border Radius

@for (r of radiusSpecs; track r) {
{{ r === 999 ? '999' : r }}px
}

Spacing Scale

@for (sp of spacingSpecs; track sp) {
{{ sp }}
}

Dividers — All Variants

Buttons

@for (v of dsButtonVariants; track v) { }
@for (s of dsButtonSizes; track s) { }

Tabs

The ds-root version is not ported (no Angular page needs the branded variant); the behavior exists as a ui/ primitive — see the Angular appendix.

Pagination

The ds-root version is not ported (no Angular page needs the branded variant); the behavior exists as a ui/ primitive — see the Angular appendix.

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Maps 1:1 to the ui/ CDK menu (McgMenuTrigger / McgMenuContent / McgMenuItem) — the public-api equivalence for the React ds DropdownMenu. Demo in the Angular appendix.

User Menu Dropdown

Accordion / Collapsible

The ds-root version is not ported (no Angular page needs the branded variant); the behavior exists as a ui/ primitive — see the Angular appendix.

Form Controls

Searchable Select

value: {{ sselectValue() || '—' }}

Date Picker

Search Autocomplete

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Tag Input

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Rich Text Editor

Image Upload with Crop

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md). (AvatarUploader — the variant the user-settings page uses — is in the appendix.)

File Upload Zone

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Repeating Field Group

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Word Count Tier Indicator

Profile Selector

Badges & Status

Editor Online Pinned

Avatars

Chips

interactive filter

Category Pills & Rank Badges

RankBadge is not ported — no Angular-owned page imports it.

Camsite Icons

@for (id of camsiteDemo; track id) { }

Data Table

{{ row.flag }} {{ row.country }} {{ row.share }}%

selected: {{ tableSelected().size }}

Stats Summary Row

Not ported — StatsSummaryBar (below, horizontal mode) covers every Angular usage.

Stats Summary Bar

Stat Cell

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Quick Stats Row

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Details Grid

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Heart Rating

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Step Indicator

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Activity Timeline

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Highcharts Theme — Chart Palette & Sample Charts

Charts themselves are deferred (the plan is wrapping angular-highcharts); McgChartSlot is the structural placeholder the camsite pages render today.

Cards

default elevated featured dashed

Section Header

Account Card (Nickname-First)

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Bio Card

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Review Card

The root ReviewCard is WordPress-owned (editorial review pages); McgEditorialReviewCard below is the ported variant the Angular user-review surface uses.

User-Generated Review Card

Review Callouts

She turned a webcam into a stage, and a stage into a decade-long career.

Blog Post Card

Featured Card (Promoted Content)

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Directory Card

The generic DirectoryCard is not ported (unused by Angular pages); McgCamsiteDirectoryCard + BrowseRow below are the directory family the camsite index uses.

Story Cards

Stories Strip

Click a card (or a button below) to open the full-screen mcg-story-viewer — Esc / ← → / backdrop close.

Discussion List Item

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Info Block (Dashed)

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Code Block

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Rules Cards

FAQ Card Grid

Alerts

Your identity check completed successfully. Your subscription expires in 3 days. The file exceeded the 10 MB limit. Scheduled maintenance tonight 02:00–03:00 UTC.
Removing a review also removes its replies and helpful votes.

Pick the reason that fits best. False reports against working models are taken seriously.

Reviews must describe sessions you actually attended. No doxxing, no link spam, no off-platform drama, no unverifiable claims, no retaliation reviews.

Edits re-enter the moderation queue. Repeat offenders lose posting rights.

Toast Notifications

Rich Tooltips

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md). (ui/ Tooltip is in the appendix.)

Notification Badge

Loading Spinners

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Shimmer Skeleton Loaders

The ds-root version is not ported (no Angular page needs the branded variant); the behavior exists as a ui/ primitive — see the Angular appendix.

Empty States

(An mcg-schema Organization JSON-LD block is mounted on this page — inspect <script type="application/ld+json"> in devtools.)

Progress Bars

The ds-root version is not ported (no Angular page needs the branded variant); the behavior exists as a ui/ primitive — see the Angular appendix.

Hero Image Banner

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

CTA Hero Section

Sticky Table of Contents

Article Body Prose

The camming industry has reinvented itself at least four times — and every reinvention left a graveyard of platforms behind it.

The freemium turn

When token tipping arrived, the private-first economics of the early sites collapsed within two years. Everyone predicted consolidation. Instead, the market fragmented.

  • Public rooms became the discovery layer
  • Tips replaced per-minute billing for the long tail

Video Player Embed

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

agreed: {{ legalAgreed() }}

Thread List

Category / Node List

Scope-cut — the forum surface is XenForo-owned. Only ThreadListItem (the homepage "From the Forum" band) is ported.

Quote Block

Scope-cut — the forum surface is XenForo-owned. Only ThreadListItem (the homepage "From the Forum" band) is ported.

Post Action Bar

Scope-cut — the forum surface is XenForo-owned. Only ThreadListItem (the homepage "From the Forum" band) is ported.

Reaction Picker

Scope-cut — the forum surface is XenForo-owned. Only ThreadListItem (the homepage "From the Forum" band) is ported.

Forum Post (Full Layout)

Scope-cut — the forum surface is XenForo-owned. Only ThreadListItem (the homepage "From the Forum" band) is ported.

User Info Card

Scope-cut — the forum surface is XenForo-owned. Only ThreadListItem (the homepage "From the Forum" band) is ported.

Post Editor Toolbar

Scope-cut — the forum surface is XenForo-owned. Only ThreadListItem (the homepage "From the Forum" band) is ported.

View Toggle

mode: {{ viewMode() }}

Filter Toggle

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md).

Sort Indicator

Account List Header + Rows

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md). (The Account* family waits on an Angular account page.)

Account Grouped List

Not ported — no Angular-owned page imports it; port on demand (see ds-port-gap.md). (The Account* family waits on an Angular account page.)

Login Form

Not ported as an embedded form — auth is full-page routes in the Angular app (a deliberate deviation from the React modal forms).

/login — full page

Register Form

Not ported as an embedded form — auth is full-page routes in the Angular app.

/register — full page

Contact Form

Not ported — the Angular /contacts static page routes enquiries through ContactMethodGrid inboxes instead of a form.

/contacts — full page

Page Previews

Full standalone pages that compose multiple components together. Each opens in its own tab.

Muted cards exist only in the React DS export — not composed as Angular routes yet.

@for (group of previewGroups; track group.title) {

{{ group.title }}

@for (p of group.pages; track p.title) { @if (p.href) { {{ p.title }} {{ p.description }} } @else {
{{ p.title }} React-only {{ p.description }}
} }
}
MyCamgirl-DS v3.4 · Angular port · 180 components · Dark Mode · {{ year }}

Angular appendix — page composites

Inline demos for components that, in the React DS, only appear inside full page previews (their pages aren't composed as Angular routes yet). Not part of the React docs page structure.

Static-page layouts (full routes)

/dmca — full layout + DmcaForm /request-for-removal — RuleBlocks + HelperCamsiteList + TOC /2257 — PlatformLinkGrid /contacts — ContactMethodGrid /privacy-policy /copyright

ReviewHero

VerdictCard · ReviewVerdictBand

ProsConsList

Her style drew obvious comparisons to Angel and Luna, but the consistency was entirely her own.

ReviewFAQ

PlatformNicknameList · TrustFramework

UserProfileHero

UserStatsStrip

ForumCrossLinkStrip

UserProfileReviewCard

MembershipReadout

SecurityRow · SaveBar

AvatarUploader

ChangePasswordModal

Atoms — AuthSiteLogo · GoogleAuthButton · DsDivider · AuthStatBar

AuthField · AuthPwField · PasswordStrengthMeter

AuthFeaturedPanel

Full-page routes — LoginPage · RegisterPage · ForgotPasswordPage · ForgotPasswordSuccess

The four auth pages are full-viewport (100dvh) split layouts, so they render as real routes — like the React DS's standalone login.html / register.html pages:

/login /register /forgot-password /forgot-password/success

SiteNav — logged-in variant (inline, non-sticky)

Hover Reviews / Camsites for the fly-outs. Mail/Bell counts + UserMenu in the auth slot.

SiteLayout — full page shell · composed page demo

/site — SiteNav + content + SiteFooter /camsite/chaturbate — full composed data-hub page

ModelGridCard (1:1 index grid)

TopModelGrid (camsite detail)

BlogIndexHeader · CategoryFilterRow

StatGrid · BlogIndexSeoFooter

CamsiteVerdictBadge

CamsiteHero (full /camsite/[slug] hero)

DirectoryIndexHeader (camsite directory masthead)

ContactMethodGrid (slot)

HelperCamsiteList (slot)

PlatformLinkGrid (slot)

DmcaForm (slot)

WizardRail

Angular appendix — ui/ shadcn primitives

The 39 ui/ primitives ported from the React ui/ layer (Radix/shadcn equivalents rebuilt on Angular CDK). The React docs app doesn't document this layer — kept here because the ds/ components compose them.

Button — ui/ shadcn primitive ([mcgButton], intentionally different)

@for (v of variants; track v) { }
@for (s of sizes; track s) { }

Badge

@for (b of badges; track b) { {{ b }} }

Input & Textarea

Checkbox & Switch

I agree to the terms

Avatar, Progress, Skeleton

MC

Alert

Heads up Your changes are saved automatically. Verification failed Re-upload the requested document.

Tooltip · Dialog · Popover (CDK overlays)

Edit profile Make changes to your profile, then save.

Dropdown menu & Select

Tabs · Accordion · Radio group

Manage your account details here. Change your password here. Yes — reviewed by the team before publishing. Automated and manual checks. Free Pro Enterprise

Breadcrumb

Home Models Posh

Toggle · Toggle group · Collapsible · Sheet

Revealed content.

Filters

Refine the model list.

Pagination

Slider · Aspect ratio · Scroll area

Chaturbate

LiveJasmin

StripChat

MyFreeCams

BongaCams

Flirt4Free

Alert dialog · Hover card · Context menu

Delete this model?

This cannot be undone.

 @posh

Retired Ukrainian camgirl, active 2009–2011.

 Hover @posh
Right-click me

Table · Form field · Input OTP

ModelCam siteReviews
PoshLiveJasmin42
AngelChaturbate17
Please enter a valid email.

Menubar · Drawer · Toast

Quick actions

Card

Model profile CWSW · LiveJasmin Verified performer with an active review history.