What's new in each version of SoftUI.
Navigation Menu, Segmented Control, Countdown, Scrollspy, Editable Text
New Components:
- Navigation Menu — dropdowns, mega-menu, icons, groups, bordered, raised,
inset, hover-to-open, sub-menus (hover + click)
- Segmented Control — iOS-style toggle with sliding indicator, primary,
block, sizes, disabled
- Countdown — animated timer with years/days/hours/min/sec, relative dates
(+2y5d), primary, inset, bordered, sizes
- Scrollspy — auto-highlight nav on scroll, vertical, horizontal, pill,
auto-detect scroll container, click-to-scroll
- Editable Text — click-to-edit inline, underline variant, sizes,
save/cancel events, with/without icon
Enhancements:
- Bento grid reordered by category, dense packing (no gaps)
- 110 playground snippetsResult, Hero, Descriptions, List Group & Print Styles
New Components:
- Result — full-page feedback states (success, error, warning, 404, info, inset)
- Hero — landing page banners (default, small, large, raised, bordered, inset, gradient, accent)
- Descriptions — key-value displays (default, bordered, raised, inset, striped)
- List Group — styled lists with badges, avatars, flyout sub-menus, active/disabled states
Enhancements:
- Print styles — hides overlays, removes shadows, adds borders
- On This Page sidebar on Getting Started
- Playground expanded to 100+ snippetsDrawer, Radio/Checkbox Cards, Mask Shapes & 101 Playground Snippets
New Components:
- Drawer — mobile-first bottom sheet with drag handle, swipe to dismiss, snap points
- Radio Card — click entire card to select (single selection)
- Checkbox Card — click entire card to select (multiple selection)
- Mask — 12 CSS clip-path shapes (circle, squircle, star, heart, diamond,
hexagon, triangle, pentagon, octagon, cross, shield, parallelogram)
Enhancements:
- Print styles — hides overlays, removes shadows, adds borders for printing
- On This Page sidebar added to Getting Started
- Playground expanded to 101 snippets covering all componentsRTL Support, Cross-Browser Fixes & Search Improvements
New:
- Full RTL (right-to-left) support for Arabic, Hebrew, Farsi
- RTL demo page with live examples
- Browser Support section on Getting Started
RTL:
- Utility classes use CSS logical properties (margin-inline-start/end)
- dir="rtl" overrides for sheets, carousel, lightbox, breadcrumbs,
dropdowns, sidebar, speed dial, avatar, select, accordion, timeline
Cross-Browser:
- Added -webkit-user-select prefix to all components
- Removed deprecated overflow:overlay
Docs:
- Theming, Changelog, RTL Demo added to Cmd+K search
- Search keywords added for better discoverabilityStyled Select, Data Table Enhancements & Fixes
New:
- Styled Select — custom dropdown replacement for native <select>
- Data table filter dropdown for row filtering
- Data table sort reset (3-click cycle: asc → desc → unsorted)
- Dropdown no-arrow modifier
- Pricing selectable variant (click cards to select)
Fixes:
- Modals no longer clip dropdowns or datepickers
- Datepicker trigger matches input sizing
- Number input spin buttons hidden automatically
- Navbar brand hover stays text color
- Horizontal bar chart spacing and alignment
- Dark mode flash prevention guide in Getting StartedPricing Component
New Components:
- Pricing Cards — default, featured badge, billing toggle, insetAccessibility, Design Tokens & Docs
Accessibility:
- prefers-reduced-motion support
- Focus-visible states on links, sidebar nav, inputs
- Color contrast improved to WCAG AA
- Dropdown arrow key navigation
- Proper ARIA roles on modals and tables
New:
- Design tokens (dist/tokens.json)
- Theming guide with full variable reference
- Framework integration examples (React, Vue, Svelte, Astro, Next.js)
- Changelog page
- No-flash page loading (opacity:0 + early theme detection)Utility Classes & New Components
New Components:
- Tour / Walkthrough — spotlight overlay with step-by-step tooltips
- Copy Button — click-to-copy with checkmark feedback
- Text Rotate — animated word cycling (fade, slide, flip, zoom)
- Typewriter — character-by-character typing with cursor styles
- Marquee — infinite scrolling logos, text, cards
- Browser Mockup — macOS/Windows chrome with tabs
- Phone Mockup — notch, dynamic island, teardrop, punch hole
Utility Classes:
- Display: inline, inline-block, grid
- Position: relative, absolute, fixed, sticky + placement
- Sizing: width, max-width, height, min/max
- Overflow: hidden, auto, scroll, x/y variants
- Opacity: 0 through 100
- Z-Index: 0, 10, 20, 30, 40, 50
- Cursor: pointer, not-allowed, grab, move, text
- Visibility: visible, invisible, sr-only
- Pointer Events, User Select
5 new utility docs pages.
Fixes:
- Tour positioning and scroll-into-view
- Brand hover color fix
- Bento card tab focus (tabindex=-1 on preview elements)
- Mobile drawer removed from tab order when closed12 New Components & Major Docs Improvements
New Components:
- Tree View — hierarchical tree with icons, lines, tri-state checkboxes
- Speed Dial / FAB — floating action button with expandable actions
- Image Lightbox — grid, filmstrip, vertical gallery, captions, zoom
- Loading Overlay — spinner variants, blur, fullscreen
- Diff — image compare slider with draggable divider
- Stack — overlapping cards with fanned and hover spread
Docs:
- Sidebar reorganized into 9 categorized groups
- Code of Conduct and Contributing guide added
- Raised container variants for Tree View, Rating, Color Picker, Swap
Fixes:
- Table row hover blending with background
- Global scrollbar restyled (thin rounded pill, no arrows)
- Modal shadow reduced, backdrop blur variants added (none/sm/md/lg/xl)6 New Components, Form Enhancements & Search
New Components:
- Chat Bubble — sent/received messages with avatar, status, grouped
- Color Picker — swatches, spectrum picker (canvas + hue + RGB/hex)
- File Upload — drag-and-drop, file list, progress, image previews
- Radial Progress — SVG circle ring with animated count-up
- Dock — macOS-style icon bar with hover magnification
- Swap — animated toggle (rotate, flip, fade, slide) + multi-state cycle
Form Enhancements:
- Password Input with eye toggle and validation rules
- Number Input with styled +/- buttons
- Tags Input (type to create chips)
- Cards → Empty State variant
Docs:
- Cmd+K search with command palette
- JS requirement banners on 28 component pages
- Getting Started → JavaScript section
- Code block audit across 18 components (removed all ... placeholders)Rating Component
New Components:
- Rating — star/heart/custom icon rating with half-star support,
sizes, colors, read-only, inset
Fixes:
- Timeline bento card connector alignmentStat Card Component
New Components:
- Stat Card — KPI display with value, label, trend arrow,
icon, progress, bordered, inset, flat, compact variantsSidebar, Timeline & Playground
New Components:
- Sidebar — collapsible app sidebar with nav links, groups, icons
- Timeline — vertical event timeline with dots, connectors, colors
Docs:
- Playground page for live code editing
- Simplified snippet insertion (click to insert)
Fixes:
- Tab panel border-radius on only-child cardsInitial Release
Core library with 44 components and 7 utility categories:
- Buttons, Cards, Badges, Alerts, Progress, Tables, Forms
- Modal, Sheet, Dropdown, Popover, Tooltip, Context Menu
- Tabs, Accordion, Carousel, Calendar, Chart, Data Table
- Navbar, Breadcrumbs, Pagination, Stepper, Kbd, Chip
- Skeleton, Spinner, Slider, Toggle Group, Input OTP
- Combobox, Command Palette, Resizable, Drag & Drop
- Scroll Area, Collapsible, Hover Card, Menubar
- Layout system (12-column grid, containers, flex utilities)
- Dark mode support
- Published to npm as softui-cssThis is a neumorphic modal dialog. It features backdrop blur, smooth animations, and focus trap. Press Escape or click outside to close.
Your session will expire in 5 minutes. Would you like to stay signed in?
This action cannot be undone. This will permanently delete the item and remove all associated data.
This modal takes up the entire viewport. Useful for immersive content, editors, or media viewers.
Press Escape or click the close button to dismiss.
By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. In addition, when using these particular services, you shall be subject to any posted guidelines or rules applicable to such services. Any participation in this service will constitute acceptance of this agreement.
Permission is granted to temporarily download one copy of the materials on this website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not modify or copy the materials, use the materials for any commercial purpose, attempt to reverse engineer any software, or remove any copyright notations.
The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property.
In no event shall this company or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials, even if we have been notified orally or in writing of the possibility of such damage.
The materials appearing on this website could include technical, typographical, or photographic errors. We do not warrant that any of the materials on its website are accurate, complete or current. We may make changes to the materials contained on its website at any time without notice.
We have not reviewed all of the sites linked to this website and are not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement. Use of any such linked web site is at the user's own risk.
We may revise these terms of service for this website at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service. Any changes will be posted on this page with an updated revision date.
These terms and conditions are governed by and construed in accordance with applicable laws and you irrevocably submit to the exclusive jurisdiction of the courts in that location. If any provision of these terms shall be unlawful, void, or unenforceable, then that provision shall be deemed severable and shall not affect the validity of the remaining provisions.
Clicking outside this modal won't close it. Instead, the modal will shake to indicate it requires explicit action. Use the close button or press Escape to dismiss.
This modal has no backdrop blur. The background is visible but dimmed.
A subtle 3px backdrop blur. Content behind is slightly softened.
A heavy 12px backdrop blur. Background is barely recognizable.
Maximum 20px blur. Background is fully frosted.
This is a default right-side sheet. It slides in from the right edge of the screen with a blurred backdrop.
Sheets are great for navigation menus, settings panels, detail views, and forms that don't need to interrupt the main content flow.
This sheet slides down from the top. Great for announcements, notification panels, or search interfaces.
This is a small (280px) right-side sheet.
This is a large (480px) right-side sheet. Great for forms, detail views, or complex content.
Clicking outside this sheet won't close it. The sheet will shake to indicate it requires explicit action. Use the close button or press Escape.