> ## Documentation Index
> Fetch the complete documentation index at: https://docs.elementary-data.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stay updated

export const NewsletterSignup = () => {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle');
  const HUBSPOT_PORTAL_ID = '142608385';
  const HUBSPOT_FORM_ID = '4734860b-68fb-4f7f-aada-afb14e61afe7';
  const handleSubmit = async e => {
    e.preventDefault();
    if (!email) return;
    setStatus('loading');
    try {
      const res = await fetch(`https://api.hsforms.com/submissions/v3/integration/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_ID}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          fields: [{
            name: 'email',
            value: email
          }],
          context: {
            pageUri: typeof window !== 'undefined' ? window.location.href : '',
            pageName: 'Elementary Docs - Stay Updated'
          }
        })
      });
      if (res.ok) {
        setStatus('success');
        setEmail('');
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  };
  if (status === 'success') {
    return <div style={{
      padding: '14px 18px',
      borderRadius: '8px',
      backgroundColor: 'var(--tw-prose-pre-bg, #f0fdf4)',
      border: '1px solid #bbf7d0',
      color: '#15803d',
      fontSize: '14px',
      lineHeight: '1.5'
    }}>
        You're in! We'll keep you posted.
      </div>;
  }
  return <>
      <style>{`
        .newsletter-email-input {
          background: #ffffff;
          color: #111827;
          border-color: #e5e7eb;
        }
        .dark .newsletter-email-input,
        html[data-theme="dark"] .newsletter-email-input,
        [data-theme="dark"] .newsletter-email-input {
          background: #1f2937;
          color: #f9fafb;
          border-color: #374151;
        }
        @media (prefers-color-scheme: dark) {
          html:not([data-theme="light"]) .newsletter-email-input {
            background: #1f2937;
            color: #f9fafb;
            border-color: #374151;
          }
        }
      `}</style>
      <form onSubmit={handleSubmit} style={{
    display: 'flex',
    gap: '10px',
    flexWrap: 'wrap'
  }}>
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@company.com" required className="newsletter-email-input" style={{
    flex: '1 1 260px',
    padding: '10px 14px',
    borderRadius: '8px',
    border: '1px solid',
    fontSize: '14px',
    lineHeight: '1.5',
    outline: 'none',
    minWidth: '200px'
  }} />
        <button type="submit" disabled={status === 'loading'} style={{
    padding: '10px 22px',
    borderRadius: '8px',
    border: 'none',
    backgroundColor: '#FF20B8',
    color: '#ffffff',
    fontSize: '14px',
    fontWeight: '500',
    cursor: status === 'loading' ? 'wait' : 'pointer',
    opacity: status === 'loading' ? 0.7 : 1,
    whiteSpace: 'nowrap',
    lineHeight: '1.5',
    transition: 'opacity 0.2s, background-color 0.2s'
  }} onMouseEnter={e => {
    if (status !== 'loading') {
      e.target.style.backgroundColor = '#E01A9F';
    }
  }} onMouseLeave={e => {
    if (status !== 'loading') {
      e.target.style.backgroundColor = '#FF20B8';
    }
  }}>
          {status === 'loading' ? 'Subscribing...' : 'Subscribe'}
        </button>
        {status === 'error' && <p style={{
    width: '100%',
    color: '#dc2626',
    fontSize: '13px',
    margin: '4px 0 0'
  }}>
            Something went wrong — try again or <a href="https://elementary-data.com/community" style={{
    color: '#dc2626',
    textDecoration: 'underline'
  }}>join Slack</a> instead.
          </p>}
      </form>
    </>;
};

Elementary moves fast — stay in the loop on new releases, breaking changes, and tips from the team and community.

## Join the community

<Card title="Join Slack" icon="slack" href="https://elementary-data.com/community" horizontal="true">
  4,000+ data and analytics engineers
</Card>

## Subscribe for updates

Subscribe for release notes, breaking change alerts, and best practices from teams running Elementary at scale.

<NewsletterSignup />

<Tip>
  Take a moment to [star us on GitHub](https://github.com/elementary-data/elementary) — it helps other data teams discover Elementary.
</Tip>