Skip to content
Blog — Component Gallery
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

Blog — Component Gallery

Newsletter

Newsletter
View DSL Source 
card(elevated=true)
  stack(gap="md" align="center")
    icon(name="download" size="2em")
    heading(level="2") Weekly Digest
    text(color="muted") Curated articles on design, development, and product — every Thursday.
    row(gap="sm" justify="center")
      input(label="" placeholder="Enter your email")
      button(variant="primary") Subscribe
    text(color="muted") No spam. Unsubscribe anytime.

Post-footer

Post Footer
View DSL Source 
stack(gap="lg")
  divider
  card
    row(gap="md" align="center")
      placeholder(type="image" label="Author photo" width="60px" height="60px")
      stack(gap="xs")
        text(weight="bold") Jana Müller
        text(color="muted") Senior Editor · 142 articles published
  stack(gap="sm")
    heading(level="2") Continue Reading
    grid(cols="2" gap="md")
      card(elevated=true)
        stack(gap="xs")
          badge(variant="neutral") Tutorial
          text(weight="bold") Getting Started with Layouts
          text(color="muted") 5 min read
      card(elevated=true)
        stack(gap="xs")
          badge(variant="neutral") Case Study
          text(weight="bold") Scaling Your Design System
          text(color="muted") 9 min read

Post-header

Post Header
View DSL Source 
section
  stack(gap="lg")
    stack(gap="sm")
      row(gap="sm")
        badge(variant="neutral") Tutorial
        badge(variant="neutral") Design Systems
      heading(level="1") Building a Component Library from Scratch
      text(color="muted") Published Apr 28, 2026 · 12 min read
    placeholder(type="image" label="Cover image" ratio="16:9")
    row(gap="md" align="center")
      placeholder(type="image" label="Author" width="40px" height="40px")
      stack(gap="xs")
        text(weight="bold") Tom R.
        text(color="muted") Staff Writer

Signup-login

Sign Up & Login
View DSL Source 
card(elevated=true)
  stack(gap="lg" align="center")
    heading(level="2") Welcome Back
    stack(gap="md")
      input(label="Email" type="email" placeholder="you@example.com" required)
      input(label="Password" type="password" required)
      row(justify="between" align="center")
        checkbox Remember me
        button(variant="ghost") Forgot password?
      button(variant="primary" width="full") Sign In
    divider
    button(variant="secondary" width="full" icon="user") Continue with Google
    row(justify="center" gap="xs")
      text No account?
      button(variant="ghost") Create one
DSL Reference