Changelog — Pro Edition#

1.9.3#

April 29, 2026

The background behind these component changes: we keep support for specific styles within the OC components, but balance between a) being able to provide Nova and other styles consistently in the future and b) providing good-looking Pro blocks with our own customizations. The code part for Pro Blocks is coming on May 11, by the way!

Component changes
- Rename Marketing Button to Extra Large Button (OC)
- Move Rounded variant of Input to its own OC component
- Move Rounded variant of Button to its own OC component
- Move Rounded variant of Icon Button to its own OC component
- Move required asterisk (non-official behavior) to a Label (OC) component
Documentation
- Add more Menubar examples
- Minify several docs by only providing specific examples, where the settings for what is documented get saved via the Obra Autodocs plugin
- Clearly mark every OC component with (OC), in the docs as well as in the component name itself
Shadcn consistency
- Streamline Field component to have similar spacing as in shadcn official
- Remove Inline Message (OC) from Field component in favor of a simple paragraph in either Muted Foreground or Destructive style
UX changes
- Empty: make it easier to see what should come in the Slot by placing the rectangular variant
Token changes
- Renamed font-family-sans to font-family
- Removed font-family-serif token, as it was unused and would cause confusion when using our design-to-code export plugin
- Use more muted colors for the defaults of Menu Item > Accent (in the next version, we will be moving all examples to use Menu Item > Accent, and it will become the default)
Bugfixes
- Fix issue with Charts component
- Fix publishing bugs in Carousel (slot names), Pagination (boolean property) and Avatar Stack (boolean properties)
- Adjust Input border in dark mode to Theme Neutrals/700
- Remove some leftover Avatar Stack variants with images

1.9.2#

April 24, 2026

Added Monospace small and monospace mini type styles
Button
- Move Extra large button size to an OC component (as a separate component)
- Bring back Extra small button size (erroneously deleted in 1.9.0)
- Merge Link Button into Button
- Combine Button & Icon Button on the same page like shadcn/ui does
- Add missing Invalid state for Button
Aspect Ratio
- Add (Unofficial) 2.35:1 Cinema ratio for usage in e-commerce hero
Button Group
- Tighten up left/right spacing
Swap default Geist heading weight to Medium
We added 2 additional Pro Blocks Application screens and their respective tablet and mobile versions
- App - Kanban-01
- App - Agentic AI-01
Pro blocks improvements
- Marketing
  - Remove Marketing - Features-07 — this block was too ugly
  - Review typographic details in Marketing - Blog-Detail-01
  - Use generic fill for avatars with images in Marketing - Quote-01 & Marketing - Quotes-01
  - Remove usages of Extra Large button in Marketing blocks (visually worse, but we’re preparing to add support for all styles to shadcn/ui, and need to standardize on what exists)
  - Swap where divider goes in Marketing - Doormat-01 (top instead of bottom)
- E-commerce
  - Footer-01: fix deprecated icons
  - Checkout-01: fix fields asterisk usage
- App
  - Calendar-01: add App - Calendar-01-A (Mobile) and App - Calendar-01-B (Mobile) showing detail screen of calendar app
  - Table-01
    - Use more generic content to provide a more appropriate starting point (get rid of custom avatars)
    - Fix not using the new Table Cell > Slot component in the table
  - CRM-Wizard-01: get rid of asterisk in label names (required fields can be set with a boolean property on the label component)
  - Add-Contact-Dialog-01 (Desktop): improve content (more types of fields)
  - Calendar-01 (Desktop): improve design of Session Popup

1.9.1#

April 23, 2026

Bugfixes
- Fix accidental inclusion of Sera style in Alert
- Re-attach shadow-xs to Input and Outlined Button (we removed it because we thought it was removed in Vega, but we were looking at Nova. Whoops.)
- Pro blocks
  - Remove stray Marketing - Badges-01
  - Fix type style attachment in App - CRM-Dashboard-01 (Desktop)

1.9.0 — The consistency release#

April 22, 2026

Official components
- Avatar
  - Added missing roundrect style to Avatar with Status badge and Avatar with Icon
  - Added missing icon override to Avatar with Icon
- Alert Dialog / Dialog: Tweaked Dialog and Alert Dialog to have options for mobile display (vertical buttons in footer)
- Badge
  - Add support for spinner in Badge
  - Fix bug with roundness of default variant
