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 53

AnnotationHighlight

atoms/AnnotationHighlight.astro

Inline `<mark>` atom for annotated text fragments

AppleIcon

atoms/AppleIcon.astro

Reusable Apple logo SVG atom

h-6
h-8
h-12

ArticleNavArrow

atoms/ArticleNavArrow.astro

Navigation arrow atom for prev/next article links

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

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

ExamFrequencyIndicator

atoms/ExamFrequencyIndicator.astro

Visual indicator showing how often an article

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

FireIcon

atoms/FireIcon.astro

SVG flame icon atom for streak displays

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

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%

QuizOptionButton

atoms/QuizOptionButton.astro

Interactive option button atom for quiz questions

QuizProgressBar

atoms/QuizProgressBar.astro

Progress indicator atom for quiz sessions

Pregunta 3 de 10 2/2

QuizTimer

atoms/QuizTimer.astro

Countdown timer atom for exam mode

30:00

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

SpeedSelector

atoms/SpeedSelector.astro

Dropdown button to select playback speed

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

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

|

VolumeControl

atoms/VolumeControl.astro

Volume slider with mute toggle button

Watermark

atoms/Watermark.astro

Decorative gradient-text watermark atom

Molecules 51

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.

AnnotationLegend

molecules/AnnotationLegend.astro

Small legend/key showing what each annotation color means

AnnotationPanel

molecules/AnnotationPanel.astro

Contextual annotation card shown when a highlight is clicked

ArticleListItem

molecules/ArticleListItem.astro

A list item molecule for article listings

ArticleSidebarCard

molecules/ArticleSidebarCard.astro

Compact sidebar card showing article metadata:

BadgeCard

molecules/BadgeCard.astro

Displays a single badge, earned (full color) or locked (gray + lock icon)

primer_episodio

BadgeNotification

molecules/BadgeNotification.astro

Toast container for newly earned badge notifications

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.

BlogCTA

molecules/BlogCTA.astro

Randomly alternates between two conversion paths:

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>

CompletionCelebration

molecules/CompletionCelebration.astro

Toast notification shown when an episode reaches 100% completion

Confetti

molecules/Confetti.astro

Canvas-based celebration burst with physics simulation

ContactPopup

molecules/ContactPopup.astro

WhatsApp contact widget with always-visible icon button

CopyArticle

molecules/CopyArticle.astro

Split button to copy/share article content

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>

EpisodeNotes

molecules/EpisodeNotes.astro

Textarea with debounced autosave for episode-specific notes

EpisodeProgressCard

molecules/EpisodeProgressCard.astro

Card showing episode info with progress bar and optional favorite toggle

4
Estado social 18 min

ExpandedPlayer

molecules/ExpandedPlayer.astro

Full-screen overlay audio player, Spotify-inspired

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

Flashcard

molecules/Flashcard.astro

Interactive card molecule with flip animation

Art.

Sample question

Toca para ver la respuesta
Art.
Respuesta correcta

Sample answer

Sample explanation

Toca para volver

FlashcardResumeRow

molecules/FlashcardResumeRow.astro

Flashcard session resume row for PersistentBottomBar

FormFeedback

molecules/FormFeedback.astro

Displays form submission feedback (success/error/idle)

GiftCard

molecules/GiftCard.astro

Premium 3D CSS gift card molecule with mouse-tracking tilt

Red Opositor Vale regalo
75 episodios La Constitución Española en podcast
Acceso de por vida Actualizaciones incluidas
47,95
REDO-XXXX-XXXX

HeroCTA

molecules/HeroCTA.astro

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

LeadMagnetInlineCTA

molecules/LeadMagnetInlineCTA.astro

Compact inline CTA molecule for blog posts

LoginForm

molecules/LoginForm.astro

Authentication form molecule with email/password and magic link tabs

Marquee

molecules/Marquee.astro

Infinite horizontal scrolling content band with a premium feel

MiniPlayerRow

molecules/MiniPlayerRow.astro

Inline mini audio player content row (no fixed positioning, no backdrop)

NewsletterCTA

molecules/NewsletterCTA.astro

Email newsletter signup form for blog pages

PlaybackQueue

molecules/PlaybackQueue.astro

Side panel showing the upcoming episode queue

PodcastPlayer

molecules/PodcastPlayer.astro

Interactive audio player molecule for the hero section

ProgressRing

molecules/ProgressRing.astro

Circular SVG progress indicator

65%

QuizQuestionCard

