Skip to main content

Component Library

Browse all available UI components organized by atomic design level. Each component uses theme tokens and supports i18n.

Theme
Atoms 43

AppleIcon

atoms/AppleIcon.astro

Reusable Apple logo SVG atom

h-6
h-8
h-12

AuroraBackground

atoms/AuroraBackground.astro

Animated aurora borealis glow with drifting gradient blobs

Avatar

atoms/Avatar.astro

Circular user avatar with image, initials fallback, and optional status indicator

JD

Badge

atoms/Badge.astro

Small label atom for tags, versions, and status indicators

Default Blue Warm

BlurFade

atoms/BlurFade.astro

Elements fade in from a blurred state when scrolled into view

This text fades in with blur

BorderBeam

atoms/BorderBeam.astro

Animated beam of light tracing an element border

Border Beam Demo

Button

atoms/Button.astro

Primary interactive atom supporting link and button semantics

Variants

Sizes

Checkbox

atoms/Checkbox.astro

Themed checkbox atom with label support and animated check indicator

CubeFlipIcon

atoms/CubeFlipIcon.astro

Reusable 3D cube-rotate icon swap atom

Divider

atoms/Divider.astro

Horizontal or vertical separator with optional label text

DynamicPreview

atoms/DynamicPreview.astro

Renders a component dynamically from a module reference

FaqIcon

atoms/FaqIcon.astro

Animated plus/cross icon for FAQ accordion toggle

Closed
Open

FeatureIcon

atoms/FeatureIcon.astro

Animated Lordicon icon atom for the features grid

GlowEffect

atoms/GlowEffect.astro

Pulsing concentric radial-gradient glow behind slotted content

Glowing

GridPattern

atoms/GridPattern.astro

SVG-based tiling grid or dot pattern background

Heading

atoms/Heading.astro

Semantic heading atom with consistent typography scale

Heading 1

Heading 2

Heading 3

Heading 4

Input

atoms/Input.astro

Form text input atom with label, helper text, and error state support

Kbd

atoms/Kbd.astro

Keyboard key indicator styled to resemble a physical keycap

Ctrl + C

MagneticButton

atoms/MagneticButton.astro

An element that moves toward the cursor when hovering, creating a magnetic pull effect

Hover me

NumberTicker

atoms/NumberTicker.astro

Animated number that counts up from 0 to a target value

0

Particles

atoms/Particles.astro

Canvas-based floating particle background effect

ProgressBar

atoms/ProgressBar.astro

Determinate horizontal progress indicator with optional label

65%

Radio

atoms/Radio.astro

Themed radio button atom with label support and animated dot indicator

RippleButton

atoms/RippleButton.astro

Button with material-design-style ripple effect on click

ScrollProgress

atoms/ScrollProgress.astro

A thin progress bar indicating page scroll position

Select

atoms/Select.astro

Dropdown select atom with label, helper text, and error state support

ShineBorder

atoms/ShineBorder.astro

Animated shining border effect using a rotating conic-gradient

Premium animated border

Skeleton

atoms/Skeleton.astro

Animated placeholder for loading states with a shimmer sweep effect

SocialIcon

atoms/SocialIcon.astro

Clickable social media icon atom

Spotlight

atoms/Spotlight.astro

Cursor-following radial gradient that illuminates content on hover

Move your cursor here

Text

atoms/Text.astro

Paragraph atom with variant and size options

Large bold text

Default base text.

Muted base text for secondary content.

Small muted text for captions.

Textarea

atoms/Textarea.astro

Multi-line text input atom with label, helper text, and error state support

TextGenerate

atoms/TextGenerate.astro

Text that appears word by word with a fade-up animation effect

This  text  generates  word  by  word

TextScramble

atoms/TextScramble.astro

Text that scrambles through random characters before resolving to the final string

           

TextShimmer

atoms/TextShimmer.astro

Text with an animated shimmer/shine sweep effect

Shimmer Text

Toggle

atoms/Toggle.astro

Themed toggle/switch atom with label support and smooth slide animation

Tooltip

atoms/Tooltip.astro

Contextual hint that appears on hover/focus via CSS-only positioning

Hover me

TypeWriter

atoms/TypeWriter.astro

Typewriter effect that types text character by character with a blinking cursor

|

Watermark

atoms/Watermark.astro

Decorative gradient-text watermark atom

Molecules 18

Accordion

molecules/Accordion.astro

Expandable content sections with smooth height animation

A fully accessible accordion with smooth CSS grid animations and rotating chevron indicators.
It uses grid-template-rows transitioning from 0fr to 1fr, which allows natural height animation without JavaScript measurements.
Yes. It uses proper ARIA attributes, button triggers, and keyboard navigation support.

Alert

molecules/Alert.astro

Status message banner with variant-specific accent colors

This is an informational alert message. It can be dismissed by clicking the close button.

BlogCard

molecules/BlogCard.astro

Molecule for displaying a blog post preview in the list

Featured

Default

guide ·2 min read

Getting Started

Quick start guide for Landing on macOS.

Card

molecules/Card.astro

Generic content card with multiple visual variants

<strong style="font-size:1.125rem;">Card Title</strong><p style="margin-top:0.5rem;opacity:0.7;">This is an elevated, hoverable card with large padding. Hover to see the lift effect.</p>

Confetti

molecules/Confetti.astro

Canvas-based celebration burst with physics simulation

Drawer