- Button: Add spinner to Button
- Button and several Button variants (toggle, loading, icon): remove mini size to simplify the kit. The mini size does not occur in official shadcn/ui.
- Carousel: Improved consistency in examples
- Collapsible: Added Collapsible component with the same shadcn/ui examples as listed on the docs website
- Card: Simplify card defaults — make variants of card that use just 1 and 2 slots, and default to the 1-slot card
- Command: Improved consistency of Command menu with shadcn
- Data Table
  - Simplified Data Table > Table Cell and Data Table > Table Header to not have a selected state (Active is the selected state)
  - Changed style of sortable table cells to match others
  - Removed table cells with icon 1/icon 2/icon 3 and badge 1/badge 2/badge 3 and corresponding props
  - Added table cell with slot to fit any generic content
  - Reworked data table examples
- Input
  - Remove shadow-xs from Input
  - Remove mini variant
- Item: Improve usability of component
  - Added slot with a square shape
  - Added hover for muted variant
  - Collapsed asChild and state (2 booleans) into 1 single enumerated value called Interaction
- Select & Combobox
  - Add Multiple tags input
  - Document how to make inverted menus in Menu & Combobox component
  - Add Combobox page that refers to Menu & Combobox to make it easier to find Combobox
  - Add rounded variant
  - Simplified Menu component to not have a selected state (Active is the selected state)
  - Bugfix: Correct Error focus ring style
- Resizable: Updated Resizable component to shadcn/ui docs styling
- Spinner: Add small size to Spinner
- Toggle Group: remove mini variant
- Loading Button: was removed — please use the Spinner property inside the Button
Bugfixes
- Move error focus ring style from tw-red/300 to 200
- Add extra alpha/switch/15 variable to several focus states to prevent blurry borders
Consistency
- Remove link underline from default state of Link Button
- Add hover state to Link Button
- Fix hover state of Accordion (related to underline style) not working in prototyping mode
Obra Custom components
- Improved Timeline (OC) component
- Removed Image Placeholder (we favor using the official Aspect Ratio)
- Tweaked default colors of Star Rating (OC) component — mix of foreground and foreground-muted
Pro blocks
- Fix visual bug in Marketing - Secondary-Navigation-01
- Fix labels in Marketing - FAQ-01 and Marketing - FAQ-02, and fix visual issue in Marketing - FAQ-02
- Remove double example in E-commerce Hero section
- Improved all e-commerce and application examples to use the official Aspect Ratio component
- Removed App - Billing-Form-01 (Desktop), App - Settings-01 (Desktop), App - List-01 (Desktop), App - CRM-Sidebar-02 (Desktop) — we will replace these with higher quality Pro blocks
Icons
- Added an extra icon for PayPal

1.8.3#

April 14, 2026

Added Timeline (OC) component
Added Menubar component. We missed having this official shadcn component in the kit.
Adjust Switch, Radio and Checkbox default font weight to accord to shadcn/ui (medium), and add “normal” font weight option for checkbox group
Label
- Remove OC (Obra Custom) from Label (OC) and move it back to official components
- Add support for Normal and Medium (default) font weights to Label
Rename Paragraph/Regular to Paragraph/Normal (across every size)
Bugfix: corrected an issue with Field (Vertical) where properties were not named correctly
Adjust inconsistent spacing of checkbox group between label and checkbox
Adjust Backdrop (OC) to be lighter and contain a background blur effect, similar to dialogs in the shadcn docs
Add Small size to Menu Item
Adjust border radii to be much more in line with shadcn’s global CSS defaults.
- Add option to our Obra shadcn/ui design to CSS plugin to infer border radii from single spacing value and keep shadcn’s calculated defaults around.
Bugfix: Fix card foreground variable in dark mode
Bugfix: Fix inverse logic in Tooltip
Added translucent style to Menu
Fix a dark mode bug for radio button and checkbox (related to color of dot and checkmark in dark mode)
Carousel
- Add vertical version of carousel
- Remove Carousel with Image example (as it was removed from shadcn as well)
Pro blocks
- Correct visual issue with borders in App - CRM-Wizard-01
- Correct visual issue with charts in App - CRM-Dashboard-01

1.8.2#

April 14, 2026

Corrected Switch, Radio and Checkbox group to use foreground instead of muted foreground
Referenced the tw-raw variables in shadcn theme colors collection. Notice that we are using the hex fallback (shift click in Tailwind’s color docs); in code we recommend to use oklch versions to cover more of the color gamut. Figma does not support oklch.
Removed dark mode from chart colors by default. It did not serve a purpose anymore, since the styles were the same.
Added docs about what an OC component and a custom component is
Pro blocks
- Add Marketing - Newsletter-01 block
- Add Marketing - Badges-01 block
- Add Application - Sign up-01, Application - Log in classic-01, Application - Log in methods-01

