All Components

Universal button component with 5 visual variants, 3 sizes, icon support, loading and disabled states. Uses spring animations for micro-interactions.

Compact button containing only an SF Symbol. Ideal for toolbars, navigation bars, and contextual actions in lists.

Text field with support for label, placeholder, leading/trailing icons, hint, error message, focus and disabled states.

Content container with 4 visual variants, large border radius, and interactive hover support. Generic over any View as content.

Non-intrusive notification that appears at the top of the screen. Available as both a standalone component and a .dsToast() view modifier.

Represents a user with initials or an image. Supports 5 sizes and an online/offline/busy/away status indicator.

Command palette activated by ⌘K. Real-time filtering, section grouping, keyboard shortcuts, and arrow-key navigation.

Dashboard widget with a primary metric, percentage change, animated sparkline, and label. Supports trending up/down/neutral.

Subscription plan card with name, price, billing period, feature list with checkmarks, CTA, and highlighted state for the recommended plan.

Multi-step onboarding flow with a step indicator, transition animations between screens, forward/back buttons, and a skip option.

Password input with a show/hide toggle. Shares the same visual language as DSTextField.

Dedicated search input with a magnifying glass icon, clear button, and optional cancel button.

Multi-line text input that expands as the user types, with an optional character counter.

On/off switch with an optional label and description. Wraps the native SwiftUI Toggle with design-token styling.

Multi-select checkbox with a checkmark animation. Supports indeterminate state for parent checkboxes.

Single-select radio button group. Generic over any Hashable value type.

Range slider with min/max labels and an optional live value formatter.

Overlapping stack of avatars with a '+N' overflow indicator when the list exceeds the max.

Compact label with 3 visual variants (filled, soft, outline), gradient support, and 3 size options.

Removable label with a custom colour, used for categorisation and filtering.

Standard list row with leading icon, title, optional subtitle, badge, and a trailing action.

Generic data table with column headers, alternating row tint, hover effect, and row selection support.

Placeholder view with an SF Symbol, title, description, and optional CTA button.

Inline alert banner with an icon, title, optional message, and a dismiss button. Non-modal.

Centered overlay dialog with a header, scrollable content area, and footer actions. Blocks background interaction.

iOS-native bottom sheet using presentationDetents, with a drag handle and configurable snap points.

Linear progress indicator with an optional label and percentage display. Supports indeterminate (loading) mode.

Circular indeterminate loading indicator with 3 sizes and a colour token.

Pulsing placeholder shapes that mimic the layout of content while it loads.

Tab bar with icon, label, and badge support. Uses spring animations for the active indicator.

Horizontal row of mutually exclusive segments with a sliding active indicator.

Floating tab bar with capsule, rounded, or standard styles. Features smooth spring animations and matched geometry transitions.

App navigation bar with a title, optional back button, and leading/trailing icon button slots.

Collapsible navigation sidebar for macOS and iPad with section grouping and active-state indicator.

Convenience wrapper around HStack/VStack with design-token spacing pre-applied.

Responsive CSS-style grid wrapper with configurable columns and gap from the spacing token scale.

Max-width content wrapper with automatic horizontal padding.

Named content group with an optional header, footer note, and inset background.

Horizontal or vertical rule using DSColor.border, with optional label.

Wrapping layout that automatically flows children onto new lines when horizontal space is exhausted.

Marketing card with an icon, headline, and body text. Designed for feature grids on landing pages.

Animated line chart with a gradient fill, interactive tooltip on long-press, and configurable axes.

Vertical bar chart with entry animation, value labels on each bar, and configurable axis labels.

Vertical event feed with avatar, event type icon, description, and timestamp. Supports grouping by date.

Full notification centre with grouping by type, mark-all-read, per-notification actions, and empty state.

Full user profile card with avatar, name, bio, stats row, and action buttons.

Settings row with a coloured icon square, title, optional subtitle, and a right-side control (chevron, toggle, or custom view).

Full-width landing page hero with an announcement badge, headline, subheadline, CTA buttons, and a social proof row.

