What's New
Recently added components and features. We've added 40 new components to help you build better apps faster.
screens7
DSCommandPalette
Command palette activated by ⌘K. Real-time filtering, section grouping, keyboard shortcuts, and arrow-key navigation.
DSOnboardingCarousel
Paged onboarding with an icon, title and subtitle per step, page dots, and Skip / Next / Get started buttons.
DSActivityFeed
Vertical event feed with avatar, event type icon, description, and timestamp. Supports grouping by date.
DSNotificationCenter
Full notification centre with grouping by type, mark-all-read, per-notification actions, and empty state.
TaskCard
Pattern: a task card composed from DSCard, DSCheckbox, DSStatusLabel and DSAvatarGroup. There is no DSTaskCard type.
DashboardScreen
Pattern: an analytics dashboard composed from DSDashboardGrid, DSMetricCard, DSLineChartWidget and DSBarChartWidget. There is no DSDashboardScreen type.
DSProfileHeroCard
Profile header card with avatar, name, bio, and stats.
data-visualization3
DSMetricCard
Dashboard widget with a primary metric, percentage change, animated sparkline, and label. Supports trending up/down/neutral.
DSLineChartWidget
Card with a title and one or more line series drawn over shared x-axis labels.
DSBarChartWidget
Card with a title and a set of labeled vertical bars.
marketing3
DSPricingCard
Subscription plan card with name, price, billing period, feature list with checkmarks, CTA, and highlighted state for the recommended plan.
DSFeatureCard
Marketing card with an icon, headline, and body text. Designed for feature grids on landing pages.
DSHeroSection
Full-width landing page hero with an announcement badge, headline, subheadline, CTA buttons, and a social proof row.
Navigation3
DSFloatingTabBar
Floating tab bar with capsule, rounded, or standard styles. Features smooth spring animations and matched geometry transitions.
DSTabBar
Horizontal scrollable tabs with animated underline indicator.
DSSubnavigation
Horizontal bar of selectable items for secondary navigation.
selection2
Layout3
DSChipGroup
Horizontal container for chips with consistent spacing.
DSImageGallery
Horizontal scrolling image gallery with page indicators.
DSCardCarousel
Horizontal scrolling carousel of cards with spacing and peek effect.
inputs2
actions3
DSButtonGroup
Horizontal pair of buttons for common action patterns like Cancel + Confirm.
DSLink
Text link with primary color and optional underline.
DSMenuButton
Button that opens a dropdown menu of actions with optional icons.
Feedback10
DSProgressRing
Generic circular progress ring with gradient support and customizable center content. Foundation for app-specific progress indicators.
DSCircularProgress
Circular ring with animated fill showing progress percentage.
DSStarRating
Display-only star rating showing a value from 0 to 5 stars.
DSStarRatingControl
Interactive star rating control allowing users to input ratings from 0 to 5.
DSStepIndicator
Horizontal progress bar showing current step in a multi-step process.
DSNoticeBar
Banner notice with icon, title, optional message, link, and dismiss button.
DSPageLoader
Full-screen loading overlay with centered spinner and optional message.
DSTidbit
Inline callout card with icon, title, body text, optional button, and dismiss.
DSFullPageInterruption
Full-screen modal overlay for critical interruptions like session expiry.
DSSkeletonCard
Card-shaped skeleton placeholder with pulsing animation for loading states.
data-display2
messaging2
DSMessageBubble
Chat message bubble with support for custom content, loading states, avatars, and asymmetric styling for user vs. other messages.
DSChatInputBar
Chat input field with send button, optional attachment button, and support for single-line or multi-line input.
More components coming soon
We're constantly adding new components and improving existing ones.
Get started with SwiftDS