Changelog — Pro Edition

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.