Personal widgets
Small widgets for a personal site: availability badge, local clock with working-hours state, social links, now list, stats, skills and weather.
Code
<LocalClock timeZone="Asia/Riyadh" city="Riyadh" /><StatsWidget stats={[{ label: "Projects", value: 42 }, { label: "Stars", value: 12400, compact: true }]} />Website · beta
Live examples and controls: Personal widgets in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/personal-widgets.jsonSmall, self-contained blocks for a personal site or profile. They are presentational: none of them fetches anything. Pass the data you have.
| Widget | What it shows |
|---|---|
AvailabilityBadge | "Available for work" with a status dot. open, limited, closed. |
LocalClock | The owner's local time, the difference from the visitor's zone, and whether it is working hours there. |
SocialLinks | Links as chips or a list. GitHub shows its official mark; other brands are text. |
NowWidget | What I am doing now: building, reading, learning. |
StatsWidget | A few numbers (years, projects, stars), compact notation optional. |
SkillsWidget | Skills grouped by area with a five-dot level, also in text. |
WeatherWidget | Temperature, condition, high and low, in Celsius or Fahrenheit. |
When to use
- The side column of a profile, a footer, a link-in-bio page.
When not to use
- Live weather or analytics: fetch elsewhere and pass values in.
Import
import { LocalClock, SocialLinks, StatsWidget } from "@fadymondy/nasaq/web";Quick start
<LocalClock timeZone="Asia/Riyadh" city="Riyadh" />
<StatsWidget stats={[{ label: "Projects", value: 42 }, { label: "Stars", value: 12400, compact: true }]} />Anatomy
Each widget is a Card (or a list, for SocialLinks and SkillsWidget) with a data-slot named after it.
API
AvailabilityBadge:status,note?,labels?.LocalClock:timeZone,city?,viewerTimeZone?,workingHours?(default Sunday to Thursday, 9 to 17),now?,labels?. Updates every 15 seconds.SocialLinks:links({ kind, label, href, handle? }),layout?(chipsorlist).NowWidget:items({ label, text, href? }),updated?,title?.StatsWidget:stats({ label, value, suffix?, compact? }),title?.SkillsWidget:skills({ name, group?, level? }),levels?.WeatherWidget:city,temperature(Celsius),condition,high?,low?,unit?.- All take
labels?: Partial<PersonalWidgetLabels>.
Accessibility
- The clock is a
<time>with a text description of the working state. - Skill level is spoken as text, not only dots.
- Weather condition is text; the icon is hidden from assistive tech.
RTL & i18n
English and Arabic strings. Times, temperatures and numbers use Latin digits. Handles are always left to right.
Styling
Tokens only; status colors come from the badge variants.
Do / Don't
- Do pass a real IANA zone.
- Don't add brand icons for networks other than GitHub; the official-marks rule applies.
Related
ProfilePage, Badge, Card.
Lab
Story Components/Brand/Personal Widgets.
Marketing sections
Building blocks for a product page. How it works steps, a feature grid, a closing call to action banner, credit packs, aurora and grid backgrounds, a hero with an app mockup and a scripted AI session that plays back. They sit beside the existing feature story, plan cards and testimonials.
Profile page
A two-column profile page: an identity column (avatar, name, handle, links, one action, bio, widgets) beside about, experience, skills, projects, writing and testimonials. The owner also sees their apps and account details.