Pattern Library
Practical UI patterns for a high-trust UX portfolio. This library prioritises reusable, evidence-oriented components over raw token documentation.
Principles
- Design for trust and scannability first.
- Keep evidence close to claims.
- Use progressive disclosure for dense content.
- Prefer composable primitives over custom one-offs.
Core patterns
Recommended use: hero and credentials blocks where decision-makers want fast qualification checks.
“Adam is highly professional, attentive to nuance, and asks the right questions to understand the business context and achieve UX outcomes.”
Elisa
Director, Customer Experience
“One of Adam's greatest strengths is his expertise in experience design and his understanding of the end-to-end design process.”
Tim
Experience Strategy Consultant
“Adam's ability to clearly articulate requirements, and to seek clarification from the client ahead of the build sprint, was crucial.”
Mubin
Government Consultant
“Adam is a true UX professional. He strikes the right balance between building empathy with target users and creatively designing experiences to meet their needs - often in delightful ways.”
Lachlan
User Experience Lead
“Adam is a confident communicator who can explain and unpack complex ideas and designs for any audience.”
Jack
Government Director
“Adam has excellent attention to detail, and works collaboratively with clients to produce outcomes that suit their needs.”
Rebecca
Government Director
Keep primary narrative short. Use modal detail for evidence and auditability.
DoD, ASD, DFAT - classified environments with security clearance requirements, strict information handling, and stakeholders with very low tolerance for ambiguity or rework.
Australian Electoral Commission - high-reliability, high-consequence systems with non-negotiable election event timelines. Complex operational workflows across national, state, and divisional levels.
Therapeutic Goods Administration, Department of Agriculture - environments where every interface decision has downstream compliance implications, and where user error carries real regulatory risk.
DFAT - global user bases, complex internal management systems, classification-sensitive environments, and the challenge of designing for staff operating across dozens of countries and contexts.
Component map
Badges & Separators
Use badges for high-value metadata and separators to chunk dense information.
Cards
Basic content presentation card.
Used for capability and context groupings.
Cards can include action rows for progressive disclosure.
Used for testimonial and proof surfaces.
Tabs
Unified view across leadership, delivery, and governance signals.
Icons
ShadCN icons are sourced from Lucide. This list is generated from the installed package and is the source-of-truth catalog for this codebase.
Showing 240 of 1917 matching icons (1917 total)
- a-arrow-down
- a-arrow-up
- a-large-small
- accessibility
- activity
- activity-square
- air-vent
- airplay
- alarm-check
- alarm-clock
- alarm-clock-check
- alarm-clock-minus
- alarm-clock-off
- alarm-clock-plus
- alarm-minus
- alarm-plus
- alarm-smoke
- album
- alert-circle
- alert-octagon
- alert-triangle
- align-center
- align-center-horizontal
- align-center-vertical
- align-end-horizontal
- align-end-vertical
- align-horizontal-distribute-center
- align-horizontal-distribute-end
- align-horizontal-distribute-start
- align-horizontal-justify-center
- align-horizontal-justify-end
- align-horizontal-justify-start
- align-horizontal-space-around
- align-horizontal-space-between
- align-justify
- align-left
- align-right
- align-start-horizontal
- align-start-vertical
- align-vertical-distribute-center
- align-vertical-distribute-end
- align-vertical-distribute-start
- align-vertical-justify-center
- align-vertical-justify-end
- align-vertical-justify-start
- align-vertical-space-around
- align-vertical-space-between
- ambulance
- ampersand
- ampersands
- amphora
- anchor
- angry
- annoyed
- antenna
- anvil
- aperture
- app-window
- app-window-mac
- apple
- archive
- archive-restore
- archive-x
- area-chart
- armchair
- arrow-big-down
- arrow-big-down-dash
- arrow-big-left
- arrow-big-left-dash
- arrow-big-right
- arrow-big-right-dash
- arrow-big-up
- arrow-big-up-dash
- arrow-down
- arrow-down-0-1
- arrow-down-01
- arrow-down-1-0
- arrow-down-10
- arrow-down-a-z
- arrow-down-az
- arrow-down-circle
- arrow-down-from-line
- arrow-down-left
- arrow-down-left-from-circle
- arrow-down-left-from-square
- arrow-down-left-square
- arrow-down-narrow-wide
- arrow-down-right
- arrow-down-right-from-circle
- arrow-down-right-from-square
- arrow-down-right-square
- arrow-down-square
- arrow-down-to-dot
- arrow-down-to-line
- arrow-down-up
- arrow-down-wide-narrow
- arrow-down-z-a
- arrow-down-za
- arrow-left
- arrow-left-circle
- arrow-left-from-line
- arrow-left-right
- arrow-left-square
- arrow-left-to-line
- arrow-right
- arrow-right-circle
- arrow-right-from-line
- arrow-right-left
- arrow-right-square
- arrow-right-to-line
- arrow-up
- arrow-up-0-1
- arrow-up-01
- arrow-up-1-0
- arrow-up-10
- arrow-up-a-z
- arrow-up-az
- arrow-up-circle
- arrow-up-down
- arrow-up-from-dot
- arrow-up-from-line
- arrow-up-left
- arrow-up-left-from-circle
- arrow-up-left-from-square
- arrow-up-left-square
- arrow-up-narrow-wide
- arrow-up-right
- arrow-up-right-from-circle
- arrow-up-right-from-square
- arrow-up-right-square
- arrow-up-square
- arrow-up-to-line
- arrow-up-wide-narrow
- arrow-up-z-a
- arrow-up-za
- arrows-up-from-line
- asterisk
- asterisk-square
- at-sign
- atom
- audio-lines
- audio-waveform
- award
- axe
- axis-3-d
- axis-3d
- baby
- backpack
- badge
- badge-alert
- badge-cent
- badge-check
- badge-dollar-sign
- badge-euro
- badge-help
- badge-indian-rupee
- badge-info
- badge-japanese-yen
- badge-minus
- badge-percent
- badge-plus
- badge-pound-sterling
- badge-question-mark
- badge-russian-ruble
- badge-swiss-franc
- badge-turkish-lira
- badge-x
- baggage-claim
- balloon
- ban
- banana
- bandage
- banknote
- banknote-arrow-down
- banknote-arrow-up
- banknote-x
- bar-chart
- bar-chart-2
- bar-chart-3
- bar-chart-4
- bar-chart-big
- bar-chart-horizontal
- bar-chart-horizontal-big
- barcode
- barrel
- baseline
- bath
- battery
- battery-charging
- battery-full
- battery-low
- battery-medium
- battery-plus
- battery-warning
- beaker
- bean
- bean-off
- bed
- bed-double
- bed-single
- beef
- beer
- beer-off
- bell
- bell-dot
- bell-electric
- bell-minus
- bell-off
- bell-plus
- bell-ring
- between-horizonal-end
- between-horizonal-start
- between-horizontal-end
- between-horizontal-start
- between-vertical-end
- between-vertical-start
- biceps-flexed
- bike
- binary
- binoculars
- biohazard
- bird
- birdhouse
- bitcoin
- blend
- blinds
- blocks
- bluetooth
- bluetooth-connected
- bluetooth-off
- bluetooth-searching
- bold
- bolt
- bomb
- bone
- book
- book-a
- book-alert
- book-audio
- book-check
Refine search to view more than 240 icon previews.
Dialog + Accordion
Loading states
Toggle between loading and loaded states to see skeleton patterns.