1.8.1#

April 12, 2026

Enhancement: Get rid of dark mode docs by default. We were enamored by our own feature to document variable modes via Obra Autodocs. While cool and useful while designing (and testing) components, it clutters up the docs.
Enhancement: Moved alpha collection into shadcn colors collection to make mode switching easier (dark mode in 1 action, 2 if you need charts)
Bugfix: Corrected default variable colors for primary (they are brand-neutrals/900 for light mode and brand-neutrals/200 for dark mode), and default variable colors for foreground (they are tw-raw/black for light mode and tw-raw/white for dark mode). Thanks Outzvoid on YouTube for your sharp eye.
Enhancement: Update Accordion > Focus to use 15% dark border on top of border variable for focus state. This logic was applied to Outline buttons as well.
Enhancement: Change outline button to use white/switch/alpha-100 for background
Bugfix (visual): Adjust Heading 3 to be Semibold by default to match Heading 1 and Heading 2
Feature: Add primary skin for sidebar badge
Feature: Add primary skin for decorative icon
Feature: Add specific sub component to Avatar: Avatar with (status) badge, avatar with badge icon, avatar count with more button, avatar count with action
Feature: Adjust Aspect Ratio component to shadcn docs style
Adjust alert dialog to use newest shadcn style: support destructive styles, support media element, support 2 sizes
Feature: Pro blocks
- Replaced App - CRM-Sidebar-01 (a dashboard style design) with App - CRM-Dashboard-01 (a better looking dashboard style design)

1.8.0#

April 10, 2026