6-digit one-time password input with individual digit boxes, auto-advance, and paste support.

Phone number input with a country code picker, flag icon, and automatic formatting.

Numeric input with − and + buttons. Respects min/max bounds and disables the buttons at limits.

Selectable pill chip with a checkmark on active state. Can be used standalone or in a multi-select group.

5-star rating component with tap-to-rate, half-star display, and read-only mode.

Date (and optional time) picker with a calendar grid popover. Wraps the native DatePicker with DS token styling.

Colour swatch grid with a custom-colour option via the system colour picker. Supports a predefined palette.

Small informational popover that appears on long-press (iOS) or hover (macOS). Disappears automatically after a timeout.

Hierarchical path display with chevron separators and tappable ancestor links.

Page control with previous/next buttons and numbered page indicators. Supports compact (dots) and full (numbers) modes.

Expandable/collapsible content section with a header and animated disclosure.

Anchored floating panel with an arrow pointing to its trigger. Contains rich content — not just text.

Long-press context menu with icon-labelled actions. Wraps the native contextMenu with DS token styling.

Drag-and-drop / tap-to-browse file input with allowed type filtering, size limit, and progress overlay.

Photo library and camera source picker that returns a UIImage/SwiftUI Image. Shows a preview thumbnail after selection.

MapKit wrapper with a pin annotation, user location dot, and a rounded-corner container style matching the DS.

Complete payment form with card number, expiry, CVV, billing address, and an order summary sidebar. Includes real-time card brand detection.

Responsive photo/video grid with a full-screen viewer, pinch-to-zoom, and swipe-to-dismiss. Supports lazy loading.

Message bubble with sent/received alignment, timestamp, delivery status indicators, and support for text, image, and audio messages.

Messages inbox row list with avatar, sender name, message preview, timestamp, and unread count badge.

Task item card with a completion checkbox, priority badge, due date, assignee avatars, and a label/tag row.

Horizontally scrolling kanban board with draggable cards between columns. Each column shows a card count and colour-coded header.

Monthly calendar grid with event dots, selected date highlight, and swipe-to-navigate months.

Full search screen with a sticky search bar, category filter chips, recent searches, and a results list with skeleton loading.

Full profile editing screen with avatar picker, name/bio fields, social links section, and a save button with loading state.

Composable dashboard screen with a greeting header, KPI metric row, line/bar chart, activity feed, and quick-action buttons.

Action chip with title, optional icons, and variant-based styling for filters and tags.

Selectable chip with on/off state that shows a checkmark when selected.

Horizontal container for chips with consistent spacing.

Dropdown menu that shows options and updates a binding with the selected value.

Grid of tappable color circles that updates selection on tap.

Horizontal scrollable tabs with animated underline indicator.

Horizontal bar of selectable items for secondary navigation.

Horizontal pair of buttons for common action patterns like Cancel + Confirm.

Text link with primary color and optional underline.

Button that opens a dropdown menu of actions with optional icons.

Generic circular progress ring with gradient support and customizable center content. Foundation for app-specific progress indicators.

Circular ring with animated fill showing progress percentage.

Status label with icon indicating success, warning, error, info, or neutral state.

Promotional label for discounts, new items, or special badges.

Horizontal scrolling image gallery with page indicators.

Horizontal scrolling carousel of cards with spacing and peek effect.

Display-only star rating showing a value from 0 to 5 stars.

Interactive star rating control allowing users to input ratings from 0 to 5.

Horizontal progress bar showing current step in a multi-step process.

Banner notice with icon, title, optional message, link, and dismiss button.

Full-screen loading overlay with centered spinner and optional message.

Inline callout card with icon, title, body text, optional button, and dismiss.

Full-screen modal overlay for critical interruptions like session expiry.

Profile header card with avatar, name, bio, and stats.

Card-shaped skeleton placeholder with pulsing animation for loading states.

Chat message bubble with support for custom content, loading states, avatars, and asymmetric styling for user vs. other messages.

Chat input field with send button, optional attachment button, and support for single-line or multi-line input.