Navigation · Arise UI

Navbar

Top bar with brand, primary links and account actions. The underline follows your pointer and settles back on the current page.

Underline: shared layout
snappy spring
Link color 150ms

import { Navbar } from "@/components/ui/navbar";

Mobile menu

Hamburger that morphs into a close icon and opens links in a panel over the page.

Arise UI

Icon morph 300ms ease-out
Panel in 200ms ease-out, out 150ms ease-in
Links stagger 40ms

import { MobileMenu } from "@/components/ui/mobile-menu";

Sidebar

App navigation that collapses to an icon rail. The current page gets a marker on the right border; when collapsed, hovering an icon shows its name.

Width 300ms ease-in-out
Labels out 100ms, in 200ms
Active highlight + border: spring

import { Sidebar } from "@/components/ui/sidebar";

Tabs

Switch between views of the same item. Use ←/→ to move between tabs.

Riverside Apartments · 24 units, 22 occupied. Next inspection on 25 Oct.

Indicator: shared layout spring
Panel fade + 6px rise 200ms

import { Tabs } from "@/components/ui/tabs";

Segmented control

A compact switch between two to five related views or filters.

Thumb: shared layout
snappy spring

import {
  ScrollRuler,
  type ScrollRulerSection,
} from "@/components/ui/scroll-ruler";
import { SegmentedControl } from "@/components/ui/segmented-control";

Breadcrumbs

Shows where a page sits in the hierarchy, with links back up.

Enter stagger 50ms
Hover underline 200ms

import { Breadcrumbs } from "@/components/ui/breadcrumbs";

Pagination

Moves through long lists one page at a time, with gaps for long ranges.

Active pill: shared layout spring

import { Pagination } from "@/components/ui/pagination";

Stepper

Progress through a multi-step flow such as listing a property.

Property(completed)
2Units
3Pricing
4Review

Connector fill 300ms ease-in-out
Check pop: bouncy spring
Current ring 200ms

import { Stepper } from "@/components/ui/stepper";

Dropdown menu

A short list of actions attached to a button. ↑/↓ to move, Escape to close.

Open: scale 0.96→1 + fade 200ms ease-out
Items stagger 25ms
Close 150ms ease-in

import { DropdownMenu } from "@/components/ui/dropdown-menu";

Bottom nav

Thumb-reachable navigation for mobile web apps. The active tab expands to show its label.

Pill: shared layout spring
Label width 300ms
Icon pop

import { BottomNav } from "@/components/ui/bottom-nav";

Command palette

Keyboard-first search for pages and actions. This site's search uses it too: press ⌘K or Ctrl+K.

Backdrop fade 200ms
Panel scale 0.96→1 + 8px drop
Highlight slide 100ms

import { CommandPalette, useCommandShortcut } from "@/components/ui/command-palette";

Back to top

Appears after scrolling down a long page. Scroll inside the box.

End of page.

Appear: fade + 12px rise 200ms ease-out
Smooth scroll

import { BackToTop } from "@/components/ui/back-to-top";

Scroll ruler

A ruler on the right edge maps the whole page. Section titles ride it and turn the corner, letter by letter, into the heading when their section reaches the top. Scroll inside the box, or hover, click and drag the ruler.

01 / Overview

Every flat, lease and rupee in one vault. Scroll this page and watch the titles on the right.

02 / Properties

Buildings, units and their documents, with occupancy at a glance.

03 / Tenants

Leases, KYC and contact details, plus reminders before renewals come due.

04 / Payments

Rent, deposits and maintenance, reconciled against UPI and bank transfers.

05 / Get started

Add your first property and invite a tenant. It takes about five minutes.

Tied to scroll
Letters turn a quarter-circle corner
Ticks grow near pointer 100ms
Reduced motion: titles switch in one step

import { ScrollRuler } from "@/components/ui/scroll-ruler";