Components
Loading preview...
Liquid glass components inspired by apple and figma
@ui-layouts
npx shadcn@latest add https://21st.dev/r/uilayout.contact/liquid-weather-glassimport { LiquidGlassCard } from "@/components/ui/liquid-weather-glass";
import {
Cloud,
CloudSun,
CloudRain,
Sun,
MapPin,
CloudSunRain,
} from 'lucide-react';
export default function DemoOne() {
return <div
className='p-8 w-full gap-8 py-16 rounded-xl'
style={{
background:
'url("https://images.unsplash.com/photo-1590867286251-8e26d9f255c0?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center / cover no-repeat',
}}
>
<div className='grid w-full max-w-xl grid-cols-2 gap-4 mx-auto'>
{/* Hourly Forecast Card */}
<LiquidGlassCard
shadowIntensity='xs'
borderRadius='8px'
glowIntensity='none'
className='col-span-2 p-6 text-white bg-white/8'
>
<div className='flex justify-between text-sm font-medium'>
<div className='flex flex-col items-center gap-2'>
<span>16:00</span>
<Cloud className='h-6 w-6 fill-white' />
<span>+18°</span>
</div>
<div className='flex flex-col items-center gap-2'>
<span>17:00</span>
<Cloud className='h-6 w-6 fill-white' />
<span>+18°</span>
</div>
<div className='flex flex-col items-center gap-2'>
<span>18:00</span>
<CloudRain className='h-6 w-6' />
<span>+16°</span>
</div>
<div className='flex flex-col items-center gap-2'>
<span>19:00</span>
<CloudRain className='h-6 w-6' />
<span>+14°</span>
</div>
<div className='flex flex-col items-center gap-2'>
<span>20:00</span>
<CloudSun className='h-6 w-6 fill-white' />
<span>+15°</span>
</div>
<div className='flex flex-col items-center gap-2'>
<span>21:00</span>
<CloudSunRain className='h-6 w-6' />
<span>+14°</span>
</div>
</div>
</LiquidGlassCard>
{/* Current Weather Card */}
<LiquidGlassCard
shadowIntensity='xs'
borderRadius='8px'
glowIntensity='none'
className='rounded-3xl p-6 text-white bg-white/8 flex flex-col items-start justify-center'
>
<div className='text-6xl font-semibold'>+18°C</div>
<div className='text-lg'>Cloudy +18°/+5°</div>
</LiquidGlassCard>
{/* Time and Location Card */}
<LiquidGlassCard
shadowIntensity='xs'
borderRadius='8px'
glowIntensity='none'
className='rounded-3xl p-6 text-white bg-white/8 flex flex-col items-start justify-center'
>
<div className='text-6xl font-semibold'>17:32</div>
<div className='text-lg'>Sun, November 19</div>
<button className='mt-4 inline-flex items-center gap-1 rounded-full bg-black/10 backdrop-blur-xl px-2 py-1 text-sm font-medium'>
<MapPin className='h-4 w-4' />
Tbilisi
</button>
</LiquidGlassCard>
{/* Daily Forecast Card */}
<LiquidGlassCard
shadowIntensity='xs'
borderRadius='8px'
glowIntensity='none'
className='col-span-2 rounded-3xl bg-white/8 p-6 text-white flex flex-col gap-4'
>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-2'>
<Sun className='h-6 w-6 fill-white' />
<span>Tue, 7 Sep</span>
</div>
<span className='text-lg'>+18°/+4°</span>
</div>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-2'>
<Cloud className='h-6 w-6 fill-white' />
<span>Wed, 8 Sep</span>
</div>
<span className='text-lg'>+20°/+6°</span>
</div>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-2'>
<CloudRain className='h-6 w-6' />
<span>Thu, 9 Sep</span>
</div>
<span className='text-lg'>+17°/+3°</span>
</div>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-2'>
<Sun className='h-6 w-6 fill-white' />
<span>Fri, 10 Sep</span>
</div>
<span className='text-lg'>+22°/+10°</span>
</div>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-2'>
<CloudRain className='h-6 w-6' />
<span>Sat, 11 Sep</span>
</div>
<span className='text-lg'>+16°/+5°</span>
</div>
</LiquidGlassCard>
</div>
</div>;
}