DocsInstallationComponents
Sections
  • Components
Components
  • AlertBanner
  • AlertDialog
  • Alert
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • CalendarIcon
  • CellLayout
  • CellLink
  • Checkbox
  • Collapse
  • ContentSwitcher
  • ControlLabel
  • DatePicker
  • Dialog
  • Divider
  • Drawer
  • EmptyCell
  • EmptyState
  • Empty
  • ErrorOverlay
  • FilterBar
  • FilterChips
  • Flex
  • GridLayout
  • HumanisedDate
  • Icon
  • InputDuration
  • InputField
  • Input
  • Label
  • Loader
  • MoreActions
  • NumberInput
  • OutsideClickHandler
  • PageLoader
  • Page
  • Popconfirm
  • Popover
  • ProgressPie
  • Progress
  • RadioButtonGroup
  • RadioGroup
  • Radio
  • RelativeTime
  • Resizable
  • SearchInput
  • Select
  • SkeletonText
  • Skeleton
  • Space
  • SquadAvatarList
  • StatusPicker
  • Stepper
  • Switch
  • TableLight
  • Tabs
  • Tag
  • Text
  • Textarea
  • Toast
  • Tooltip
  • TriggerSelect
  • Upload

CalendarIcon

PreviousNext

Calendar glyph with a day number.

import { CalendarIcon } from "@/rl-ui";

<CalendarIcon date="2026-08-27" />

Examples#

Different days#

import { CalendarIcon } from "@/rl-ui";

<>
<CalendarIcon date="2026-08-01" />
<CalendarIcon date="2026-08-15" />
<CalendarIcon date="2026-08-27" />
</>

API#

PropTypeDefaultDescription
datestring | number—Date whose day is shown (required).
ButtonCellLayout

On This Page

ExamplesDifferent daysAPI
Built by shadcn at Vercel. The source code is available on GitHub.