Style Guide

A comprehensive reference of all UI components and their variations.

Button

Supports 6 variants (default, secondary, outline, ghost, destructive, link) and 8 sizes (4 text + 4 icon-only).

@/components/ui/button

Badge

Small status indicators with 6 variants. Supports leading and trailing icons via data-icon attributes.

@/components/ui/badge

Variants

DefaultSecondaryOutlineDestructiveGhostLink

With Icons

SydneyFeaturedUrgentVerified

Card

Flexible content container with header, title, description, action, content, and footer sub-components. Supports default and sm sizes.

@/components/ui/card
Organisation Name
A brief description of what this organisation does and its mission.
MelbourneEnvironment

Founded 2015

Compact Card
The sm size uses tighter padding and spacing.

Useful for dense layouts like sidebars or dashboards where space is at a premium.

Heading

Semantic heading component with 5 size variants (sm, md, lg, xl, 2xl) and configurable HTML level (h1–h6, p).

@/components/ui/heading

Heading 2xl

Heading xl

Heading lg

Heading md

Heading sm

Text

Body text component with 7 variants (xs, sm, md, lg, xl, label, fine). Renders as p, span, or div.

@/components/ui/text

Text xl — large body text for emphasis

Text lg — slightly larger body text

Text md — default body text size

Text sm — smaller secondary text

Text xs — smallest text size

Text label — form labels and field names

Text fine — fine print, captions, and metadata

Tabs

Tabbed interface with two list variants: default (pill) and line (underline). Supports horizontal and vertical orientation.

@/components/ui/tabs

Default Variant

The overview tab content. Default pill-style tabs with a muted background.

Line Variant

Line-style tabs with an underline indicator. Supports icons in triggers.

Select

Dropdown select with groups, labels, separators, and two trigger sizes (default, sm).

@/components/ui/select

Default size

Small size

Dialog

Modal dialog with overlay, header, footer, title, and description. Includes an optional close button.

@/components/ui/dialog

Tooltip

Hover-triggered tooltip with configurable placement. Wrap in TooltipProvider to control delay.

@/components/ui/tooltip

Popover

Click-triggered floating panel with header, title, and description sub-components.

@/components/ui/popover

Separator

Visual divider for horizontal and vertical separation of content.

@/components/ui/separator

Horizontal

Content above the separator

Content below the separator

Vertical

Home

Organisations

Categories

About

Markdown

Renders markdown strings with consistent typography using Heading and Text components internally.

@/components/ui/markdown

About This Organisation

We are a non-profit dedicated to environmental conservation across Australia.

Our Mission

Our work focuses on three key areas:

  • Habitat restoration — rebuilding native ecosystems
  • Community education — empowering local action
  • Research partnerships — driving evidence-based policy

"The greatest threat to our planet is the belief that someone else will save it." — Robert Swan

Learn more at our website.

Composition

Components combined to build realistic interface patterns.

Green Future Foundation
Restoring native ecosystems through community-driven action.
SydneyEnvironmentConservation

Est. 2012

Settings
Manage your account preferences.

Display Name

Visible to other users

Email

Used for sign-in and notifications