Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.prism.byescaleira.com/llms.txt

Use this file to discover all available pages before exploring further.

PrismUI is a complete SwiftUI design system for Apple-platform apps. Every visual decision—colors, typography, spacing, corner radii, shadows, and animations—flows from six semantic token types, so your entire app updates consistently when you switch themes. The module ships with 80+ components across five categories, four built-in themes (including always-dark and high-contrast), and built-in VoiceOver, Dynamic Type, and reduced-motion support.

​
Installation

import PrismUI

​
Design tokens

Six token types drive every component. You consume them through SwiftUI modifier APIs rather than raw values, so your views remain theme-aware without hard-coded constants.
TokenPurposeExample values
ColorToken28 semantic color rolesbrand, onBackground, surfaceSecondary, error
TypographyTokenText styles with optical sizinglargeTitle, title, body, caption2
SpacingToken4-pt grid spacing scalexs (4 pt) → xxxl (64 pt)
RadiusTokenContinuous corner radiism (8 pt) → full (1000 pt)
ElevationTokenShadow hierarchyflat → overlay
MotionTokenReduce-motion-aware durationsinstant → expressive
Apply tokens via semantic SwiftUI modifiers: 
Text("Welcome")
    .prismFont(.title)
    .prismColor(.onBackground)
    .prismPadding(.lg)
    .prismSurface(.surfaceSecondary, radius: .lg)

​
Themes

You apply a theme once at the root of your view hierarchy and every PrismUI component inherits it. 
ContentView()
    .prismTheme(DefaultTheme())
ThemeDescription
DefaultThemeApple HIG system colors; respects the system light/dark appearance
DarkThemeAlways renders in dark mode regardless of system settings
HighContrastThemeMaximum contrast ratios for accessibility (WCAG AAA)
BrandThemeConfigurable primary, secondary, and accent colors
// Custom brand theme
let theme = BrandTheme(primary: .indigo, secondary: .mint, accent: .orange)
ContentView()
    .prismTheme(theme)

​
Components

PrismUI ships 80+ components across five categories. All components respect the active theme and inherit the accessibility settings of the host device.

​
Primitives

Core building blocks used throughout every screen.
  • PrismButton — filled, tinted, bordered, or text variant; supports async actions
  • PrismIcon — SF Symbols with semantic sizing
  • PrismAsyncImage — remote image loading with placeholder and error states
  • PrismTextField — validation rules including pattern matching
  • PrismCard — surface-aware container with configurable elevation
  • PrismTag, PrismChip — label components with optional dismissal
  • PrismDivider — themed separator
  • PrismLoadingState, PrismProgressBar — loading indicators
  • PrismAvatar — initials or image with presence status indicator
// Async button
PrismButton("Sign In", variant: .filled) {
    await viewModel.signIn()
}

// Email validation
PrismTextField("Email", text: $email, validation: .pattern(
    "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}",
    "Enter a valid email"
))

// Avatar with online status
PrismAvatar(initials: "JD", size: .large, status: .online)

​
Composites

Higher-order components that combine primitives.
  • PrismAlert — themed alert with configurable actions
  • PrismBanner — informational banners with severity levels
  • PrismCarousel — paged horizontal scroll with analytics events
  • PrismSearchBar — search input with debounced binding
  • PrismToolbar — navigation toolbar with leading and trailing items
  • PrismToast — auto-dismissing notification overlay
  • PrismMenu — contextual action menu
  • PrismBottomSheet — drag-to-dismiss sheet with snap points
  • PrismTooltip — inline explanatory popover
  • PrismEmptyState — zero-data placeholder with action
  • PrismCountdownTimer — animated countdown display
// Auto-dismissing success toast
.prismToast(isPresented: $showToast, "Saved!", icon: "checkmark", style: .success)

​
Forms

Input controls with built-in validation and accessibility labels.
  • PrismToggle, PrismPicker, PrismSlider
  • PrismSecureField, PrismDatePicker, PrismTextArea
  • PrismSegmentedControl, PrismStepper, PrismRating
  • PrismPinField — PIN / OTP entry
  • PrismColorWell — color selection input

​
Lists

Scrollable content patterns with swipe and disclosure support.
  • PrismRow — single-line or multi-line list row
  • PrismDisclosureRow — expandable disclosure row
  • PrismList — themed list container
  • PrismBadge — numeric or dot badge overlay
  • PrismSwipeActions — leading and trailing swipe actions

​
Layout

Adaptive container views that respond to size classes and screen geometry.
  • PrismAdaptiveStack — switches between HStack and VStack based on available width
  • PrismGrid — fixed or adaptive grid layout
  • PrismSection — grouped content section with optional header and footer
  • PrismScaffold — full-screen layout with safe area and background
  • PrismSpacer — token-aware flexible spacer

​
Accessibility

Every PrismUI component ships with:
  • VoiceOver — semantic labels and traits on all interactive elements
  • Dynamic Type — all text styles scale with the user’s preferred font size
  • Reduce Motion — MotionToken resolves to instant or easeOut durations based on the accessibility setting
  • Contrast — HighContrastTheme validates WCAG AA and AAA contrast ratios via PrismAccessibilityTest
  • Snapshot testing — PrismSnapshotTest captures visual regression baselines for all four themes
For detailed token values, component props, and theme customization APIs, see the design-system pages linked in the sidebar.