Scopes
Fleetline is a core-tier product system. The skill can build 539 components across
19 scopes. Enable them with ds init --scopes product,<scope>,…; required scopes
are added automatically, and landing pages also need marketing. Generated from
assets/manifest.json.
| Scope | Components | Core / standard / enterprise | Needs | Spec |
|---|---|---|---|---|
product | 192 | 68 / 78 / 46 | — | |
marketing | 46 | 16 / 20 / 10 | — | marketing.md |
ai | 29 | 14 / 11 / 4 | — | ai.md |
commerce | 31 | 22 / 8 / 1 | — | commerce.md |
email | 20 | 13 / 7 / 0 | — | email.md |
playback | 11 | 5 / 4 / 2 | — | playback.md |
video | 16 | 5 / 9 / 2 | playback | video.md |
live | 12 | 4 / 4 / 4 | video | live.md |
music | 17 | 8 / 8 / 1 | playback | music.md |
podcast | 12 | 6 / 5 / 1 | playback | podcast.md |
reading | 21 | 9 / 10 / 2 | playback | reading.md |
messaging | 28 | 7 / 15 / 6 | playback | messaging.md |
billing | 19 | 7 / 7 / 5 | — | billing.md |
analytics | 17 | 6 / 4 / 7 | — | analytics.md |
erp | 16 | 6 / 7 / 3 | — | erp.md |
calendar | 15 | 8 / 6 / 1 | — | calendar.md |
maps | 13 | 6 / 4 / 3 | — | maps.md |
social | 17 | 7 / 10 / 0 | — | social.md |
mobile | 7 | 2 / 4 / 1 | — | mobile.md |
product · 192
Application UI: foundations, controls, navigation, data, overlays, feedback, app patterns (always on)
Components
- Box
boxcore - Stack (vertical & horizontal)
stackcore - Cluster / Wrap
clusterstandard - Grid (container, row, column)
gridcore - Container / Page width
containercore - Aspect Ratio Box
aspect-ratiostandard - Icon Wrapper
iconcore - Typography: Headings H1–H6
headingscore - Typography: Body text
body-textcore - Typography: Code
codecore - Keyboard key (Kbd)
kbdstandard - Blockquote
blockquotestandard - Lists (ordered, unordered, unstyled)
listcore - Prose / Rich content wrapper
prosestandard - Highlight / Mark
highlightstandard - Divider / Separator
dividercore - Visually Hidden / SR only
visually-hiddencore - Image / Figure
imagestandard - Scroll Area
scroll-areaenterprise - Splitter / Resizable panels
splitterstandard - Primary Button
button-primarycore - Secondary Button
button-secondarycore - Tertiary / Ghost Button
button-tertiarycore - Destructive Button
button-destructivecore - Button with leading/trailing icon
button-with-iconcore - IconButton
icon-buttoncore - Link / Anchor
linkcore - Button Group
button-groupstandard - Toggle Button
toggle-buttonstandard - Segmented Control
segmented-controlstandard - Split Button
split-buttonstandard - Menu Button / Dropdown Menu
menu-buttoncore - Floating Action Button
fabenterprise - Close Button
close-buttoncore - Theme Toggle
theme-togglecore - Copy to Clipboard
copy-buttonstandard - Toolbar
toolbarstandard - Selection action bar
selection-action-barstandard - Overflow menu / Priority+
overflow-menustandard - Label
labelcore - Form Field Wrapper
form-fieldcore - Fieldset / Legend
fieldsetcore - Text Field
text-fieldcore - Input Group / Addons
input-groupstandard - Input mask / Formatted input
input-maskstandard - Textarea
textareacore - Password Input
password-inputcore - Search Input
search-inputcore - Number Input / Stepper
number-inputstandard - Checkbox
checkboxcore - Checkbox Group
checkbox-groupcore - Radio
radiocore - Radio Group
radio-groupcore - Choice card (radio / checkbox tiles)
choice-cardstandard - Switch / Toggle
switchcore - Select
selectcore - Combobox / Autocomplete
comboboxstandard - Listbox / Multi-select list
listboxenterprise - Transfer List (Dual list)
transfer-listenterprise - Tree select
tree-selectenterprise - File Uploader / Dropzone
file-uploadstandard - Slider / Range
sliderstandard - Date Picker
date-pickerstandard - Calendar (standalone)
calendarenterprise - Time Picker
time-pickerstandard - Date field (memorable date, segmented)
date-fieldcore - Date-Time Range Picker
date-range-pickerenterprise - Color Picker
color-pickerenterprise - PIN / OTP Input
otp-inputstandard - Tag / Token Input
tag-inputenterprise - Attribute editor (repeatable rows)
attribute-editorenterprise - Rating
ratingenterprise - Rich Text Editor (WYSIWYG)
rich-text-editorenterprise - Code editor shell
code-editorenterprise - Inline Edit
inline-editenterprise - Composer / Message Input
composerenterprise - Error Summary
error-summarycore - Preference Matrix
preference-matrixstandard - Global Navigation Bar
top-navcore - Sidebar Navigation
side-navcore - App Rail
app-railenterprise - App switcher
app-switcherenterprise - Bottom Navigation (mobile)
bottom-navstandard - Breadcrumbs
breadcrumbscore - Tabs
tabscore - Pagination
paginationcore - Stepper
stepperstandard - Command Palette
command-paletteenterprise - Menubar
menubarenterprise - Skip Link
skip-linkcore - Tree View
tree-viewenterprise - Pagination Dots
dot-indicatorstandard - Back to Top
back-to-topstandard - Table of Contents / In-page nav
tocstandard - Page Header
page-headercore - Section Header
section-headerstandard - Footer
footerstandard - Table (basic)
tablecore - Data Table
data-tablestandard - Tree Data Table
tree-tableenterprise - Card
cardcore - Card collection / Grid list
card-collectionstandard - Post / Content Card
post-cardstandard - Comment thread
comment-threadstandard - Accordion
accordioncore - Disclosure / Collapsible
disclosurecore - Avatar
avatarcore - Avatar Group
avatar-groupstandard - Badge
badgecore - Tag / Chip
tagcore - Status Indicator
status-indicatorstandard - List Group
list-groupcore - Sortable list (reorder)
sortable-listenterprise - Board (drag-and-drop columns)
kanban-boardenterprise - Description List
description-listcore - Timeline
timelinestandard - Carousel
carouselenterprise - Media Stage
media-stagestandard - QR code
qr-codestandard - Metric / Statistic
statcore - Chart Container & Data-viz palette
chart-containerenterprise - Chart legend
chart-legendenterprise - Chart tooltip
chart-tooltipenterprise - Chart axis & gridlines
chart-axisenterprise - Sparkline
sparklineenterprise - Hover Card
hover-cardenterprise - Truncated / Expandable Text
truncatestandard - Relative time
relative-timestandard - Number, currency & bytes display
number-formatstandard - Modal Dialog
modalcore - Alert / Confirm Dialog
alert-dialogcore - Drawer / Side Sheet
drawerstandard - Bottom Sheet
bottom-sheetenterprise - Side panel (push / inline)
side-panelstandard - Popover
popovercore - Tooltip
tooltipcore - Toggletip / Contextual help
toggletipstandard - Context Menu
context-menuenterprise - Tour Tip / Coachmark
coachmarkenterprise - Floating panel
floating-panelenterprise - Lightbox
lightboxenterprise - Alert Banner (inline)
alertcore - Callout / Inline message
calloutstandard - Global / System Banner
global-bannerstandard - Toast
toastcore - Progress Bar
progress-barcore - Meter / Gauge
meterstandard - Spinner / Loader
spinnercore - Inline Spinner
inline-spinnercore - Skeleton
skeletoncore - Result panel
result-panelcore - Notification Center
notification-centerenterprise - Notification Permission Prompt
notification-permission-promptstandard - Application Shell
app-shellcore - Form Layout
form-layoutcore - Dashboard Grid
dashboardstandard - Empty State
empty-statecore - Error Pages (404/500)
error-pagecore - Authentication (sign in/up, reset)
authstandard - Settings Page
settingsstandard - List / Search Results + Filters
list-detailstandard - Feed
feedenterprise - Detail / Record Page
detail-pagestandard - Multi-step Wizard
wizardenterprise - Onboarding / First run
onboardingenterprise - Start page
start-pagestandard - Question page (one thing per page)
question-pagestandard - Check answers
check-answersstandard - Confirmation page
confirmation-pagestandard - Task list page
task-list-pagestandard - Step-by-step navigation
step-by-step-navigationstandard - Service unavailable
service-unavailablestandard - Session timeout warning
session-timeoutstandard - Exit this page quickly
exit-page-quicklystandard - Address entry
address-entrystandard - Name entry
name-entrystandard - Phone number entry
phone-entrystandard - Payment card entry
payment-card-entrystandard - Unsaved changes guard
unsaved-changesstandard - Create resource (single / multi-page)
create-resourceenterprise - Delete with confirmation
delete-with-confirmationenterprise - Saved filters / views
saved-filtersenterprise - Settings: Profile
settings-profilestandard - Settings: Account
settings-accountstandard - Settings: Security
settings-securitystandard - Settings: Notifications
settings-notificationsstandard - Settings: Privacy
settings-privacystandard - Settings: Appearance
settings-appearancestandard - Settings: Sessions
settings-sessionsenterprise - Settings: Connected Apps
settings-connected-appsenterprise - Settings: Data
settings-dataenterprise - Notification Inbox (full page)
notification-inboxenterprise
marketing · 46
Website / landing UI: hero, pricing, testimonials, FAQ, footers, marketing pages (add when the product has a public site)
Components
- Announcement Bar
announcement-barcore - Marketing Header
marketing-headercore - Mega Menu
mega-menustandard - Hero
herocore - Logo Cloud
logo-cloudcore - Feature Grid
feature-gridcore - Feature Split (alternating)
feature-splitcore - Bento Grid
bento-gridstandard - Stats Band
stats-bandstandard - Steps / How It Works
stepsstandard - Testimonials
testimonialscore - Press Mentions
press-mentionsenterprise - Trust & Compliance Badges
trust-badgesenterprise - Pricing Table
pricing-tablecore - Comparison Table
comparison-tablestandard - FAQ
faqcore - CTA Band
cta-bandcore - Newsletter Signup
newsletter-signupcore - Team Grid
team-gridstandard - Blog / Resource Cards
blog-card-gridstandard - Integrations Grid
integrations-gridstandard - Video Section
video-sectionstandard - Gallery
gallerystandard - Contact Section
contact-sectionstandard - Content Section (long-form)
content-sectionstandard - Public Roadmap
roadmapenterprise - Changelog Feed
changelog-feedenterprise - App Store Badges
app-store-badgesenterprise - Cookie Consent
cookie-consentcore - Language / Region Switcher
locale-switcherstandard - Site Footer (marketing)
site-footercore - Rating Summary / Review Badges
social-proof-ratingenterprise - Waitlist / Early Access Form
waitlist-formstandard - Countdown / Launch Timer
countdownenterprise - Sticky CTA Bar
sticky-ctastandard - Landing Page
landing-pagecore - Pricing Page
pricing-pagecore - Legal Page (privacy, terms)
legal-pagecore - About Page
about-pagestandard - Blog Index
blog-indexstandard - Blog Article
blog-articlestandard - Contact Page
contact-pagestandard - Waitlist / Coming Soon
waitlist-pagestandard - Changelog Page
changelog-pageenterprise - Careers Page
careers-pageenterprise - Customer Stories
customer-storiesenterprise
ai · 29
AI & chat UI: conversation, streaming, tools, approvals, citations, AI labelling, assistant layouts (add when the product ships an assistant or agent)
Components
- Conversation / Message List
conversationcore - Chat Message
chat-messagecore - Streaming Response
streaming-responsecore - Reasoning Disclosure
reasoningstandard - Task / Plan Steps
agent-planstandard - Tool Call Card
tool-callstandard - Approval Card (Human-in-the-loop)
approval-cardstandard - Sources List
sourcescore - Inline Citation
inline-citationstandard - Code Block (AI output)
code-blockcore - Prompt Input
prompt-inputcore - Model Picker
model-pickerstandard - Suggestions / Starter Prompts
suggestion-chipscore - Message Actions
message-actionscore - Response Feedback Form
response-feedbackstandard - AI Label + Explainability
ai-labelcore - AI Disclaimer
ai-disclaimercore - Generating / Thinking Indicator
generating-indicatorcore - Artifact / Canvas Panel
artifact-panelstandard - Context & Attachment Chips
context-chipsstandard - Conversation History
conversation-liststandard - Chat Empty State
ai-empty-statecore - Rate-limit / Error / Retry Banner
ai-status-bannercore - Voice Input
voice-inputenterprise - App Widget / MCP App Shell
app-widgetenterprise - Token / Cost Usage Meter
usage-meterenterprise - Chat App Layout
chat-appcore - Copilot Side Panel
copilot-panelstandard - Agent Run / Trace View
agent-runenterprise
commerce · 31
Commerce UI: product cards, variant pickers, cart, checkout, orders, reviews, PLP/PDP/cart/checkout pages (add for stores and marketplaces)
Components
- Product Card
product-cardcore - Product Gallery
product-gallerycore - Price
pricecore - Variant Picker
variant-pickercore - Quantity Stepper
quantity-steppercore - Stock & Delivery Estimate
stock-deliverystandard - Add to Cart Button
add-to-cartcore - Mini-Cart Drawer
mini-cartcore - Cart Line Item
cart-line-itemcore - Order Summary
order-summarycore - Promo Code Field
promo-codestandard - Shipping Method Selector
shipping-methodcore - Payment Method Selector
payment-methodcore - Address Form
address-formcore - Checkout Steps
checkout-stepscore - Order Confirmation Panel
order-confirmationcore - Order Status Timeline
order-trackingstandard - Reviews Summary
reviews-summarystandard - Review Item
review-itemstandard - Facets & Filters
facetscore - Sort Control
sort-controlcore - Wishlist / Save Button
wishlist-buttonstandard - Recently Viewed
recently-viewedenterprise - Size Guide
size-guidestandard - Product Badges
product-badgecore - Product Listing Page
plpcore - Product Detail Page
pdpcore - Cart Page
cart-pagecore - Checkout
checkout-pagecore - Order Confirmation Page
order-confirmation-pagecore - Account Orders
account-ordersstandard
email · 20
HTML email: table layouts, bulletproof buttons, dark-mode-safe templates for transactional and marketing email (add when the product sends email)
Components
- Email Shell
email-shellcore - Email Header
email-headercore - Email Hero
email-herostandard - Bulletproof Button
email-buttoncore - Email Text Block
email-textcore - Email Image
email-imagecore - Columns (Stack on Mobile)
email-columnscore - Product Row
email-product-rowstandard - Receipt Line-Items Table
email-receiptcore - Divider & Spacer
email-spacercore - Social Links
email-socialstandard - Email Footer
email-footercore - Alert / Notice Block
email-alertstandard - Code / OTP Display
email-codecore - Verify Email
email-verifycore - Password Reset
email-password-resetcore - Receipt / Order Confirmation
email-order-confirmationcore - Invite
email-invitestandard - Newsletter Digest
email-newsletterstandard - Notification Digest
email-notification-digeststandard
playback · 11
Base scope (added automatically by video/live/music/podcast/reading/messaging): transport, seek, volume, speed, captions, transcript, queue, mini-player
Components
- Play Toggle
play-togglecore - Seek Bar
seek-barcore - Volume Control
volume-controlcore - Time Display
time-displaycore - Playback Speed
playback-speedcore - Captions Menu
captions-menustandard - Transcript Panel
transcript-panelstandard - Media Queue
media-queuestandard - Mini Player
mini-playerstandard - Sleep Timer
sleep-timerenterprise - Cast Button
cast-buttonenterprise
video · 16
Video UI: player, cards, chapters, end screen, creator header, upload; watch/home/channel/library/search/studio pages (add for video platforms)
Components
- Video Player
video-playercore - Video Card
video-cardcore - Video End Screen
video-end-screenstandard - Video Quality Menu
video-quality-menustandard - Playlist Panel
playlist-panelstandard - Creator Header
creator-headerstandard - Subscribe Button
subscribe-buttoncore - Content Warning
content-warningstandard - Video Upload
video-uploadenterprise - Watch Page
watch-pagecore - Video Home
video-homecore - Channel Page
channel-pagestandard - Video Library
video-librarystandard - Video Search Results
video-search-resultsstandard - Video Studio
video-studioenterprise - Video Landing
video-landingstandard · needs marketing
live · 12
Livestreaming UI: live player, live badge, live chat, reactions, schedule, polls, tips, go-live panel; live/directory/studio pages (requires video)
Components
- Live Badge
live-badgecore - Live Player
live-playercore - Live Chat
live-chatcore - Live Reactions
live-reactionsstandard - Stream Schedule
stream-schedulestandard - Live Poll
live-pollenterprise - Tip Message
tip-messageenterprise - Go Live Panel
go-live-panelenterprise - Live Page
live-pagecore - Live Directory
live-directorystandard - Live Studio
live-studioenterprise - Live Landing
live-landingstandard · needs marketing
music · 17
Music UI: now-playing bar and view, track rows/lists, artwork cards, lyrics, playlists, equalizer; home/album/playlist/artist/library/search pages
Components
- Now Playing Bar
now-playing-barcore - Track Row
track-rowcore - Track List
track-listcore - Artwork Card
artwork-cardcore - Save Toggle
save-togglecore - Artist Header
artist-headerstandard - Lyrics View
lyrics-viewstandard - Now Playing View
now-playing-viewstandard - Playlist Editor
playlist-editorstandard - Equalizer
equalizerenterprise - Music Home
music-homecore - Album Page
album-pagecore - Playlist Page
playlist-pagecore - Artist Page
artist-pagestandard - Music Library
music-librarystandard - Music Search
music-searchstandard - Music Landing
music-landingstandard · needs marketing
podcast · 12
Podcast UI: podcast player, episodes, shows, show notes, downloads, clips; home/show/episode/queue pages
Components
- Podcast Player
podcast-playercore - Episode Row
episode-rowcore - Show Card
show-cardcore - Show Header
show-headerstandard - Episode Notes
episode-notesstandard - Download Button
download-buttonstandard - Clip Share
clip-shareenterprise - Podcast Home
podcast-homecore - Show Page
show-pagecore - Episode Page
episode-pagecore - Podcast Queue
podcast-queuestandard - Podcast Landing
podcast-landingstandard · needs marketing
reading · 21
Reading UI: ebook reader (paged/scroll, settings, TOC, highlights, notes), audiobooks, comics/manga, long-form articles, TTS; library/book/reader/read-later pages
Components
- Reader Viewport
reader-viewportcore - Reader Toolbar
reader-toolbarcore - Reader Settings
reader-settingscore - Reader TOC
reader-toccore - Reading Progress
reading-progresscore - Book Card
book-cardcore - Highlight Menu
highlight-menustandard - Notes Panel
notes-panelstandard - Bookmark Toggle
bookmark-togglestandard - In-Book Search
in-book-searchstandard - Bookshelf
bookshelfstandard - Audiobook Player
audiobook-playerstandard - Comic Viewer
comic-viewerstandard - Article Reader
article-readerstandard - Dictionary Popover
dictionary-popoverenterprise - TTS Control
tts-controlenterprise - Library Page
library-pagecore - Book Detail Page
book-detail-pagecore - Reader Page
reader-pagecore - Read Later Page
read-later-pagestandard - Reading Landing
reading-landingstandard · needs marketing
messaging · 28
Messaging UI (person-to-person): DMs and groups, channels and threads, voice/video calls, support chat widget; inbox/workspace/call/support pages
Components
- Message Bubble (person-to-person)
message-bubblecore - Message Thread
message-threadcore - Conversation Row
conversation-rowcore - Presence Indicator
presence-indicatorcore - Typing Indicator
typing-indicatorcore - Attachment Preview
attachment-previewcore - Message Reactions
message-reactionsstandard - Emoji Picker
emoji-pickerstandard - Voice Note
voice-notestandard - Mention Autocomplete
mention-autocompletestandard - Read Receipts
read-receiptsstandard - Message Search
message-searchstandard - Channel List
channel-liststandard - Channel Header (messaging)
channel-headerstandard - Thread Panel
thread-panelstandard - Member List
member-liststandard - Pinned Messages
pinned-messagesenterprise - Call Controls
call-controlsenterprise - Participant Tile
participant-tileenterprise - Incoming Call
incoming-callenterprise - Device Check
device-checkenterprise - Support Launcher
support-launcherstandard - Support Panel
support-panelstandard - Inbox Page
inbox-pagecore - Workspace Page
workspace-pagestandard - Call Page
call-pageenterprise - Support Widget Page
support-widget-pagestandard - Messaging Landing
messaging-landingstandard · needs marketing
billing · 19
Billing & payments UI (in-app): current plan, plan change, payment methods, invoices, usage, cancel flow, transactions, payouts, wallet, tax info; billing/plans/invoice/transactions/payouts pages
Components
- Current Plan
current-plancore - Plan Picker
plan-pickercore - Payment Method List
payment-method-listcore - Add Payment Method
add-payment-methodcore - Invoice List
invoice-listcore - Invoice Detail
invoice-detailstandard - Billing Usage
billing-usagestandard - Billing Alert
billing-alertstandard - Cancel Flow
cancel-flowstandard - Transaction List
transaction-liststandard - Payout Summary
payout-summaryenterprise - Wallet Balance
wallet-balanceenterprise - Tax Info Form
tax-info-formenterprise - Refund Dialog
refund-dialogenterprise - Billing Page
billing-pagecore - Plans Page
plans-pagecore - Invoice Page
invoice-pagestandard - Transactions Page
transactions-pagestandard - Payouts Page
payouts-pageenterprise
analytics · 17
Reports & metrics UI: filter bar, report tables, export, freshness, metric definitions, scorecards, funnel/cohort/pivot, report builder, scheduled reports, alerts; overview/report/library/builder pages
Components
- Analytics Filter Bar
analytics-filter-barcore - Report Table
report-tablecore - Export Menu
export-menucore - Data Freshness
data-freshnesscore - Metric Definition
metric-definitionstandard - Scorecard
scorecardstandard - Funnel Chart
funnel-chartstandard - Cohort Table
cohort-tableenterprise - Pivot Table
pivot-tableenterprise - Report Builder
report-builderenterprise - Scheduled Report
scheduled-reportenterprise - Chart Annotation
chart-annotationenterprise - Alert Rule
alert-ruleenterprise - Analytics Overview Page
analytics-overviewcore - Report Page
report-pagecore - Reports Library Page
reports-librarystandard - Report Builder Page
report-builder-pageenterprise
erp · 16
ERP / back-office UI: record header, line-item editor, status workflow, master-data lookup, approvals, audit log, inventory, print layouts, batch edit, import wizard; record list/form, PO, inventory, approvals, import pages
Components
- Record Header
record-headercore - Line Item Editor
line-item-editorcore - Status Workflow
status-workflowcore - Master Data Lookup
master-data-lookupcore - Approval Panel
approval-panelstandard - Audit Log
audit-logstandard - Inventory Level
inventory-levelstandard - Print Layout
print-layoutstandard - Batch Edit
batch-editenterprise - Import Wizard
import-wizardenterprise - Record List Page
record-list-pagecore - Record Form Page
record-form-pagecore - Purchase Order Page
purchase-order-pagestandard - Inventory Page
inventory-pagestandard - Approvals Inbox
approvals-inboxstandard - Import Page
import-pageenterprise
calendar · 15
Calendar & scheduling UI: month/week/day/agenda views, event chip and editor, slot picker, recurrence, availability, time zones, resource scheduler; calendar/booking/availability/event pages
Components
- Calendar Month
calendar-monthcore - Calendar Week
calendar-weekcore - Calendar Day
calendar-daystandard - Calendar Agenda
calendar-agendacore - Event Chip
event-chipcore - Event Editor
event-editorcore - Time Slot Picker
time-slot-pickercore - Recurrence Picker
recurrence-pickerstandard - Availability Editor
availability-editorstandard - Timezone Select
timezone-selectstandard - Resource Scheduler
resource-schedulerenterprise - Calendar Page
calendar-pagecore - Booking Page
booking-pagecore - Availability Page
availability-pagestandard - Event Detail Page
event-detail-pagestandard
maps · 13
Maps & location UI: accessible map container, markers, clusters, popups, controls, location search/picker, map-list sync, directions, area selection; store locator, map search, directions pages
Components
- Map Container
map-containercore - Map Marker
map-markercore - Map Popup
map-popupcore - Map Controls
map-controlscore - Location Search
location-searchcore - Location Picker
location-pickerstandard - Marker Cluster
marker-clusterstandard - Map List Sync
map-list-syncstandard - Directions Panel
directions-panelenterprise - Area Selector
area-selectorenterprise - Store Locator
store-locatorcore - Map Search Page
map-search-pagestandard - Directions Page
directions-pageenterprise
social · 17
Social UI: profile header, follow, user rows, reactions, post composer, share sheet, stories, suggestions, report/block; profile/feed/post/followers/explore pages
Components
- Profile Header
profile-headercore - Follow Button
follow-buttoncore - User Row
user-rowcore - Reaction Bar
reaction-barcore - Post Composer
post-composercore - Share Sheet
share-sheetstandard - Stories Tray
stories-traystandard - Story Viewer
story-viewerstandard - People Suggestions
people-suggestionsstandard - Report Dialog
report-dialogstandard - Block Mute Menu
block-mute-menustandard - Profile Page
profile-pagecore - Home Feed Page
home-feed-pagecore - Post Detail Page
post-detail-pagestandard - Followers Page
followers-pagestandard - Explore Page
explore-pagestandard - Social Landing
social-landingstandard · needs marketing
mobile · 7
Touch-first app UI: swipe actions, action sheets, pull to refresh, draggable sheets with snap heights, swipe pages, collapsing app bar, pinch zoom (add for phone-first products or a mobile web app)
Components
- Swipe Actions (list row)
swipe-actionscore - Action Sheet
action-sheetcore - Pull to Refresh
pull-to-refreshstandard - Draggable Sheet (snap heights)
detent-sheetstandard - Swipe Pager
swipe-pagerstandard - Collapsing App Bar
collapsing-app-barstandard - Zoomable Image (pinch, pan)
zoomable-imageenterprise