Component Library
Browse all available UI components organized by atomic design level. Each component uses theme tokens and supports i18n.
AppleIcon
atoms/AppleIcon.astro Reusable Apple logo SVG atom
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
Badge
atoms/Badge.astro Small label atom for tags, versions, and status indicators
BlurFade
atoms/BlurFade.astro Elements fade in from a blurred state when scrolled into view
BorderBeam
atoms/BorderBeam.astro Animated beam of light tracing an element border
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
FeatureIcon
atoms/FeatureIcon.astro Animated Lordicon icon atom for the features grid
GlowEffect
atoms/GlowEffect.astro Pulsing concentric radial-gradient glow behind slotted content
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
HeroAppleLogo
atoms/HeroAppleLogo.astro Inline Apple logo SVG atom for the hero heading
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
NumberTicker
atoms/NumberTicker.astro Animated number that counts up from 0 to a target value
Particles
atoms/Particles.astro Canvas-based floating particle background effect
ProgressBar
atoms/ProgressBar.astro Determinate horizontal progress indicator with optional label
Radio
atoms/Radio.astro Themed radio button atom with label support and animated dot indicator
RssLink
atoms/RssLink.astro RSS feed link atom with an icon and label
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
Skeleton
atoms/Skeleton.astro Animated placeholder for loading states with a shimmer sweep effect
Spotlight
atoms/Spotlight.astro Cursor-following radial gradient that illuminates content on hover
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
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
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
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
Accordion
molecules/Accordion.astro Expandable content sections with smooth height animation
Alert
molecules/Alert.astro Status message banner with variant-specific accent colors
BlogCard
molecules/BlogCard.astro Molecule for displaying a blog post preview in the list
Featured
Introducing Landing v1.6
A showcase of what a blog card looks like with sample data.
Default
Card
molecules/Card.astro Generic content card with multiple visual variants
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
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
Modal
molecules/Modal.astro Premium dialog overlay with cinematic open/close animations
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.
Content for Develop tab.
Content for Deploy tab.
TiltCard
molecules/TiltCard.astro A 3D card that follows the cursor with tilt, glare, and shadow depth effects
WallpaperPreview
molecules/WallpaperPreview.astro Decorative lock screen mockup molecule
ComparisonSection
organisms/ComparisonSection.astro Minimalist feature comparison table
Why choose Landing?
See how Landing compares to the built-in Mac notification experience.
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
Header
organisms/Header.astro Fixed site header organism with logo and nav
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
Used by teams at leading companies
Join thousands of professionals who have upgraded their Mac experience.
PricingSection
organisms/PricingSection.astro Minimalist pricing organism with clean card layout
Simple, transparent pricing
No hidden fees. No surprises. Choose the plan that works for you.
Free
Perfect for trying things out
- Basic notifications
- Standard Dynamic Island
- Community support
- 1 device
Pro
Everything you need for your Mac
- All notification types
- Custom HUDs & widgets
- Live Activities
- Priority support
- Up to 3 devices
- Lifetime updates
Team
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
Growing every day
Landing is trusted by a fast-growing community of Mac users worldwide.
Active Users
App Store Rating
Uptime
Avg. Response Time
TestimonialsSection
organisms/TestimonialsSection.astro Auto-scrolling testimonial cards in a marquee layout
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
SocialIcon
atoms/SocialIcon.astroClickable social media icon atom