Components
Every component has its own page: a live preview with theme and breakpoint switches, its rendered HTML, its CSS and source, and links to the documentation, the Figma masters, and GitHub. One source of truth per component.
Actions & forms
ButtonThe pill action in one 44px size: one primary per view, and on the orange fill the label is ink, never white.LinkButtons act, links navigate: a Link always takes you somewhere, and inline links underline at rest so body copy can mark them without color alone.CheckboxPick any number from a set on a 44px touch target, with an ink check on the accent fill because white failed contrast.RadioPick exactly one from a short visible set; if the options hide behind a trigger, that is Select's job.SwitchA setting that acts the moment you flip it, no save step, and the knob ships plain: no glyphs baked in.InputThe underline text field where the floating label IS the placeholder, and on error the label stays put while the message row turns red.PasswordInputPassword entry on the Input anatomy with a Show and Hide toggle that is text, not an eye icon, exactly as the old system shipped it.SearchInputThe header search bar set in title-1 because searching is a headline act, with a clear control that appears only once there is a query.MeterThree boxes of password strength where weak reads muted, not red: guidance, never a scolding.FormFieldThe help and error row under any control: an error replaces the help text but never the field's label.SelectA single-choice dropdown styled over the native select, so keyboard and mobile behavior come free while the trigger stays on system tokens.
Display
TagRead-only metadata text for media facts like Sub | Dub, HD, or Mature; a Tag never takes pointer events, anything clickable is a Badge.BadgeThe interactive chip for applied filters and removable selections; its type derives from props, onClick, onRemove, or both together for the split two-target pill.TooltipShort helper text revealed on hover or focus, mainly for naming icon-only controls; content the user needs to finish a task stays visible, never behind a hover.SpinnerIndeterminate loading arc in three sizes that inherits currentColor, which is how Button's loading state composes it instead of shipping its own spinner.AvatarProfile picture in three sizes with an Icon/User placeholder when there is no photo; the accent ring means selected, and the badge slot only renders on the large size.EmptyStateCentered column for nothing-here moments, one anatomy for all 25 old variants: illustration, title, body, and an action that is usually a primary Button.ActionListItemSettings and account row: title and meta stack on the left, any value, action, or Link on the right; trailing actions wear accent.text, never raw orange.CollapsibleTextLong copy clamped behind a More details fade, plus a spoiler mode that keeps the hidden text out of the DOM until the reader chooses to see it.StarRatingFive stars in two modes: display stars are text.primary and round to halves, user stars are accent.text radio buttons, and hover or focus behavior lives in code.RatingSummaryStar row plus the Average Rating line with its vote count; an unrated title reads a dash with (0), never a blank space.RatingMarkRegional age-rating marks for the Universal, Brazil, and New Zealand systems; the colors are regulatory law, fixed values that never come from theme tokens.Table & TableRowA definition list, not a data grid: label and value rows for spec sheets and order summaries, with an emphasis tone that sets totals in bold entry white.IconThe Crunchyroll glyph registry, extracted 1:1 from the org icon sheet; one canonical 24px master that scales via the size prop, every glyph rendering in currentColor.
Structure
PageHeaderTitles a page with an optional icon and description, and it carries the one h1 per page rule: a page never gets a second.SectionHeaderHeads a content row with a title, optional icon and description, and a trailing View all that always composes Link.TabsSwitches between views of the same subject like Episodes and Details, never navigation: tabs do not change the URL, links do.FilterBarSort and filter triggers plus an applied row of removable chips, and titles never live in it: pair it with PageHeader or SectionHeader.NotificationBadgeThe red unread marker, a count pill that caps at 9+ or a bare dot, strictly for numbers: anything textual is a Tag.AppHeaderThe site bar with logo, nav links and account cluster, where session is the only variant and premium members never see the upsell chip.AppFooterThe one site footer: a brand column with blurb, social marks and language Select, link columns, and the legal band.
Feedback & overlays
ToastTransient confirmation of an action just taken, on the contracted status pairs, and a destructive confirmation carries its undo inline instead of asking permission first.BannerThe page-level strip for persistent account or availability information on the recovered broadcast slate, and a disclaimer ships without a close because it must stay visible.ModalOne lean blocking surface as a native dialog, so focus trap, Escape and the scrim backdrop come from the platform, with the square corners kept from the old system.ConfirmDialogThe narrow Modal for one destructive decision, and both buttons name their outcome: Remove and Keep it, never Yes and No.SheetThe bottom sheet built on the Modal architecture for glanceable touch-first previews, with a content slot where MediaSummary is the canonical filling.
Cards & rails
ThumbnailThe shared playback surface every card composes: progress, watched, coming soon, unavailable and loading all live here as state chips, so no card reinvents them.MediaCardOne landscape card for every media context, tile or row: context lives in the data, not in variants, and upcoming airtime always renders in text.positive.PosterCardThe 2:3 series tile that replaced the old 162-variant Series Card: contexts arrive as data, and selectable mode dims the poster behind a real Checkbox.NewsCardNews tiles and rows on a deliberately plain image: no play glyph, no duration chip, no progress bar, editorial content never wears playback chrome.PromoCardThe editorial spotlight with poster, copy and a CTA slot: the card itself is never a link, its Buttons are the only interactive parts.MediaSummaryOne anatomy for two homes: the bottom Sheet's content and the cards' hover detail panels share the same title, rating, description, action row and Details link.CarouselThe scroll-snap card rail with arrow paging: titles never live inside the rail, it always pairs with a SectionHeader above.HeroCarouselThe billboard: full-bleed art under a start-edge scrim with title art, meta, description, actions and progress tabs, one slide rendered at a time.
Player
VideoPlayerThe 16:9 player shell that layers controls, the center cluster, the skip intro chip and overlays over the media, so every player state is a composition, never a new player.PlayerControlsThe control bar lives at the bottom on an upward legibility gradient, and the right cluster holds settings and fullscreen only: subtitles live in the menu, not the bar.PlayerProgressBarThe seek bar whose track and buffer are white at low opacity so it stays legible over any art, with elapsed and knob on the accent and ad markers in ink.PlayerMenuThe settings panel where subtitles, audio and quality actually live, built on the MenuItem anatomy with drilldown values and a crown on premium locked options.PlayerGateOne blocking gate anatomy for every reason playback stops, with stacked buttons that name their outcome, never Yes or OK.