v0.5.0

A new site, glass text, and a playground for every component.

What's new

• Text: type cut from glass, for headlines over a photo or a video.
• A playground: tune the accent, border, radius, density, refraction and springs on an example site and on every component at once, then copy one install line. 22 accents, plus any color you pick.
• A redesigned site, with a Theming page for the tokens, the accent and the glass config.
• Component previews on four renders, each in a light and a dark version that follows the theme.

What's changed

• The glass variants are renamed: default is now regular, blur is now thick, and transparent is now thin, on Pane, Card and Text. The CSS variables were renamed to match. Add your components again to get the new ones.
• If you still have variant="regular" from 0.3, it now means the light glass. Use thick for the frosted one.
• The look slugs use the same names: clear is now thin, default is now regular, and frosted is now thick.
• Fixed the selected Toggle Group item losing its color inside a Tooltip.
• Command keeps its corners even on a round radius.

v0.4.0

Colors, more button styles, and examples on every component page.

What's new

• An accent color for filled controls, with 10 presets on the Theming page. Green is the default.
• New button styles: inverted, ghost and prominent. Add tinted to any colored one for a soft version.
• A transparent Pane variant: fully clear glass with just the edge.
• tinted for the destructive Alert.
• Example sections on every component page, plus Copy page and Open in ChatGPT or Claude.

What's changed

• <Pane> is now clear by default. Add variant="blur" to keep the old look. regular is renamed to blur.
• The CSS variables were renamed to match. Add your components again to get the new ones.
• destructive buttons are now filled red. For the old look, use destructive tinted.
• Toasts now show up at the top center.
• Fixed Alert leaving empty space where an icon would go.

v0.3.0

Eleven new components, including the Sidebar the docs run on.

What's new

• Sidebar, Checkbox, Radio Group, Textarea, Progress, Alert, Avatar, Accordion, Sonner, Command and Navigation Menu.
• A playground at pane.theui.company/playground where you can tune the glass live.
• GlassConfigProvider to change the glass for one part of a page.

What's changed

• Focus rings now show up on glass controls, in light mode too.
• Buttons keep their label centered when they're stretched, like in stacked dialog footers.

v0.2.1

A small fix for projects that use shadcn's Base UI styles.

What's changed

• Fixed the Switch knob sticking to the left edge.
• Fixed a type error in Select.
• Switch now slides with CSS and respects reduced motion.

v0.2.0

Five new components for menus, forms and picking things.

What's new

• Popover, Dropdown Menu, Select, Slider and Toggle Group.
• Pane has a nested prop for glass inside glass, so menus opened from a card keep their look.

What's changed

• Dialog and Sheet are a bit more solid, so their text is easier to read over busy pages.
• The tinted Badge variant is gone for now.
• Fixed the font turning serif after installing Pane into a new Next.js app.

v0.1.0

The first release of Pane: liquid glass components you add to your project with the shadcn CLI.

What's new

• Pane, the glass surface everything else is built on. It bends the light at its edges and catches a highlight that follows your pointer.
• Nine components on top of it: Button, Card, Badge, Input, Switch, Tabs, Tooltip, Dialog and Sheet.
• Light and dark themes, set through --pane-* CSS variables.
• Browsers that can't render the full effect get a simple blur or tint instead.