molecules/QuizQuestionCard.astro

Displays a single quiz question with options

QuizResultsSummary

molecules/QuizResultsSummary.astro

Displays final quiz results with score and breakdown

QuizResumeRow

molecules/QuizResumeRow.astro

Quiz session resume row for PersistentBottomBar

StickyMobileCTA

molecules/StickyMobileCTA.astro

Fixed bottom CTA bar for mobile devices

StreakCounter

molecules/StreakCounter.astro

Displays the current study streak with fire icon

12 días de racha

StudyCalendar

molecules/StudyCalendar.astro

GitHub-style contribution graph showing study activity

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

WallpaperPreview

molecules/WallpaperPreview.astro

Decorative lock screen mockup molecule

Organisms 38

AnnotatedArticleBody

organisms/AnnotatedArticleBody.astro

Core organism that renders an article's apartados

AppBottomNav

organisms/AppBottomNav.astro

Mobile bottom navigation for the authenticated app

AppSidebar

organisms/AppSidebar.astro

Desktop sidebar navigation for authenticated app

ArticleContextSidebar

organisms/ArticleContextSidebar.astro

Sticky sidebar organism for article pages

ArticleFAQSection

organisms/ArticleFAQSection.astro

FAQ accordion organism for article pages

ArticleNavigation

organisms/ArticleNavigation.astro

Prev/next navigation organism between articles

BadgeGrid

organisms/BadgeGrid.astro

Grid of all badges organized by category, showing earned/total per category

ComparisonSection

organisms/ComparisonSection.astro

Minimalist feature comparison table

ConstitutionMobileBar

organisms/ConstitutionMobileBar.astro

Fixed bottom navigation bar for mobile Constitution portal

ConstitutionSidebarNav

organisms/ConstitutionSidebarNav.astro

Lateral sidebar navigation organism for Constitution article pages

ConstitutionTreeSection

organisms/ConstitutionTreeSection.astro

Collapsible tree organism showing the full

CTABannerSection

organisms/CTABannerSection.astro

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

ExamCountdown

organisms/ExamCountdown.astro

Displays days until exam with color-coded urgency

FeaturesGrid

organisms/FeaturesGrid.astro

Organism displaying a grid of animated feature cards

FlashcardsPlayer

organisms/FlashcardsPlayer.astro

Interactive flashcards player with Leitner SRS

HeroSection

organisms/HeroSection.astro

Primary landing organism with headline, CTA buttons,

HostBioSection

organisms/HostBioSection.astro

Organism showcasing the podcast hosts/creators

LogoCloudSection

organisms/LogoCloudSection.astro

Cinematic scrolling logo cloud with dual-row marquee

MethodologySection

organisms/MethodologySection.astro

Organism displaying 4 science-backed pillars

PersistentBottomBar

organisms/PersistentBottomBar.astro

Unified fixed bottom bar combining audio mini-player

PricingSection

organisms/PricingSection.astro

Minimalist pricing organism with clean card layout

PricingSectionAlt

organisms/PricingSectionAlt.astro

Centered minimal pricing with hero price

ProgressOverview

organisms/ProgressOverview.astro

Grid showing overall episode progress with ring and per-title bars

QuickAccessSection

organisms/QuickAccessSection.astro

Continue listening and next episode quick links

QuizConversionBanner

organisms/QuizConversionBanner.astro

CTA conversion organism linking quiz to podcast

QuizHistorySection

organisms/QuizHistorySection.astro

Displays the user's quiz result history and per-titulo accuracy

QuizHubSection

organisms/QuizHubSection.astro

Main quiz mode selector organism for /test page

QuizPlayerSection

organisms/QuizPlayerSection.astro

Interactive quiz player organism

StatsSection

organisms/StatsSection.astro

Animated statistics organism with NumberTicker counters

StreakSection

organisms/StreakSection.astro

Displays streak counter and study activity calendar

StudyPlanSection

organisms/StudyPlanSection.astro

Shows today's recommended episodes, plan status, and inline config

TemarioSection

organisms/TemarioSection.astro

Organism displaying the full podcast temario as an interactive

TestimonialsSection

organisms/TestimonialsSection.astro

Auto-scrolling testimonial cards in a marquee layout

TituloOverviewSection

organisms/TituloOverviewSection.astro

Overview organism for a single titulo page

WeeklySummary

organisms/WeeklySummary.astro

Card showing weekly progress: minutes listened, episodes completed, streak