Ir al contenido principal

Biblioteca de componentes

Explora todos los componentes de UI disponibles organizados por nivel de diseno atomico. Cada componente usa tokens de tema y soporta i18n.

Tema
Atomos 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

Variantes

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

Moleculas 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 de lectura

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

Organismos 11

ComparisonSection

organisms/ComparisonSection.astro

Minimalist feature comparison table

Comparacion

Por que elegir Landing?

Mira como Landing se compara con la experiencia de notificaciones predeterminada de Mac.

Caracteristica
Landing
macOS por defecto
Dynamic Island
Actividades en vivo
HUDs personalizados
Gestos deslizantes
Widgets de pantalla de bloqueo
Rendimiento nativo
Animaciones fluidas
Estilos personalizables

CTABannerSection

organisms/CTABannerSection.astro

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

Listo para transformar tu Mac?

Descarga Landing gratis y experimenta el Dynamic Island en tu Mac. Sin tarjeta de credito.

FeaturesGrid

organisms/FeaturesGrid.astro

Organism displaying a grid of animated feature cards

Funciones

Transiciones fluidas

Notificaciones instantaneas

Actividades en vivo

Gestos deslizantes

Lleno de sorpresas

HUDs personalizables

Widgets de pantalla de bloqueo

App nativa ultrarapida

HeroSection

organisms/HeroSection.astro

Primary landing organism with headline, CTA buttons,

Dynamic Island
para   Mac

LogoCloudSection

organisms/LogoCloudSection.astro

Cinematic scrolling logo cloud with dual-row marquee

Confiado por

Usado por equipos en empresas lideres

Unete a miles de profesionales que han mejorado su experiencia Mac.

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

Precios

Precios simples y transparentes

Sin cargos ocultos. Sin sorpresas. Elige el plan que mejor te funcione.

Gratis

$0 /siempre

Perfecto para probar

  • Notificaciones basicas
  • Dynamic Island estandar
  • Soporte comunitario
  • 1 dispositivo

Equipo

$49.99 /unico pago

Para equipos y organizaciones

  • Todo lo de Pro
  • Licencias por volumen
  • 10+ dispositivos
  • Soporte dedicado
  • Despliegue personalizado
  • Panel de administracion

StatsSection

organisms/StatsSection.astro

Animated statistics organism with NumberTicker counters

En numeros

Creciendo cada dia

Landing es confiado por una comunidad de usuarios de Mac en rapido crecimiento en todo el mundo.

0+

Usuarios activos

0

Calificacion App Store

0%

Tiempo activo

0ms

Tiempo de respuesta prom.

TestimonialsSection

organisms/TestimonialsSection.astro

Auto-scrolling testimonial cards in a marquee layout

Testimonios

Amado por usuarios de Mac en todas partes

Mira lo que la gente dice sobre su experiencia con Landing.

Landing transformo completamente como interactuo con mi Mac. El Dynamic Island se siente como si siempre hubiera estado ahi.

Sarah Chen

Disenadora de producto, Figma

Como desarrollador, aprecio el rendimiento. Menos del 0.5% de uso de CPU y hace mi flujo de trabajo mucho mas fluido.

Marcus Rodriguez

Ingeniero Senior, Vercel

La atencion al detalle es increible. Cada animacion, cada interaccion — todo se siente nativo y pulido.

Emily Park

Directora Creativa, Linear

Landing transformo completamente como interactuo con mi Mac. El Dynamic Island se siente como si siempre hubiera estado ahi.

Sarah Chen

Disenadora de producto, Figma

Como desarrollador, aprecio el rendimiento. Menos del 0.5% de uso de CPU y hace mi flujo de trabajo mucho mas fluido.

Marcus Rodriguez

Ingeniero Senior, Vercel

La atencion al detalle es increible. Cada animacion, cada interaccion — todo se siente nativo y pulido.

Emily Park

Directora Creativa, Linear

Lo compre el primer dia y no he mirado atras. La funcion de actividades en vivo por si sola vale la pena.

James O'Brien

Escritor Freelance, Independiente

Finalmente, un Dynamic Island para Mac que realmente funciona. Los HUDs personalizables son un cambio total.

Aisha Patel

Desarrolladora iOS, Apple

Hermoso, rapido y discreto. Asi es como las notificaciones deberian funcionar en cada plataforma.

Thomas Weber

Investigador UX, Stripe

Lo compre el primer dia y no he mirado atras. La funcion de actividades en vivo por si sola vale la pena.

James O'Brien

Escritor Freelance, Independiente

Finalmente, un Dynamic Island para Mac que realmente funciona. Los HUDs personalizables son un cambio total.

Aisha Patel

Desarrolladora iOS, Apple

Hermoso, rapido y discreto. Asi es como las notificaciones deberian funcionar en cada plataforma.

Thomas Weber

Investigador UX, Stripe