UI
Every component in @haruhimemoe/ui, rendered from the package itself. haruhime.moe is built from it, and packs is moving to it. The source is on GitHub.
Version 0.1.0, MIT license. Install: bun add @haruhimemoe/ui
Basics
Button
Primary, secondary and ghost, at md and lg, then disabled.
ButtonLink
A link that looks like a button. Paths use next/link; a URL with a scheme is a plain link.
buttonClasses
The button classes as a string, for elements the components don't cover. Here, a summary.
More
It opens like any details element.
Card
The panel, without and with a title. A title makes it a region.
A card with a title
The title is an h2 that names the card.
PageHeader
The top of this page: the title in the page's one h1, a lead line with links, a meta line, and a CopyButton as the action.
Notice
Short status text in each tone, then an error list as a div.
Info: the pack is saved in this browser.
Warning: two maps in this pool are loved, not ranked.
Error: that beatmap set doesn't exist.
Two maps couldn't be added:
- 1234567 isn't a beatmap id.
- 7654321 is already in the pack.
Prose
Long-form text. The disclaimer uses it with h2 headings.
A heading
A paragraph with bold text, inline code and a link to the thanks page.
- A list item
- Another one
- First
- Second
bun add @haruhimemoe/ui| Slot | Stars |
|---|---|
| NM1 | 5.21 |
| DT1 | 6.05 |
Forms
TextInput
With a hint, then with a hint and an error.
Textarea
With a hint, then with a hint and an error.
Select
With a hint, then with a hint and an error.
Checkbox
With a hint, then with a hint and an error.
fieldClasses
The field look as a string, for a bare control that labels itself.
Actions
CopyButton
Copies text and says so beside the button. The default, then a primary one with its own label and message.
Pagination
Previous and next around the page count: on the first page, a middle one, and the last.
JsonLd
schema.org data in a script tag, so nothing shows. This page carries one describing the package; view the page source to see it.
Icons
GitHubIcon
The GitHub mark in the text color, at the default size and larger. Screen readers skip it, so the link around it carries the name.
HaruhimeWordmark
The wordmark as inline SVG, in the brand's own colors, at the default size and larger.
Filters
Chip
A toggle pill with aria-pressed: on, off after a click, and disabled.
ChipGroup
Chips for picking several values. EZ is a disabled option; the second group is disabled as a whole.
Picked: HD, DT
RangeSlider
Two thumbs and a box at each end. Star rating is open-ended (10+ means no limit), length reads and writes m:ss, and BPM is disabled.
Value: [0, null]
Value in seconds: [60, 300]
FilterRow
One labelled row: the label on the left from sm up, above the controls on phones.
FilterPanel
Filter rows under a title, with a live result count and Clear filters once a filter is set. On phones the rows fold behind the arrow button.
Sample pool
Matching: NM1, NM2, NM3, NM4, HD1, HD2, HR1, HR2, DT1, DT2, DT3, FM1, FM2, TB
Shell
SiteHeader
The bar at the top of this page. The brand slot is the wordmark linking home, and the links are the tools, centered (navAlign center) in a nav named Tools. Tools that haven't launched show as text marked soon.
NavLinks
The link list inside SiteHeader. The current page's link gets aria-current and lights up: here, UI.
SiteFooter
The footer below: the Tools, haruhime.moe and Legal columns, the trademark line as fine print, and the GitHub icon link. The tool sites also show the haruhime.moe wordmark there; this site turns it off, since it is haruhime.moe.
PageShell
The frame around this page: a skip link (press Tab on a fresh load), the header, the main content and the footer, which stays at the bottom on short pages.