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.

Paged onboarding with an icon, title and subtitle per step, page dots, and Skip / Next / Get started buttons.

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.

Card with a title and one or more line series drawn over shared x-axis labels.

Card with a title and a set of labeled vertical bars.

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-width landing page hero with an announcement badge, headline, subheadline, CTA buttons, and a social proof row.

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

Horizontally scrolling row of single-select filter chips.

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

View modifier that shows a short label next to a view while the pointer hovers it (macOS, iPadOS with a pointer, visionOS).

Pattern: a task card composed from DSCard, DSCheckbox, DSStatusLabel and DSAvatarGroup. There is no DSTaskCard type.

Pattern: an analytics dashboard composed from DSDashboardGrid, DSMetricCard, DSLineChartWidget and DSBarChartWidget. There is no DSDashboardScreen type.

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.