Astra

Glass Surface

Apple-style liquid glass that bends what is behind it, in a rounded panel or any logo shape.

Glass Surface, a Astra component

Use Glass Surface in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/GlassSurface-TS-TW
How to install Astra components

Related components

  • Glass Icons

    Liquid glass icons that bend the color behind them, for app grids, docks and social links.

  • Flex Carousel

    An infinite image row that flows through invisible liquid glass at its edges.

  • Counter

    An odometer-style number whose digits roll to every new value, with currency, separators and locales.