We released the Obra shadcn/ui Pro CSS Export plugin. The community link will work online once Figma finishes reviewing the listing. In the meantime, see the 1.8.2 release blog post for how to run the plugin locally.
- Obra shadcn/ui Pro CSS Export allows you to get shadcn/ui compatible output to your shadcn-based projects.
- We detect design changes to the variables and output these as a CSS file, ready to copy into your dev project.
Improve slot usage for various components:
- Breadcrumb, Card (3 slots), Chart, Command, Empty, Item, Pagination, Radio, Checkbox, Rich Radio, Rich Checkbox, Rich Switch, Tabs, Drawer, Dialog
Shadcn/ui consistency
- Button: Rename Mini to Extra Small to match shadcn
- Button: Adjusted button side spacing to match tighter spacing in shadcn (Vega style)
- Typography: Adjusted default styling for Caption style from 14px/1.5 letter spacing to 13px/1px letter spacing
- Added Taupe, Mauve, Mist and Olive to Tailwind colors (Added in Tailwind in February and part of shadcn/ui create)
- Added missing Fuchsia color
- Added a note that Gray and Slate where removed from shadcn/ui create (but we do support these still; it’s part of the Tailwind colors)
- Fixed a bug where rich radio, rich switch and rich checkbox were not using the proper variables (based on “primary”)
Icons
- Implemented Lucide 1.0, which includes about +300 more icons than before, but removes brand icons.
- Re-added brand icons, used for social media mostly (via Obra Icons)
- Changed default stroke size of Lucide Icons to 2px (default of Lucide) as opposed to the 1.5px we used earlier.
Removed many unofficial variables. These were added due to taste of the author(s), but were actually in the way when teams start working with the kit, specifically when moving from design to development
- body background removed and layers using it mapped to background. Original intention of this variable was to provide a difference between “background” (general) and “body background” (only used for the root frame/body element in code)
- accent 0, accent 2, accent 3 - removed and mapped to accent. Original intent was to have more ways to layer darkness levels on top of each other, which is now solved with alpha.
- border 0, border 1, border 3, border 4, border 5 removed and layers using these mapped to border. Original intent was to have more ways to layer darkness levels on top of each other, which is now solved with alpha.
- foreground alt removed and mapped to foreground muted. Original intent was to have a darkness in between the black (like #000) and muted foreground (like #666) layers. As a designer, I’ve always leaned on a #333-ish value between. But shadcn/ui doesn’t work this way, so we removed it. A tear in my eye for this one, because it IS a good design practice. It’s just that the point of the kit is to provide defaults as close as possible to shadcn/ui.
- destructive text, destructive subtle, destructive border removed and mapped to destructive. This is a tough one. We now use one variable for destructive for everything, just like shadcn/ui does. Makes it easy to change the tone of destructive in one go. Does make it harder to maintain differences in the long run.
- sidebar muted: mapped to foreground muted
- mid alt: removed, replaced by alpha logic.
- obra shadcn ui docs 1, obra shadcn ui docs 2: removed and mapped to background
- Removed unofficial chart vars — Removed unofficial/categorical, unofficial/sentiment, and unofficial/shades from chart colors collection. Chart colors now use chart 1-5 variables that references the unpublished shadcn theme collection. Area chart fills use layer opacity (0.4) to match shadcn code (fillOpacity=0.4).
- Removed all unofficial hover/state variables (primary hover, secondary hover, ghost, ghost hover, outline, outline hover, outline active, ghost foreground)
  - Hover states now use base color + layer opacity (matching hover:bg-primary/90, hover:bg-secondary/80)
  - Ghost/outline defaults use alpha/white/alpha-001 (transparent but shadow-compatible - Figma requires a fill to render a shadow)
  - Ghost/outline hovers use alpha/black/alpha-5 (auto-flips to white in dark mode)
  - Migrated: Button, Icon Button, Loading Button, Button Group, Toggle & Toggle Group, Badge, Link Button
- Meaning of accent has changed. In general we were using accent for muted states. The meaning of accent is like the name says, to accent specific things. Usually a brighter color, but muted by default.
- Input variable: meaning changed. We wrongly used it for input backgrounds (assuming shadcn’s own convention of omitting “background” was followed here). Rather, this is an exception to the rule, and input actually maps to the border of inputs. For input backgrounds, we are now using the regular “background” token. We do our best to match shadcn, but sometimes, shadcn logic is impossible to replicate in Figma, as it for example sometimes uses 2 different variables across light and dark mode.
Adjustments to how alpha works to be closer to how shadcn/ui works in development
- Added shadcn-dark mode to alpha collection
- Added alpha layers in “switch” and “no switch” variants
- Within alpha, added missing values alpha-85, alpha-75 and alpha-25 for both black and white
- Adjusted badge, icon button and button destructive states to use a combination of alpha and destructive (2 fills layered on top of each other) to simulate opacity. Figma people, if you’re reading this, please give us opacity in variables! Having to do workarounds like this is very annoying.
- Tied general background to white for light mode and neutral-950 for dark mode instead of alpha channel colors
- Added documentation for alpha colors in the file itself and on the website
Scope borders to Frame, Shape and Stroke. While the original intent to scope borders only to Stroke was well-intentioned, design systems often document colors in swatches. Borders are sometimes rendered as 1px rectangles or frames. Limiting scope is annoying in this case.
Pro blocks
- Improved Table-01 pro block vastly: using specific list on mobile design
- Improved App - CRM-Sidebar-02 (Desktop) vastly, using correct pagination component, improved Mobile Toolbar (OC) component
- All mobile blocks now use more proper mobile menu example
OC components
- Streamlined Decorative Icon to not show any color opinions, that’s up to the kit customizer
- Streamlined Todo marker to not use Green/500 but rather the Primary token
- Streamlined Inline Message to not show success state, since that is a project opinion and hid a design opinion (using green/500).
Improve field validation patterns
- Update Label component to show error state, as well as an asterisk to mark required fields, and mark it as OC (Obra Customized), as this is non-standard shadcn behavior. We feels this is something every project eventually needs, which is why we are adding it to the main kit.
- Update field component to show inline message and error state
Bug fixes
- Fixed a bug when combining an Input in the Empty state with a left or right icon
- Fix missing Chevron Down and Chevron Right Item in Sidebar Item / Expanded / 1st Level.

1.7.0#

March 11, 2026

We’ve switched to a commercial model. If you are reading this, you are one of the first buyers of our kit. Thanks for your support 🙌.
As a purchaser of this kit, find a team-wide license key to Obra Autodocs in your welcome e-mail.
The following components have been updated to use Figma Slots: Card, Drawer, Dialog, Hover Card, Sheet, Empty.
We will look at and evaluate opportunities to use slots in other components for more atomic uses (i.e. “left icon”) but have to evaluate this first.
Added Pro Blocks section. Within the Pro blocks section, find copy-pasteable shadcn/ui examples across 3 categories: marketing, e-commerce websites, and apps.
Added 8 different components marked (OC) — where OC stands for Obra Custom, as they are not part of shadcn/ui officially — that help serve as a basis for our Pro blocks.
Fixed a bug in shadows where shadow-xs-2 and shadow-xs had the wrong black alpha value applied.