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

Placeholder — Component Gallery

Skeleton

Skeleton Effects

EffectsProfile Card
Effects
View DSL Source 
stack(gap="sm")
  text None
  skeleton
  text Pulse
  skeleton(effect="pulse")
  text Sheen
  skeleton(effect="sheen")
Profile Card
View DSL Source 
card
  stack(gap="md")
    row(gap="md" align="center")
      skeleton(effect="sheen" style="width:3rem;height:3rem;border-radius:50%;overflow:hidden;flex-shrink:0")
      stack(gap="xs" style="flex:1")
        skeleton(effect="sheen" style="width:55%")
        skeleton(effect="sheen" style="width:35%")
    stack(gap="sm")
      skeleton(effect="sheen")
      skeleton(effect="sheen" style="width:90%")
      skeleton(effect="sheen" style="width:70%")

Placeholder — Card Skeleton

Media Card
Media Card
View DSL Source 
card
  stack(gap="sm")
    skeleton(effect="sheen" style="height: 140px")
    skeleton(effect="sheen")
    skeleton(effect="sheen" style="width: 70%")
    row(gap="sm")
      skeleton(effect="sheen" style="width: 80px; height: 32px")
      skeleton(effect="sheen" style="width: 80px; height: 32px")
DSL Reference