Astryx Calendar

Forms

About

An Astryx month-grid calendar for selecting a single date with surrounding dates visible for context.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Calendar to your project and fits it to your theme.

Code

How Astryx Calendar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {useState} from 'react';
import {Calendar} from '@/components/ui/astryx-calendar';
import type {ISODateString} from '@/components/ui/astryx-calendar';

export default function CalendarShowcase() {
  const [value, setValue] = useState<ISODateString | undefined>('2026-04-15');

  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <Calendar mode="single" value={value} onChange={setValue} />
    </div>
  );
}