Skip to content

Components · 16

Data display

Showing records, numbers and media. Numbers count up, lists reflow with layout animation, and media grows from where you clicked.

Card

Neutral surface for grouped content. Interactive cards lift; the chosen card gets a 2px primary border.

Interactive

Lifts with a larger shadow on hover.

Selected

2px primary border marks the choice.

  • Hover lift 300ms ease-out
  • Selected border
import { Card } from "@/components/ui/card";

Avatar

People on a lease or team. The group spreads on hover; the online dot pulses.

JDJSAJSL+3
JDOnline
Jane Doe

Online · Property manager

  • Spread: gentle spring
  • Hover lift −3px
  • Online ping 1s loop
import { Avatar, AvatarGroup } from "@/components/ui/avatar";

Badge

Status labels in semantic colors, always with a dot or text — never color alone. Counters bump when they change.

PaidPendingOverdueNewDraft
3 unread
  • Counter: bouncy spring
  • Hides at zero
import { Badge, CounterBadge } from "@/components/ui/badge";

Tooltip

Short label on hover or keyboard focus, after a brief delay.

  • Delay 250ms
  • Fade + 4px slide 150ms
import { Tooltip } from "@/components/ui/tooltip";

Popover

Richer content attached to an element, such as a tenant summary.

  • Open: scale 0.95→1 snappy spring
  • Close 150ms ease-in
import { Popover } from "@/components/ui/popover";

Accordion

Expandable sections for FAQs or long settings. One opens at a time.

Rent is due on the 1st of each month. A reminder goes out three days before, and a late fee applies after the 5th.

  • Height 300ms ease-out
  • Chevron rotates
  • Text fades in after 80ms
import { Accordion } from "@/components/ui/accordion";

Task list

Finished items strike through, then leave the list.

  • Renew lease for Unit 4B
    Due 1 Dec
  • Collect rent from Jane S.
    5 days overdue
  • Schedule plumbing repair
    Riverside · 2A
  • Send October statements
    All tenants
  • Enter stagger 50ms
  • Strike 300ms
  • Collapse 300ms ease-in-out
import { TaskList } from "@/components/ui/task-list";

Progress ring

Completion toward a goal in a compact circle.

98.4%Collected
72%Leases signed
38%Inspections
  • Arc sweep 700ms ease-out
  • Number counts up
import { ProgressRing } from "@/components/ui/progress-ring";

Stat tile

Headline numbers for dashboards. Values count up and the sparkline draws in when they scroll into view.

Rent collected₹4,82,500+4.2% vs September
Occupancy94%+2 units this month
Overdue payments3−2 since last week
  • Count-up 900ms ease-out
  • Line draws 700ms
  • End dot pops
import { StatTile } from "@/components/ui/stat-tile";

Timeline

A sequence of events; done steps are filled and the next one is ringed.

  1. Lease signed

    1 Oct 2026

    Completed

  2. Security deposit received

    2 Oct 2026

    Completed

  3. Keys handed over

    5 Oct 2026

    Completed

  4. Move-in inspection

    25 Oct 2026 · Scheduled

    Next

  5. First rent due

    1 Nov 2026

    Upcoming
  • Line grows 700ms ease-in-out
  • Items slide in 140ms apart
import { Timeline } from "@/components/ui/timeline";

Carousel

Cycles through featured items. Drag or swipe to move; pauses while you hover.

Riverside Apartments

Pune · 24 units

  • Slide 450ms ease-in-out
  • Active dot stretches: spring
  • Drag with elastic edges
import { Carousel } from "@/components/ui/carousel";

Gallery

Thumbnails that open full size. The photo grows out of the one you clicked. ←/→ browse, Escape closes.

  • Shared element: gentle spring
  • Backdrop fade 300ms
import { Gallery } from "@/components/ui/gallery";

Code block

Formatted code with a copy button; lines highlight on hover.

Icon.tsx
import { HugeiconsIcon } from "@hugeicons/react";import { Mail01Icon } from "@hugeicons/core-free-icons"; // 20px default, 1.5 stroke<HugeiconsIcon icon={Mail01Icon} size={20} strokeWidth={1.5} />
  • Line hover 150ms
  • Copy icon swap: spring
import { CodeBlock } from "@/components/ui/code-block";

Pricing card

Plan pricing with a billing toggle.

Pro

₹999/ month
Billed monthly
  • Up to 50 units
  • Automatic rent reminders
  • Tenant portal and UPI payments
  • Price digits roll 300ms
  • Save badge pops: spring
import { PricingCard } from "@/components/ui/pricing-card";

Empty state

Explains why a view is empty and offers the next step.

No documents yet

Upload lease agreements and ID proofs to keep them in one place.

  • Illustration floats 3.2s loop (CSS)
import { EmptyState } from "@/components/ui/empty-state";