Documentation

Tiara docs with built-in search.

使い始めるための導線、コンポーネント探索、カスタマイズの入口を 1 ページにまとめています。 下の検索ボックスから、インストール方法やコンポーネントのトピックをすぐに絞り込めます。 さらにそのまま下へ進むと、主要コンポーネントの live demo も確認できます。

Install with Nimble

nimble install tiara

websitetestsdocsexamples は配布物から除外されるため、 軽量に導入できます。

Components

Live component demos

ここでは主要な demo を抜粋表示しています。完全な一覧と interactive showcase は /components にまとめています。

Component demo

Buttons and status badges

CTA と補助アクション、状態バッジの組み合わせをそのまま確認できます。

Live preview
StablePure NimCLI ready
buttons_and_badges.nim
NIM
import tiara/components

let toolbar = tc.joinHtml([
  Tiara.button("Create project", attrs = @[("type", "button")]),
  Tiara.button("Preview docs", color = "secondary", attrs = @[("type", "button")]),
  Tiara.badge("Stable", tone = "success")
])

Component demo

Cards for release summaries

情報量が多い説明でも、本文と footer を分けて読みやすく配置できます。

Live preview

Release summary

Website docs, searchable guides, and install snippets now ship from the same Tiara package.

Docs syncedSSR first
card_demo.nim
NIM
import tiara/components

let summary = Tiara.card(
  title = "Release summary",
  content = tc.el("p", tc.textNode("Docs and package output stay aligned.")),
  footer = Tiara.button("Read getting started", attrs = @[("type", "button")]),
  variant = "glass"
)

Component demo

Code blocks with terminal chrome

インストール手順やサンプルコードを terminal 風の見た目で見せられます。

Live preview
install.sh
nimble install tiara
nimble test
nim c -r examples/preview.nim
code_block.nim
NIM
import tiara/components

let install = Tiara.codeBlock(
  "nimble install tiara",
  title = "install.sh",
  chrome = "terminal"
)

Component demo

Toast notifications without heavy JS

完了通知や警告を軽量に差し込めます。docs では静的プレビューとして開いた状態を表示しています。

Live preview
toast_demo.nim
NIM
import tiara/components

let notice = Tiara.toast(
  title = "Deployment ready",
  message = "Static preview for the docs page.",
  tone = "success"
)

Install

Show the Nimble command directly

ドキュメントの最上部にコマンドをコードブロックで見せることで、初回訪問時の次アクションが明確になります。

nimble install tiara