Trending Society

@01orbital

Accordion example: a bordered, expandable FAQ list with item, trigger and animated content panel. Open items take a muted tint, and the caret flips between down and up as a panel expands.

Activity Goal Card

@01orbital

Goal tracker card for fitness and habit dashboards: a large adjustable target with minus and plus buttons and a recharts bar chart where entries that meet the goal fill in the accent above a dashed line. Requires recharts 3.8.0.

Alert

@01orbital

Alert example: an inline status callout with title, description and an optional top-right action. Default and destructive variants; a leading icon moves the text into a second column.

Alert Dialog

@01orbital

Alert dialog example: a modal confirmation with blurred overlay, header, optional media circle, title, description and footer. Action and Cancel render as buttons, and a small size is available.

Arc

@01orbital

Arc ring of light for decorative backgrounds, in three looks: a soft conic fade, an outline with a faint track and bright stroke, and a short traveling highlight. ArcLayer groups positioned arcs; spin is opt-in and stops for reduced motion.

Aspect Ratio

@01orbital

Aspect ratio example: a plain wrapper that holds its children to a width-to-height ratio you set, for images, video and cards. No client JavaScript is needed.

Attachment

@01orbital

Attachment example: a file chip with media, title, description and action slots, in three sizes and horizontal or vertical layout. Upload states show a dashed idle edge and a shimmering progress.

Avatar

@01orbital

Avatar example: a round user picture with image, fallback initials and a corner status badge, in small, default and large sizes. AvatarGroup overlaps faces with a ring and adds a remaining count.

Badge

@01orbital

Badge example: a small pill label in default, secondary, destructive, outline, ghost and link variants. It can render as a link, for statuses, tags and counts.

Banner

@01orbital

Dismissible announcement bar for the top of a page: start and centered variants, a background slot for art, a link that becomes a full-bar tap target on phones, and a dismiss button that hands focus onward.

Bevel Frame

@01orbital

Picture frame for inside a card: small rounded corners with a thin white outline at low opacity inside the edge in dark mode. Give it a height or aspect ratio; it clips what is inside.

Blue Hour Scene

@01orbital

Pre-dawn sunrise landscape background: a sky over a dark horizon with a warm glow line and an optional Venus point. Town mode adds a silhouetted roofline with dim lit windows, textured with soft grain.

Carousel

Install

Live preview

Registry dependencies0

Packages0

Carousel

Install

Live preview

Registry dependencies0

Packages0

Source

More from @01orbital, 121 components

The Signal

Install

Live preview

Registry dependencies0

Packages0

Install

Live preview

Registry dependencies0

Packages0

Source

More from @01orbital121, 121 components

More from @01orbital, 121 components