@nqlib/nqui 0.4.3 → 0.4.5

package/docs/components/nqui-spinner.md

@@ -1,6 +1,6 @@
 # nqui Spinner
 
-> Loading spinner.
+> Dual-arc loader (primary **`linearGradient`** strokes, rotating shell). Keyframes live in **`packages/nqui/src/index.css`** (`.nqui-spinner-*`).
 
 ## Import
 
@@ -14,3 +14,8 @@ import { Spinner } from "@nqlib/nqui"
 <Spinner />
 <Spinner className="size-6" />
 ```
+
+## Notes
+
+- Root is a `div` with `role="status"` and `aria-label="Loading"`.
+- Strokes use `var(--primary)` and `color-mix(in oklch, var(--primary) …, white)` so light/dark themes stay on-brand.

package/docs/components/nqui-switch.md

@@ -1,6 +1,6 @@
 # nqui Switch
 
-> Toggle switch. Core Radix.
+> Toggle switch. **Radix** primitive with **size** variants and **capsule thumb** (white, shadow). Sizes align with control scale: `sm` / `default` / `lg`.
 
 ## Import
 
@@ -13,3 +13,25 @@ import { Switch } from "@nqlib/nqui"
 ```tsx
 <Switch checked={checked} onCheckedChange={setChecked} />
 ```
+
+## Sizes
+
+```tsx
+<Switch size="sm" />
+<Switch size="default" />
+<Switch size="lg" />
+```
+
+## Hit area
+
+The switch root has no `::before` styling, so you can add [hit-area utilities](https://bazza.dev/craft/2026/hit-area) on the same element:
+
+```tsx
+<Switch className="hit-area-4" id="notifications" />
+```
+
+Use sparingly in dense toolbars so expanded targets do not overlap.
+
+## Notes
+
+- Thumb travel and track sizes are fixed per `size`; overriding height on the root without matching thumb classes may look off.

package/docs/components/nqui-tabs.md

@@ -31,5 +31,15 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nqlib/nqui"
 
 ## Notes
 
-- Sliding indicator needs `position: relative` on TabsList container.
+- **Sliding indicator:** Requires `position: relative` on TabsList container (handled automatically by the component).
+- **Responsive behavior:** On small screens, TabsList can overflow horizontally. Use `overflow-x-auto` on parent if needed.
+- **Container requirements:** For the sliding indicator to work correctly, the TabsList container needs:
+  ```css
+  .sliding-indicator-container {
+    position: relative;
+    overflow: hidden;
+    min-width: 0;
+  }
+  ```
+- **Resize handling:** The indicator recalculates position on window resize (built-in).
 - Use `EnhancedTabsList` props for additional customization.

package/docs/components/nqui-toaster.md

@@ -1,6 +1,6 @@
 # nqui Toaster
 
-> Toast notifications (sonner). Semantic types, promise pattern.
+> Toast notifications via **Sonner**. Default toast is **pill-shaped**; default **normal** toast uses **inverted** surface (dark fill in light theme, light fill in dark theme) using `--foreground` / `--background`. Implemented in **`packages/nqui/src/components/ui/sonner.tsx`** (`Toaster`). Compatibility aliases: `EnhancedSonner`, `CoreToaster` → same component.
 
 ## Import
 
@@ -42,3 +42,7 @@ toast.promise(fetchData(), {
 toast.success("Msg", { duration: 5000 })
 // Toaster: position, richColors, etc.
 ```
+
+## Notes
+
+- **Subpath import:** `@nqlib/nqui/sonner` re-exports the same `Toaster`.

package/docs/internal-notes/PUBLISHING.md

