Tiara Component Catalog

Explore the same components shipped in the current repository, with live previews and implementation-ready examples.

15 component groupsInteractive demosSSR-first

Navbar

Hero

Marketing UI

Ship search-ready Nim websites.

New website-facing primitives make landing pages, docs hubs, and install guides easier to compose directly from Tiara.

SSR-firstDocs SearchNimble Install

terminal
SH

nimble install tiara

Buttons

Badges

NeutralAccentSuccessWarning

Section Headers

Section Header

Documentation sections

Use consistent kickers, titles, and actions across guides and component indexes.

Beta

Variation

Centered variation

The same primitive can also anchor a centered marketing block.

Search Boxes

Forms

Username

Birthdate

Theme Color

Modal

Code Block

sample.nim
NIM

proc hello(name: string): string =
  let answer = 42 # sample
  result = "Hi, " & name

Card Variants

Default

Balanced surface for app UI and internal tools.

Elevated

A stronger shadow helps distinguish featured content.

Outline

Subtle presentation for secondary content blocks.

Glass

Marketing-style translucent surface for hero callouts.

Badges & Profile Icons

12JDKW

Carousel

Fast SSR

Compile-time optimized HTML rendering.

Tabs

Tiara is designed for SSR-first Nim apps.