Meta tags:
description=How to style components in the Mastodon frontend;

Headings (most frequently used words):

styling, css, and, background, how, to, use, modules, variants, sub, components, theming, sponsored, by,

Text of the page (most frequently used words):
the (21), and (18), admin (13), mastodon (11), css (11), for (9), your (9), use (8), classes (8), components (7), new (7), #styling (7), using (7), #modules (6), component (6), styles (6), module (6), this (5), scss (5), preferences (4), style (4), class (4), from (4), data (4), border (4), instance (4), profile (4), account (4), api (4), oauth (4), with (4), theming (3), tokens (3), you (3), sub (3), global (3), like (3), name (3), add (3), wrapper (3), variants (3), naming (3), files (3), how (3), search (3), apps (3), reports (3), accounts (3), setting (3), server (3), source (2), improve (2), our (2), more (2), theme (2), guide (2), design (2), need (2), that (2), can (2), prevent (2), create (2), avatar (2), based (2), has (2), hasborder (2), classname (2), section (2), classnames (2), one (2), will (2), multiple (2), access (2), actions (2), import (2), creating (2), folder (2), leaving (2), related (2), release (2), background (2), frontend (2), notificationpolicy (2), filter (2), report (2), quote (2), domainblock (2), notifications (2), trends (2), collections (2), domain_blocks (2), security (2), environment (2), implementing (2), posts (2), machine (2), installing (2), features (2), configuring (2), running (2), imprint, view, blog, join, sponsored, last, updated, may, 2026, page, colours, learn, about, user, legacy, wrap, turning, into, generated, avoid, possible, prefer, local, pass, nested, custom, attribute, markup, primary, color, var, solid, true, compose, utility, wrapperwithoutborder, take, two, approaches, generate, names, all, location, providing, stable, ish, hook, authors, should, kept, simple, there, bem, patterns, camelcase, words, make, easier, card, when, react, snake_case, file, note, suffix, out, being, imported, matching, subcomponent, component_name, decided, build, functionality, allows, defined, right, next, reduces, likelihood, conflicts, before, was, styled, these, often, grew, large, became, hard, navigate, change, without, unintended, side, effects, webpushsubscription, translation, token, termsofservice, tag, suggestion, statussource, statusedit, status, shallowtag, shallowquote, scheduledstatus, rule, role, relationshipseveranceevent, relationship, reaction, quoteapproval, privacypolicy, previewcardauthor, previewcard, poll, notificationrequest, notificationfallback, notification, mediaattachment, marker, list, identityproof, filterstatus, filterresult, filterkeyword, featuredtag, featureapproval, familiarfollowers, extendeddescription, error, customemoji, conversation, context, collectionwithaccounts, collectionitem, collection, asyncrefresh, application, appeal, annualreport, announcement, measure, ipblock, emaildomainblock, domainallow, dimension, cohort, canonicalemailblock, accountwarning, entities, streaming, markers, lists, conversations, timelines, scheduled_statuses, polls, media, statuses, proofs, oembed, push, directory, custom_emojis, announcements, health, grouped, async_refreshes, emails, annual, retention, measures, ip_blocks, email_domain_blocks, domain_allows, dimensions, canonical_email_blocks, tags, suggestions, mutes, followed_tags, follow_requests, filters, featured_tags, favourites, endorsements, bookmarks, blocks, methods, rate, limits, scopes, guidelines, best, practices, datetime, formats, rest, bearcaps, microformats, webfinger, activitypub, spec, compliance, reference, themes, state, management, issues, responsible, disclosure, routes, code, structure, dev, technical, overview, contributing, libraries, implementations, logging, obtaining, client, app, playing, public, getting, started, developing, roles, webhooks, database, index, corruption, troubleshooting, errors, moderation, scaling, migrating, backing, upgrading, cli, single, sign, captcha, onion, services, object, storage, optional, full, text, preparing, own, official, ios, android, moving, externally, settings, set, promoting, yourself, others, dealing, unwanted, content, quoting, other, network, posting, signing, what, documentation,

