Aviune design system

Components

Working controls with their real states.

The components that ship.

Use the controls below to test both themes and a narrow layout. These samples import the shared components; a component change reaches the website and this reference.

Explore Minecraft hosting About Aviune

Game support

Minecraft Java is the initial focus. Versions and modpacks haven’t been confirmed.

Launch availability

Orders are not open. A launch date has not been announced.

Read the launch questions

These are the same links and disclosure component used on the hosting pages. Links navigate. Use Tab and Enter or Space to test the disclosure summaries. Changing the grouping option resets this example.

<div className="topic-list">
  <Disclosure title="Game support" name="topics" open>
    <p>Compatibility details.</p>
  </Disclosure>
  <Disclosure title="Launch availability" name="topics">
    <p>Availability details.</p>
  </Disclosure>
</div>

The header above is the real site navigation. At mobile widths, Menu opens a full-width list. The control remains a native disclosure so it works without JavaScript.

Keyboard: Tab follows the visible order. Enter or Space opens the menu. Escape closes it and returns focus. Choosing a link moves focus to the page content.
Current page: The active link has an underline and aria-current="page". Color supports that state.
Theme: The named sun or moon button switches the whole site. A stored preference is applied before paint; blocked storage still permits a choice during the visit.

Use the existing boundary.

TextLink

src/components/text-link.tsx

Use prominent for one primary destination in a group. Omit it for an inline or secondary link.

<TextLink href="/minecraft-server-hosting" prominent>Explore Minecraft hosting</TextLink>

Disclosure

src/components/disclosure.tsx

Use a shared name for an exclusive group. Omit name when multiple items may stay open. The summary is a native keyboard target.

<div className="topic-list"><Disclosure title="Game support" name="topics"><p>Compatibility details.</p></Disclosure></div>

ThemeToggle

src/components/theme-toggle.tsx

Use once in the shared header. It changes the whole site and remembers the visitor’s choice.

<ThemeToggle />

MotionPreference

src/components/motion-preference.tsx

Pair with a paragraph with id="motion-help". This is a saved site preference; an OS reduced-motion preference still wins.

<MotionPreference />

CopyCode

src/components/design/copy-code.tsx

Keep the text selectable if copying is blocked. Announce success only after clipboard writing succeeds.

<CopyCode code="color: var(--accent);" label="Copy CSS" />

Make the result visible.

The copy buttons in this reference are working examples. Success is announced after copying succeeds. If clipboard access is blocked, the code stays selectable and an explanation appears. With JavaScript off, the code remains readable and the copy button is hidden.

There are no checkout, sign-up or contact forms in the informational site. Add a new control when there is a real action behind it, and cover its failure state at the same time.