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.

Composite Components

Composites combine PrismUI primitives into complete UI patterns. They cover overlays, data visualization, dashboard widgets, and messaging interfaces.

Overlays & Surfaces

PrismBottomSheet

A draggable bottom sheet with detent support:
Bottom Sheet
PrismBottomSheet(isPresented: $showSheet, detents: [.medium, .large]) {
    FilterOptionsView()
}

PrismToast & PrismNotificationBanner

Temporary feedback messages:
Toast
PrismToast("Item saved", icon: "checkmark.circle", style: .success)
    .prismToast(isPresented: $showToast)
Notification Banner
PrismNotificationBanner(
    title: "New Message",
    subtitle: "From Alice",
    icon: "message.fill",
    action: { openChat() }
)

PrismAlert & PrismBanner

Alert
PrismAlert(
    title: "Delete Item?",
    message: "This action cannot be undone.",
    primaryAction: .destructive("Delete") { await delete() },
    secondaryAction: .cancel()
)
Banner
PrismBanner(
    "Your trial expires in 3 days",
    style: .warning,
    action: ("Upgrade") { showUpgrade() }
)

More Overlays

ComponentDescription
PrismMenuContext menu with themed items
PrismTooltipHover/tap tooltip
PrismTipInline tip callout
PrismToolbarThemed toolbar with title and actions
PrismFlexibleHeaderCollapsible header that reacts to scroll

Content Components

PrismSearchBar & PrismSearchSuggestions

Search
PrismSearchBar(text: $query, placeholder: "Search products...")

PrismSearchSuggestions(query: query, suggestions: recentSearches) { suggestion in
    router.push(.search(suggestion))
}

PrismCarousel

Horizontal scrolling carousel with pagination:
Carousel
PrismCarousel(items, itemWidth: 300, spacing: .md) { item in
    PrismCard {
        AsyncImage(url: item.imageURL)
        Text(item.title)
    }
}

PrismOnboarding & PrismEmptyState

Onboarding
PrismOnboarding(pages: [
    .init(title: "Welcome", image: "star", description: "Get started with Prism"),
    .init(title: "Build", image: "hammer", description: "Create beautiful apps"),
    .init(title: "Ship", image: "paperplane", description: "Deploy with confidence"),
])
Empty State
PrismEmptyState(
    icon: "tray",
    title: "No Items Yet",
    message: "Add your first item to get started.",
    action: ("Add Item") { showAddForm() }
)

PrismCountdownTimer

Countdown
PrismCountdownTimer(targetDate: launchDate, style: .compact)

Charts

PrismUI wraps Swift Charts with token-based styling. Available on iOS 16+, macOS 13+.

PrismBarChart

Vertical/horizontal bar chart with token colors

PrismLineChart

Line/area chart with gradient fill

PrismRadarChart

Multi-axis radar/spider chart

PrismHeatmap

Color-coded matrix for density data

PrismSparkline

Inline mini chart for tables and rows

PrismTreemap

Nested rectangles for hierarchical data

PrismFunnelChart

Conversion funnel visualization

PrismCandlestickChart

OHLC candlestick chart for financial data
Bar Chart Example
struct SalesChart: View {
    let data: [SalesData]

    var body: some View {
        PrismBarChart(
            data,
            x: \.month,
            y: \.revenue,
            barColor: .interactive
        )
        .frame(height: 200)
    }
}
Line Chart Example
PrismLineChart(
    data,
    x: \.date,
    y: \.value,
    lineColor: .brand,
    showArea: true
)

Dashboard Components

Pre-built widgets for analytics dashboards:
KPI Cards
HStack(spacing: SpacingToken.lg.rawValue) {
    PrismKPICard(
        title: "Revenue",
        value: "$12,450",
        change: +8.3,
        sparklineData: revenueHistory
    )

    PrismKPICard(
        title: "Users",
        value: "2,341",
        change: -2.1,
        sparklineData: userHistory
    )
}
Stat Grid
PrismStatGrid(columns: 3) {
    PrismStatGridItem(label: "Active", value: "1,234", color: .success)
    PrismStatGridItem(label: "Pending", value: "56", color: .warning)
    PrismStatGridItem(label: "Failed", value: "3", color: .error)
}
ComponentDescription
PrismTimelineVertical timeline with events
PrismActivityFeedChronological activity stream
PrismComparisonTableSide-by-side feature comparison
PrismSparklineRowTable row with inline sparkline

Communication Components

Ready-made views for chat and messaging interfaces:
Chat Interface
PrismMessageList(messages) { message in
    PrismChatBubble(
        text: message.text,
        isFromCurrentUser: message.isMine,
        timestamp: message.sentAt
    )
}

PrismTypingIndicator(isTyping: $partnerIsTyping)
ComponentDescription
PrismChatBubbleThemed chat bubble with tail
PrismMessageListScrollable message container
PrismTypingIndicatorAnimated ”…” typing indicator
PrismReactionPickerEmoji reaction selector
PrismReadReceiptsSent/delivered/read status indicators
PrismThreadViewThreaded message view