molecules/Drawer.astro

Premium slide-in panel with cinematic entrance and accent details

Settings

<p style="margin:0;opacity:0.7">Adjust your preferences and customize the experience to your liking.</p>

FaqItem

molecules/FaqItem.astro

Accordion item molecule for FAQ pages

What is this component?

An accordion item with smooth grid-row animation for FAQ pages.

FeatureCard

molecules/FeatureCard.astro

Molecule combining a FeatureIcon with a title

Lightning Fast

HeroCTA

molecules/HeroCTA.astro

Hero call-to-action molecule with download and purchase buttons

Marquee

molecules/Marquee.astro

Infinite horizontal scrolling content band with a premium feel

NewsletterCTA

molecules/NewsletterCTA.astro

Email newsletter signup form for blog pages

TableOfContents

molecules/TableOfContents.astro

Renders h2/h3 headings as a nested list with anchor links

Tabs

molecules/Tabs.astro

Premium tabbed content switcher with floating pill indicator

Content for Design tab.

TiltCard

molecules/TiltCard.astro

A 3D card that follows the cursor with tilt, glare, and shadow depth effects

Hover me

WallpaperPreview

molecules/WallpaperPreview.astro

Decorative lock screen mockup molecule

Organisms 11

ComparisonSection

organisms/ComparisonSection.astro

Minimalist feature comparison table

Comparison

Why choose Landing?

See how Landing compares to the built-in Mac notification experience.

Feature
Landing
Default macOS
Dynamic Island
Live Activities
Custom HUDs
Swipe Gestures
Lock Screen Widgets
Native Performance
Fluid Animations
Customizable Styles

CTABannerSection

organisms/CTABannerSection.astro

Full-width call-to-action banner with gradient background,

Ready to transform your Mac?

Download Landing for free and experience the Dynamic Island on your Mac. No credit card required.

FeaturesGrid

organisms/FeaturesGrid.astro

Organism displaying a grid of animated feature cards

Features

Fluid transitions

Instant Notifications

Live Activities

Swipe gestures

Packed with surprises

Customizable HUDs

Lock Screen Widgets

Blazing fast native app

HeroSection

organisms/HeroSection.astro

Primary landing organism with headline, CTA buttons,

Dynamic Island
for   Mac

LogoCloudSection

organisms/LogoCloudSection.astro

Cinematic scrolling logo cloud with dual-row marquee

Trusted By

Used by teams at leading companies

Join thousands of professionals who have upgraded their Mac experience.

Apple
Google
Meta
Vercel
Linear
Apple
Google
Meta
Vercel
Linear
Apple
Google
Meta
Vercel
Linear
Stripe
Figma
Notion
Slack
GitHub
Stripe
Figma
Notion
Slack
GitHub
Stripe
Figma
Notion
Slack
GitHub

PricingSection

organisms/PricingSection.astro

Minimalist pricing organism with clean card layout

Pricing

Simple, transparent pricing

No hidden fees. No surprises. Choose the plan that works for you.

Free

$0 /forever

Perfect for trying things out

  • Basic notifications
  • Standard Dynamic Island
  • Community support
  • 1 device

Team

$49.99 /one-time

For teams and organizations

  • Everything in Pro
  • Volume licensing
  • 10+ devices
  • Dedicated support
  • Custom deployment
  • Admin dashboard

StatsSection

organisms/StatsSection.astro

Animated statistics organism with NumberTicker counters

By the Numbers

Growing every day

Landing is trusted by a fast-growing community of Mac users worldwide.

0+

Active Users

0

App Store Rating

0%

Uptime

0ms

Avg. Response Time

TestimonialsSection

organisms/TestimonialsSection.astro

Auto-scrolling testimonial cards in a marquee layout

Testimonials

Loved by Mac users everywhere

See what people are saying about their experience with Landing.

Landing completely transformed how I interact with my Mac. The Dynamic Island feels like it should have always been there.

Sarah Chen

Product Designer, Figma

As a developer, I appreciate the performance. Less than 0.5% CPU usage and it makes my workflow so much smoother.

Marcus Rodriguez

Senior Engineer, Vercel

The attention to detail is incredible. Every animation, every interaction — it all feels native and polished.

Emily Park

Creative Director, Linear

Landing completely transformed how I interact with my Mac. The Dynamic Island feels like it should have always been there.

Sarah Chen

Product Designer, Figma

As a developer, I appreciate the performance. Less than 0.5% CPU usage and it makes my workflow so much smoother.

Marcus Rodriguez

Senior Engineer, Vercel

The attention to detail is incredible. Every animation, every interaction — it all feels native and polished.

Emily Park

Creative Director, Linear

I bought this on day one and haven't looked back. The live activities feature alone is worth it.

James O'Brien

Freelance Writer, Independent

Finally, a Dynamic Island for Mac that actually works. The customizable HUDs are a game changer.

Aisha Patel

iOS Developer, Apple

Beautiful, fast, and unobtrusive. This is how notifications should work on every platform.

Thomas Weber

UX Researcher, Stripe

I bought this on day one and haven't looked back. The live activities feature alone is worth it.

James O'Brien

Freelance Writer, Independent

Finally, a Dynamic Island for Mac that actually works. The customizable HUDs are a game changer.

Aisha Patel

iOS Developer, Apple

Beautiful, fast, and unobtrusive. This is how notifications should work on every platform.

Thomas Weber

UX Researcher, Stripe