Text of the page (random words):
css and styling mastodon documentation what is mastodon using mastodon signing up for an account setting up your profile posting to your profile using the network features quoting other posts dealing with unwanted content promoting yourself and others set your preferences more settings using mastodon externally moving or leaving accounts official ios and android apps running your own server running mastodon preparing your machine installing from source configuring your environment configuring full text search installing optional features object storage onion services captcha single sign on setting up your new instance using the admin cli upgrading to a new release backing up your server migrating to a new machine scaling up your server moderation actions troubleshooting errors database index corruption webhooks roles developing mastodon apps getting started with the api playing with public data obtaining client app access logging in with an account libraries and implementations implementing quote posts implementing collections contributing to mastodon technical overview setting up a dev environment code structure routes security issues and responsible disclosure frontend guide components state management css and styling creating themes design tokens reference spec compliance activitypub webfinger security microformats oauth bearcaps rest api datetime formats guidelines and best practices oauth tokens oauth scopes rate limits api methods accounts blocks bookmarks domain_blocks endorsements favourites featured_tags filters follow_requests followed_tags mutes preferences reports suggestions tags admin accounts canonical_email_blocks dimensions domain_allows domain_blocks email_domain_blocks ip_blocks measures reports retention trends annual reports apps emails oauth async_refreshes collections grouped notifications health instance announcements custom_emojis directory trends notifications push oembed profile proofs search statuses media polls scheduled_statuses timelines conversations lists markers streaming api entities account accountwarning admin account admin canonicalemailblock admin cohort admin dimension admin domainallow admin domainblock admin emaildomainblock admin ip admin ipblock admin measure admin report announcement annualreport appeal application asyncrefresh collection collectionitem collectionwithaccounts context conversation customemoji domainblock error extendeddescription familiarfollowers featureapproval featuredtag filter filterkeyword filterresult filterstatus identityproof instance list marker mediaattachment notification notificationfallback notificationpolicy notificationrequest poll preferences previewcard previewcardauthor privacypolicy profile quote quoteapproval reaction relationship relationshipseveranceevent report role rule scheduledstatus search shallowquote shallowtag status statusedit statussource suggestion tag termsofservice token translation v1 filter v1 instance v1 notificationpolicy webpushsubscription css and styling how to style components in the mastodon frontend background how to use css modules styling variants styling sub components theming background before mastodon 4 6 mastodon s ui was styled using global scss files like components scss these files often grew large and became hard to navigate and change without unintended side effects to improve on this we decided to build the new functionality for the 4 6 release using css modules this allows styles to be defined right next to the related components and reduces the likelihood of style conflicts how to use css modules when creating a new react component create a new folder for it use snake_case naming and add a styles module scss file note the module suffix leaving it out will prevent the styles from being imported for multiple css files in one folder use component_name module scss matching the name of the related subcomponent import and use the styles in the component import classes from styles module scss the naming of classes in css modules should be kept simple e g card or actions there s no need for bem like naming patterns use camelcase for multiple words to make it easier to access the class in a component css modules will generate names for all classes in a module based on the location and module name providing a stable ish hook for theme authors styling variants to style component variants you can take one of two approaches compose classes using the classnames utility e g section classname classnames classes wrapper hasborder classes wrapperwithoutborder add a custom data attribute to the component markup and add styles based on that e g section classname classes wrapper data has border hasborder wrapper data has border true border 1 px solid var color border primary styling sub components if you need to style sub components that use legacy global css classes e g avatar you can wrap the class like this global avatar to prevent css modules from turning it into a generated class name avoid this if possible and prefer to create a new local class and pass it to the nested component theming use our design tokens for colours and learn more about user theme preferences in our theming guide last updated may 29 2026 improve this page sponsored by join mastodon blog view source cc by sa 4 0 imprint