All components
Every component on this site, in two groups: controls, and film and community.
Controls (17)
Interactive controls from @iffday/ui, built on Base UI, which handles focus, keyboard use and screen readers.
ButtonFour looks, two sizes, a pill shape and the round icon-button.InputSingle-line inputs and Textarea, validated together by Field and Form.FieldA label, a control and a hint make a field; Fieldset and Form group fields into a form.SelectA dropdown whose options are SelectOption children; no native select is rendered.CheckLabelA checkbox with its label, clickable across the whole row.ToggleButtonA button with a pressed and an unpressed state, for marks like Watchlist and Like.TabsIn-page tabs, with a line under the selected one.DisclosureA heading that shows or hides its content; hidden content stays in the page.MenuA menu of actions opened from a button, with group labels, separators and links.DialogA modal dialog; on narrow screens the same dialog becomes a bottom sheet.PopoverA non-modal popup anchored to the button that opens it.NavigationDrawerThe phone navigation sheet that rises from the bottom and closes itself at 768px.ToastOne notification at the bottom of the screen, gone after 6.5 seconds.PillSmall labels for short facts: a language, a section, a status.StarsRatings in half stars, and StarRating, a rating input that works from the keyboard.StatesPlaceholders for loading, empty and failed content.PageHeadingThe title, description and action of personal tool pages such as My plans.
Film and community (21)
Page blocks from apps/web: posters, film tiles, ratings and reviews, built from the controls.
AvatarAn initial in a circle, its color derived from the person, the same on every page.PosterImagePicks the poster for the reader’s language, or shows the title on a tint.FilmTileA poster with a title and a second line, with an optional rank and badge.ShelfA row of films that scrolls sideways and runs to the screen edge on phones.PosterStackA list cover: up to five overlapping posters, with empty slots kept grey.MovieCardThe programme card: poster, title, director and a Watchlist heart.FilmHeaderThe still across the top of a film page, framed on its focus and faded into the page.FilmPosterGalleryEvery poster of a film, filtered by language.SectionHeaderA section title with an optional count and a See all link.DisplayTitleThe large title of browsing pages: Feed, Screenings, Search and the festival directory.StatsA row of numbers with labels, such as a film’s Watchlist count and score.ActionPanelThe grey panel of actions beside a film page’s poster, one action per row.CategoryTilesTiles with an icon that lead to the parts of a page.RatingHistogramRatings in ten half-star bins, with the mean and the count.ScoreSummaryAn entry’s score, star mean, red and black stickers and distribution.RatingInputA rating input for forms: a star preview beside a dropdown.ReviewCardThe layout of one review: avatar, byline, stars, text and actions.ShortReviewAn audience review on an entry, with a spoiler shield, replies, withdrawal and reports.ExpandableTextLong text clamped to a few lines, with More to open the rest.SpoilerContent with spoilers, hidden until the reader asks for it.TimeAgoRelative times like 3 days ago, with the UTC time to the minute on hover.