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, type ISODateString} from '@/components/ui/astryx-calendar';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
function CalendarSingle() {
const [value, setValue] = useState<ISODateString>('2026-01-15');
return (
<Stack direction="vertical" gap={4} hAlign="center">
<Text type="supporting" color="secondary">
{value ? `Selected: ${value}` : 'Pick a date'}
</Text>
<Calendar
mode="single"
value={value}
onChange={val => setValue(val)}
focusDate="2026-01-01"
/>
</Stack>
);
}
export default function CalendarSingleDemo() {
return (
<div
data-astryx-theme="neutral"
data-theme="light"
style={{colorScheme: 'light', display: 'contents'}}>
<CalendarSingle />
</div>
);
}