The hairlines of a framed section, drawn in once.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/frame-rulePlayground
01 · Framed section
Ship in the open
A centred column with hairline sides. Rules run past the edges and meet them with a dot.
Default
01 · Framed section
Ship in the open
A centred column with hairline sides. Rules run past the edges and meet them with a dot.
Selected
01 · Framed section
Ship in the open
A centred column with hairline sides. Rules run past the edges and meet them with a dot.
Icons animation
Selected
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/frame-rule
Accessibility
- Rules and dots are hidden from screen readers.
Motion
- Rules draw from their crossings in 600 ms when they come into view.
- Dots pop in at 80% over 160 ms.
- With reduced motion, it appears drawn.
Responsive behavior
- 720 px with rules 56 px in on Web. 390 px with a 350 px column on Mobile.
Performance
- Rules draw once on mount and then stay still. No loops and no listeners.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import FrameRule. Props: selected, animated, with your section as children.
- It is for marketing and docs sections, never forms.
Related
Section HeadingProBlockThe heading every template block opens with: eyebrow, title, subtitle and actions.SeparatorComponentA quiet divider between content: plain rule, fading edges, soft dots, a labelled break or an icon knot.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.