@@ -230,15 +230,57 @@ If a version had bugs (e.g. init-cursor routed to wrong script, skills not worki
    npm deprecate @nqlib/nqui@0.4.1 "Use 0.4.2 instead. See changelog."
    ```
 
-4. **Unpublish** (rare, npm restrictions apply):
-   - Must be within 72 hours of publish
-   - No other packages can depend on it
-   - `npm unpublish @nqlib/nqui@0.4.1 --force`
+4. **Unpublish** (rare, npm restrictions apply): See [Unpublishing](#unpublishing) below.
 
 **Recommendation:** Usually deprecate + publish patch. Unpublish only for security issues.
 
 ---
 
+## Unpublishing
+
+### npmjs.com
+
+**Rules:**
+- **Within 72 hours of publish**: You can unpublish. The version is then available for re-publish.
+- **After 72 hours**: Unpublish is disallowed. Versions are permanently locked. Use deprecation instead.
+
+**Unpublish a specific version** (within 72 hours):
+```bash
+cd packages/nqui
+npm unpublish @nqlib/nqui@0.4.1 --force --registry=https://registry.npmjs.com
+```
+
+**Unpublish entire package** (within 72 hours, removes all versions):
+```bash
+npm unpublish @nqlib/nqui --force --registry=https://registry.npmjs.com
+```
+
+**After 72 hours – deprecate instead:**
+```bash
+npm deprecate @nqlib/nqui@0.4.1 "Superseded by 0.4.2. Use npm install @nqlib/nqui@0.4.2"
+```
+
+### GitHub Packages
+
+**Rules:**
+- You can delete any version at any time.
+- Deleted versions can be re-published (unlike npm).
+
+**Delete via GitHub UI:**
+1. Go to your repo → **Packages** (right sidebar) or `https://github.com/ORG/REPO/packages`
+2. Click the package `nqui`
+3. **Manage package** → **Delete package** (entire package) or **Manage versions** → delete specific versions
+
+**Delete via GitHub API** (for automation):
+```bash
+# Requires GITHUB_TOKEN with delete:packages
+curl -X DELETE -H "Authorization: token $GITHUB_TOKEN" \
+  "https://api.github.com/orgs/nqlib/packages/npm/nqui/versions/VERSION_ID"
+```
+(Get `VERSION_ID` from the package page or API.)
+
+---
+
 ## Version Management
 
 The `npm version` command automatically:

package/docs/nqui-skills/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: nqui Components
+description: Component implementation guide for nqui. Use when building UI, designing app layouts, or implementing components with @nqlib/nqui.
+---
+
+# nqui Components Guide
+
+Reference `packages/nqui/docs/components/README.md` for the full component index and implementation rules.
+
+## Quick Reference
+
+1. **Main index:** `packages/nqui/docs/components/README.md` - all components, use cases, prerequisites
+2. **Per-component:** `packages/nqui/docs/components/nqui-<name>.md` - import, examples, variants
+3. **Design system:** this folder - sizing, grouped controls
+
+## App Design Rule: Inline Selection → ToggleGroup
+
+When designing app UI (toolbars, headers, inline controls):
+
+| Context | Use | NOT |
+|---------|-----|-----|
+| View mode (List/Grid/Table), scale (Linear/Log), size (S/M/L) | **ToggleGroup** `type="single"` | RadioGroup |
+| Format toolbar (Bold/Italic/Underline), multi-toggle | **ToggleGroup** `type="multiple"` | Multiple Checkboxes |
+| Toolbar actions (Undo/Redo, align) | **ButtonGroup** | - |
+| Single on/off (Bold, Mute) | **Toggle** | - |
+
+**Rule:** Inline/toolbar selection = ToggleGroup. Use RadioGroup only for form context (settings page, modal form, stacked list).
+
+## App Design Rule: Context-First (Toolbar in Real Environment)
+
+**Rule:** Never show Toggle/ToggleGroup/ButtonGroup in isolation. Always place them in realistic app context.
+
+| Context | Layout | Reference |
+|---------|--------|-----------|
+| Document editor | Toolbar above content; `bg-muted/30` container; `Separator` between groups | ComponentShowcase → Toggle & ToggleGroup |
+| Chart/settings | Label + inline controls; `rounded-lg border bg-muted/30 p-3` | ComponentShowcase → Chart settings |
+| Standalone | Inline with related UI | ComponentShowcase → Standalone toggle |
+
+**Canonical implementation:** `packages/nqui/src/pages/ComponentShowcase.tsx` — Toggle & ToggleGroup section.
+
+## Design System Conventions
+
+See **`design-system.md`** in this folder for sizing, grouped controls (including pill **ButtonGroup** / **ToggleGroup** shells), and file paths under `packages/nqui/src/components/ui/`.
+
+### Control Sizing
+- sm = h-6
+- default = h-7
+- lg = h-8
+
+### Z-Index
+Always use CSS variables from elevation.css:
+- `--z-content` (10) - standard content
+- `--z-sticky-content` (15) - sticky within containers
+- `--z-sticky-page` (20) - page-level sticky
+- `--z-floating` (30) - floating panels
+- `--z-modal-backdrop` (40)
+- `--z-modal` (50)
+- `--z-popover` (60)
+- `--z-tooltip` (70)
+
+### FrostedGlass (sticky glass headers)
+
+`FrostedGlass` is only the blur layer. Implementations need a **second row** with `bg-background/40`, `relative z-[var(--z-content)]`, and content that **scrolls behind** the sticky header. Full checklist, props, and troubleshooting: **`packages/nqui/docs/components/nqui-frosted-glass.md`**. Canonical page header: `AppLayout`; card: **Card** `stickyHeader`.
+
+### Component Naming
+- Default exports are the enhanced/polished variants; use **Core\*** for plain primitives
+- Implementations are consolidated under **`ui/`** (not separate `custom/enhanced-*` per component for Button, Badge, Checkbox, Select, Combobox, Sonner)
+- File names: kebab-case
+- Component names: PascalCase
+
+### Hit area (optional)
+
+Library CSS includes [Bazza hit-area](https://bazza.dev/craft/2026/hit-area) utilities. For **Checkbox** / **Switch** in padded tables or lists, pass **`className="hit-area-6"`** (or `hit-area-4`, axis variants) on the **component root**, not on a wrapper-only parent. Opt-in only; use **`hit-area-debug`** while tuning. Details: `packages/nqui/docs/components/nqui-checkbox.md`, `nqui-switch.md`; examples: `ComponentShowcase` Checkbox + Switch sections.
+
+## Key Dependencies
+
+Required peer dependencies:
+- `@hugeicons/react`
+- `@hugeicons/core-free-icons`
+
+Optional:
+- `next-themes` - for theme toggle
+- `tw-animate-css` - for animations
+
+## Installation & Setup
+
+```bash
+# Quick setup
+npx @nqlib/nqui init-css
+
+# App setup with sidebar
+npx @nqlib/nqui init-css --sidebar
+
+# Install peer dependencies
+npx @nqlib/nqui install-peers
+```
+
+## CSS Variables
+
+All components use CSS variables. Key ones:
+- `--background`, `--foreground`
+- `--muted`, `--muted-foreground`
+- `--accent`, `--accent-foreground`
+- `--border`, `--ring`
+- `--primary`, `--primary-foreground`
+- `--destructive`, `--destructive-foreground`

package/docs/nqui-skills/design-system.md

@@ -0,0 +1,143 @@
+---
+name: nqui-design-system
+description: Design system conventions for nqui component library. Use when creating or modifying nqui UI components to ensure sizing, spacing, and styling consistency.
+---
+
+# nqui Design System
+
+Guidelines for AI agents implementing or modifying nqui components. Follow these rules to maintain visual consistency.
+
+## Control Size Scale
+
+All interactive controls (buttons, toggles, inputs, selects) use a unified scale:
+
+| Size     | Height | Min Width | Use Case                          |
+|----------|--------|-----------|-----------------------------------|
+| `sm`     | h-6 (24px) | min-w-6 | Compact UIs, dense tables, toolbars |
+| `default`| h-7 (28px) | min-w-7 | Standard forms, primary actions       |
+| `lg`     | h-8 (32px) | min-w-8 | Emphasis, secondary actions         |
+
+### Semantic Rule
+
+`size="sm"` on Button MUST produce the same height as `size="sm"` on ToggleGroupItem, SegmentedControlItem, SelectTrigger, etc. Never introduce component-specific scales.
+
+## Layout Heights
+
+| Element | Height | Use Case |
+|---------|--------|----------|
+| Header | h-12 (48px) | Page header, app bar, sticky nav |
+| Sidebar header | h-12 (48px) | Sidebar section title bar |
+
+Fits 4px/8px grid. Default button (h-7) in 48px header leaves 10px top/bottom; h-8 leaves 8px. Use px-4, gap-2 or gap-4 for horizontal spacing.
+
+## Component Size Mapping
+
+| Component | sm | default | lg |
+|-----------|-----|---------|-----|
+| Button | h-6 min-w-6 px-2 text-xs | h-7 min-w-7 px-3 | h-8 min-w-8 px-4 |
+| Button (icon) | — | h-7 w-7 p-0 | — |
+| Toggle | h-6 min-w-6 px-1.5 | h-7 min-w-7 px-2 | h-8 min-w-8 px-2 |
+| ToggleGroupItem | (uses Toggle) | | |
+| SelectTrigger | h-6 | h-7 | — |
+| Input | — | h-7 px-3 py-1.5 text-sm | — |
+| InputGroup | — | h-7 | — |
+
+## Border Radius & Nested Radius
+
+| Token | Formula | Use Case |
+|-------|---------|----------|
+| --radius-sm | calc(--radius - 4px) | Compact controls, kbd |
+| --radius-md | calc(--radius - 2px) | Default (Button, Input, Card) |
+| --radius-lg | var(--radius) | Large surfaces |
+| --radius-xl | calc(--radius + 4px) | Modals, sheets |
+
+**Nested radius formula:** `R_inner = R_outer - offset`. When a smaller element sits inside a larger one with padding, use concentric radius so corners align.
+
+```
+/* Inner card with p-3 (12px) inset inside radius-lg card */
+border-radius: calc(var(--radius-lg) - var(--spacing-3));
+```
+
+- **Standalone** components (Button, Input) use radius tokens directly.
+- **Nested** elements (Card inside Card, panel in modal) use `calc(outer - offset)`.
+- Clamp to avoid negatives: `max(0px, calc(...))` when offset ≥ outer.
+
+## Typography
+
+| Size | Class | Use Case |
+|------|-------|----------|
+| sm | `text-xs` or `text-[0.625rem]` | Compact controls, labels |
+| default | `text-sm` | Body, inputs, buttons |
+| base | `text-base` | Section titles, headings |
+
+Font: `--font-sans` (Inter Variable). Leading: `leading-normal` or `text-xs/relaxed`.
+
+## When Adding a New Component
+
+1. **Use the scale** – If the component has a `size` prop, map `sm`→h-6, `default`→h-7, `lg`→h-8.
+2. **Match padding** – Text controls: px-2–3, py-1.5. Icon-only: p-0 with explicit size.
+3. **Text size** – sm: `text-xs` or `text-[0.625rem]`, default: `text-sm`, lg: `text-sm`.
+4. **Border radius** – Use `rounded-md` (default) or `rounded-[min(var(--radius-md),8px)]` for sm; **Button** uses full pill (`rounded-full`). For nested layouts, use `calc(outer - offset)`.
+
+## Grouped Controls (ButtonGroup, ToggleGroup)
+
+- **Shared border** – Container: `rounded-full border border-input overflow-hidden` (pill outer edge)
+- **Child borders** – Items: `border-0` (container provides the border)
+- **Dividers** – ToggleGroup: item borders (`border-foreground/20`) between items. Or `ToggleGroupSeparator` when `separator={false}`.
+- **Corners** – First item: rounded-l (or rounded-t vertical), last: rounded-r (or rounded-b)
+- **Several groups on one horizontal row** – `ButtonGroup`’s container is **`inline-flex`**, so multiple sibling groups in normal flow behave like **inline boxes** and align to **baseline**. Mixed content (labels vs icons vs `ButtonGroupText`) then produces inconsistent vertical alignment. Prefer an explicit row container: **`flex flex-wrap items-center gap-*`**, or **grid** columns—so you choose **cross-axis alignment** (`items-center`, `items-end`, etc.) instead of inheriting baseline alignment from inline layout.
+
+## Toggle & ToggleGroup Visual Treatment (Visibility on Any Background)
+
+Toggles and ToggleGroup items must remain visible on card, sidebar, and varied backgrounds:
+
+| State | Default/Outline | Segmented (single select) |
+|-------|-----------------|---------------------------|
+| **Off** | `border border-input/60` (or `border-input`), `shadow-sm`, `bg-background/50` (or transparent) | Transparent |
+| **On** | `bg-secondary` + `nqui-button-gradient` + `nqui-button-shadow` (secondary-like layering) | `bg-primary` + gradient + shadow |
+| **Active (pressed)** | `active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.125)]` | Same |
+
+Never use flat `bg-muted` only for selected state; always add gradient + shadow for depth and visibility.
+
+## Toolbar & In-Context Design
+
+**Rule:** Show controls in realistic app context, not isolated. Reference: `packages/nqui/src/pages/ComponentShowcase.tsx` (Toggle & ToggleGroup section).
+
+| Context | Layout | Example |
+|---------|--------|---------|
+| Document editor | Toolbar above content area, `bg-muted/30` container, `Separator` between control groups | Bold/Italic/Underline \| Align Left/Center/Right |
+| Chart/settings panel | Label + inline controls, `rounded-lg border bg-muted/30 p-3` | Y-axis: Linear/Log; Size: S/M/L |
+| Standalone | Inline with related UI, not floating alone | Pin, Mute, single Toggle |
+
+## Bounded content (default UX)
+
+- **Rule:** Interactive surfaces should not **visually bleed** outside their box: prefer **ellipsis** (`truncate`), **line-clamp**, **controlled scroll**, or **wrapping** (`break-words` / `whitespace-normal`) instead of letting text or icons paint past padding in narrow layouts.
+- **Not universal:** Portals (dropdowns, popovers), **tooltips**, and **drag overlays** intentionally escape bounds. **Data tables** may use horizontal scroll. Choose per component.
+- **Flex gotcha:** `inline-flex` + icon + `whitespace-nowrap` + raw **string** children keeps an implicit **min-width: min-content**; parents need **`min-w-0`** (and often **`max-w-full`**) on the control and a truncating inner wrapper for long labels.
+- **Built-in helpers in nqui:** Shared `wrapInlineLabelTextNodes` + `min-w-0 max-w-full` on **Button**, **Toggle**, **TabsTrigger**, **Badge**, **ComboboxChip**; **SelectTrigger** uses **`min-w-0 max-w-full`** and **`min-w-0`** on the value slot with **`line-clamp-1`**. **Carousel** prev/next sit **inside** the carousel box so they don’t spill out of **Card** (override via `className` if you want outside arrows).
+- **Card:** **Card** uses **`min-w-0`** on shell + header/content/footer for flex/grid safety but keeps **`overflow-visible`** so overlays aren’t clipped; don’t rely on **`overflow-hidden`** on Card as a global “catch-all” unless you accept clipping dropdowns/focus.
+
+## Customization
+
+- End users override via `className` or `size` when supported.
+- Do NOT hardcode heights in consumer code when the component supports `size`.
+- Prefer semantic sizes over pixel values in component defaults.
+
+## Hit area utilities
+
+**Hit area** expands the pointer target; it does **not** replace control **size** (sm / default / lg). Use **opt-in** on **Checkbox** / **Switch** for padded rows or cells—not as a global default. Avoid large overlapping hit areas in dense toolbars. See **`SKILL.md`** (Hit area) in this folder and `packages/nqui/docs/components/nqui-checkbox.md` / `nqui-switch.md`.
+
+## Files to Check for Consistency
+
+- `packages/nqui/src/components/ui/button.tsx`
+- `packages/nqui/src/components/ui/toggle.tsx`
+- `packages/nqui/src/components/ui/toggle-group.tsx`
+- `packages/nqui/src/components/ui/input.tsx`
+- `packages/nqui/src/components/ui/select.tsx`
+- `packages/nqui/src/components/ui/combobox.tsx`
+
+## Anti-Patterns
+
+- **Different heights for same size** – Button h-10 while Toggle h-7 = inconsistent.
+- **Component-specific scales** – Do not add `xs` or `xl` without updating the design system doc.
+- **Overriding in showcase** – If showcase needs `className="h-9"` to look right, the component default is wrong.

package/docs/nqui-skills/rules/composition.md

@@ -0,0 +1,183 @@
+# Component Composition
+
+Best practices for composing nqui components.
+
+## Contents
+
+- Items always inside their Group component
+- Callouts use Alert
+- Empty states use Empty component
+- Toast notifications use sonner
+- Choosing between overlay components
+- Dialog, Sheet, and Drawer always need a Title
+- Card structure
+- TabsTrigger must be inside TabsList
+- Avatar always needs AvatarFallback
+- Use Separator instead of raw hr or border divs
+- Use Skeleton for loading placeholders
+- Use Badge instead of custom styled spans
+
+---
+
+## Items always inside their Group component
+
+Never render items directly inside the content container.
+
+**Incorrect:**
+
+```tsx
+<SelectContent>
+  <SelectItem value="apple">Apple</SelectItem>
+  <SelectItem value="banana">Banana</SelectItem>
+</SelectContent>
+```
+
+**Correct:**
+
+```tsx
+<SelectContent>
+  <SelectGroup>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+  </SelectGroup>
+</SelectContent>
+```
+
+This applies to all group-based components:
+
+| Item | Group |
+|------|-------|
+| `SelectItem`, `SelectLabel` | `SelectGroup` |
+| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
+| `MenubarItem` | `MenubarGroup` |
+| `ContextMenuItem` | `ContextMenuGroup` |
+| `CommandItem` | `CommandGroup` |
+
+---
+
+## Callouts use Alert
+
+```tsx
+<Alert>
+  <AlertTitle>Warning</AlertTitle>
+  <AlertDescription>Something needs attention.</AlertDescription>
+</Alert>
+```
+
+---
+
+## Empty states use Empty component
+
+```tsx
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>Create Project</Button>
+  </EmptyContent>
+</Empty>
+```
+
+---
+
+## Toast notifications use sonner
+
+```tsx
+import { toast } from "sonner"
+
+toast.success("Changes saved.")
+toast.error("Something went wrong.")
+toast("File deleted.", {
+  action: { label: "Undo", onClick: () => undoDelete() },
+})
+```
+
+---
+
+## Choosing between overlay components
+
+| Use case | Component |
+|----------|-----------|
+| Focused task that requires input | `Dialog` |
+| Destructive action confirmation | `AlertDialog` |
+| Side panel with details or filters | `Sheet` |
+| Mobile-first bottom panel | `Drawer` |
+| Quick info on hover | `HoverCard` |
+| Small contextual content on click | `Popover` |
+
+---
+
+## Dialog, Sheet, and Drawer always need a Title
+
+`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
+
+```tsx
+<DialogContent>
+  <DialogHeader>
+    <DialogTitle>Edit Profile</DialogTitle>
+    <DialogDescription>Update your profile.</DialogDescription>
+  </DialogHeader>
+  ...
+</DialogContent>
+```
+
+---
+
+## Card structure
+
+Use full composition — don't dump everything into `CardContent`:
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Team Members</CardTitle>
+    <CardDescription>Manage your team.</CardDescription>
+  </CardHeader>
+  <CardContent>...</CardContent>
+  <CardFooter>
+    <Button>Invite</Button>
+  </CardFooter>
+</Card>
+```
+
+---
+
+## TabsTrigger must be inside TabsList
+
+Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">...</TabsContent>
+</Tabs>
+```
+
+---
+
+## Avatar always needs AvatarFallback
+
+Always include `AvatarFallback` for when the image fails to load:
+
+```tsx
+<Avatar>
+  <AvatarImage src="/avatar.png" alt="User" />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+```
+
+---
+
+## Use existing components instead of custom markup
+
+| Instead of | Use |
+|------------|-----|
+| `<hr>` or `<div className="border-t">` | `<Separator />` |
+| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
+| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |