@uniweb/kit

Standard component library for Uniweb foundations. Tree-shakeable utilities, components, and hooks for building foundation components.

Installation

``bash
npm install @uniweb/kit
`

Tree-Shaking Benefits

Kit is designed to be bundled into your foundation (not externalized like @uniweb/core). This means:

- Only what you use is bundled — Import 3 components? Only those 3 end up in your foundation
- No runtime overhead — Unused code is eliminated at build time
- Customizable — Override or extend any component without carrying dead code
- Small foundations — A minimal foundation using just Link and useWebsite stays tiny

`js
// vite.config.js - Kit is bundled, core is external
export default {
build: {
rollupOptions: {
external: ['react', 'react-dom', 'react-router-dom', '@uniweb/core']
// Note: @uniweb/kit is NOT in external — it gets tree-shaken
}
}
}
`

Quick Start

`jsx
import { Link, Image, useWebsite } from '@uniweb/kit'

function Hero({ content }) {
const { localize } = useWebsite()

return (



)
}
`

---

Components

$3

Smart link component with routing, downloads, and auto-generated accessible titles.

`jsx
import { Link } from '@uniweb/kit'

About
GitHub
Download Report
Contact
`

| Prop | Type | Description |
|------|------|-------------|
| to / href | string | Destination URL |
| title | string | Tooltip (auto-generated if omitted) |
| target | string | Link target |
| download | boolean | Force download behavior |

$3

Versatile image component with filters and profile integration.

`jsx
import { Image } from '@uniweb/kit'




`

| Prop | Type | Description |
|------|------|-------------|
| src / url | string | Image URL |
| alt | string | Alt text |
| size | string | Preset: xs, sm, md, lg, xl, 2xl, full |
| rounded | boolean\|string | Border radius |
| filter | object | CSS filters: blur, brightness, contrast, grayscale, saturate, sepia |
| profile | object | Profile for avatar/banner images |
| type | string | Image type: avatar, banner |

$3

Safely render HTML with topic link resolution.

`jsx
import { SafeHtml } from '@uniweb/kit'



`

$3

SVG icon component with built-in icons and URL loading.

`jsx
import { Icon } from '@uniweb/kit'




`

Built-in: check, alert, user, heart, settings, star, close, menu, chevronDown, chevronRight, externalLink, download, play

$3

Social media platform icons with automatic detection.

`jsx
import { SocialIcon, getSocialPlatform, filterSocialLinks } from '@uniweb/kit'




// Utilities
getSocialPlatform('https://linkedin.com/in/user') // 'linkedin'
filterSocialLinks(links) // Filter to only social links
`

Supported: facebook, twitter, x, linkedin, instagram, youtube, github, medium, pinterest, tiktok, discord, mastodon, bluesky, email, phone, orcid, researchgate, googlescholar

$3

Smart typography components for rendering semantic parser output.

`jsx
import { Text, H1, H2, P, PlainText } from '@uniweb/kit'

// Plain text (HTML shown as text)

<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">| Prop | Type | Description |<br />|------|------|-------------|<br />| </code>text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string\|string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Content to render |<br />| </code>as<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Tag: 'h1'-'h6', 'p', 'div', 'span' |<br />| </code>html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Render as HTML (default: true) |<br />| </code>lineAs<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Tag for array items |</p><p class="my-3">Aliases: </code>H1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>H2<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>H3<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>H4<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>H5<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>H6<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>P<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>Span<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>Div<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>PlainText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Video player for YouTube, Vimeo, and local videos.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { Media } from '@uniweb/kit'</p><p class="my-3"><Media src="https://youtube.com/watch?v=abc123" /><br /><Media src="/videos/intro.mp4" controls /><br /><Media src="https://youtube.com/..." thumbnail="/poster.jpg" facade /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">File type icons based on filename.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { FileLogo } from '@uniweb/kit'</p><p class="my-3"><FileLogo filename="report.pdf" size="32" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Platform icons (YouTube, Vimeo, etc.).</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { MediaIcon } from '@uniweb/kit'</p><p class="my-3"><MediaIcon type="youtube" size="24" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">File preview with download functionality.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { Asset } from '@uniweb/kit'</p><p class="my-3"><Asset value="document.pdf" profile={profile} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Hooks</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Access website instance and utilities.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useWebsite } from '@uniweb/kit'</p><p class="my-3">function MyComponent() {<br /> const {<br /> website, // Website instance<br /> localize, // Localize multilingual values<br /> makeHref, // Transform hrefs (topic:, locale prefixes)<br /> getLanguage, // Current language code<br /> getLanguages // Available languages<br /> } = useWebsite()</p><p class="my-3"> return <div>{localize({ en: 'Hello', fr: 'Bonjour' })}</div><br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Detect active navigation state.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useActiveRoute } from '@uniweb/kit'</p><p class="my-3">function NavLink({ page }) {<br /> const { isActive, isActiveOrAncestor } = useActiveRoute()</p><p class="my-3"> return (<br /> <Link<br /> to={page.route}<br /> className={isActiveOrAncestor(page) ? 'font-bold' : ''}<br /> ><br /> {page.title}<br /> </Link><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Detect scroll position for sticky headers.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useScrolled } from '@uniweb/kit'</p><p class="my-3">function Header() {<br /> const scrolled = useScrolled(50) // Threshold in pixels</p><p class="my-3"> return (<br /> <header className={scrolled ? 'shadow-md' : ''}><br /> ...<br /> </header><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Mobile menu state management.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useMobileMenu } from '@uniweb/kit'</p><p class="my-3">function Navbar() {<br /> const { isOpen, toggle, close } = useMobileMenu()</p><p class="my-3"> return (<br /> <><br /> <button onClick={toggle}>Menu</button><br /> {isOpen && <MobileMenu onClose={close} />}<br /> </><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Accordion/FAQ state management.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useAccordion } from '@uniweb/kit'</p><p class="my-3">function FAQ({ items }) {<br /> const { isOpen, toggle } = useAccordion()</p><p class="my-3"> return items.map((item, i) => (<br /> <div key={i}><br /> <button onClick={() => toggle(i)}>{item.question}</button><br /> {isOpen(i) && <p>{item.answer}</p>}<br /> </div><br /> ))<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Viewport intersection detection for lazy loading and animations.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useInView, useIsInView } from '@uniweb/kit'</p><p class="my-3">function AnimatedSection() {<br /> const { ref, inView } = useInView({ threshold: 0.2, once: true })</p><p class="my-3"> return (<br /> <div ref={ref} className={inView ? 'animate-fade-in' : 'opacity-0'}><br /> Content appears when scrolled into view<br /> </div><br /> )<br />}</p><p class="my-3">// Simple boolean version<br />function LazyImage({ src }) {<br /> const [ref, isInView] = useIsInView()<br /> return <div ref={ref}>{isInView && <img src={src} />}</div><br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Responsive grid utilities.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useGridLayout, getGridClasses } from '@uniweb/kit'</p><p class="my-3">function Gallery({ items }) {<br /> const { columns } = useGridLayout(items.length, { maxColumns: 4 })</p><p class="my-3"> return (<br /> <div className={getGridClasses(columns)}><br /> {items.map(item => <Card key={item.id} {...item} />)}<br /> </div><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Access site theming data at runtime.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import {<br /> useThemeData,<br /> useThemeColor,<br /> useThemeColorVar,<br /> useColorContext,<br /> useAppearance<br />} from '@uniweb/kit'</p><p class="my-3">function ThemedComponent({ block }) {<br /> // Full theme access<br /> const theme = useThemeData()<br /> const palettes = theme?.getPaletteNames() // ['primary', 'secondary', ...]</p><p class="my-3"> // Get specific color<br /> const primaryColor = useThemeColor('primary', 500) // '#3b82f6'<br /> const primaryVar = useThemeColorVar('primary', 600) // 'var(--primary-600)'</p><p class="my-3"> // Context-aware (light/medium/dark sections)<br /> const context = useColorContext(block) // 'light' | 'medium' | 'dark'</p><p class="my-3"> // Dark mode<br /> const { scheme, toggle, canToggle } = useAppearance()</p><p class="my-3"> return (<br /> <div style={{ color: primaryColor }}><br /> {canToggle && (<br /> <button onClick={toggle}><br /> {scheme === 'dark' ? 'Light' : 'Dark'}<br /> </button><br /> )}<br /> </div><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Search</h2></p><p class="my-3">Full-text search powered by Fuse.js. Requires </code>fuse.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as a peer dependency in your foundation.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />npm install fuse.js<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Main search hook with debouncing and state management.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useSearch, useWebsite } from '@uniweb/kit'</p><p class="my-3">function SearchComponent() {<br /> const { website } = useWebsite()<br /> const { query, results, isLoading, isEnabled, preload } = useSearch(website)</p><p class="my-3"> if (!isEnabled) return null</p><p class="my-3"> return (<br /> <div><br /> <input onChange={e => query(e.target.value)} placeholder="Search..." /><br /> {isLoading && <span>Searching...</span>}<br /> {results.map(r => (<br /> <a key={r.id} href={r.href}>{r.title}</a><br /> ))}<br /> </div><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Intent-based preloading — loads search index on hover/focus instead of page load.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useSearchWithIntent, useSearchShortcut } from '@uniweb/kit'</p><p class="my-3">function SearchButton({ onClick }) {<br /> const { website } = useWebsite()<br /> const { triggerPreload, intentProps } = useSearchWithIntent(website)</p><p class="my-3"> // Cmd/Ctrl+K shortcut with preload<br /> useSearchShortcut({<br /> onOpen: onClick,<br /> onPreload: triggerPreload,<br /> })</p><p class="my-3"> return (<br /> <button onClick={onClick} {...intentProps}><br /> Search<br /> </button><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This saves bandwidth — the search index only loads when users show intent to search.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Keyboard shortcut for opening search.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useSearchShortcut } from '@uniweb/kit'</p><p class="my-3">// Simple<br />useSearchShortcut(() => setSearchOpen(true))</p><p class="my-3">// With preload on shortcut<br />useSearchShortcut({<br /> onOpen: () => setSearchOpen(true),<br /> onPreload: () => searchClient.preload()<br />})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Low-level search client for advanced use.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { createSearchClient } from '@uniweb/kit'</p><p class="my-3">const client = createSearchClient(website, {<br /> fuseOptions: { threshold: 0.3 },<br /> defaultLimit: 10<br />})</p><p class="my-3">// Query<br />const results = await client.query('authentication', { limit: 5 })</p><p class="my-3">// Preload index<br />await client.preload()</p><p class="my-3">// Check status<br />client.isEnabled()<br />client.getIndexUrl()<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Styled Components</h2></p><p class="my-3">Pre-styled components with Tailwind CSS.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { Section, SidebarLayout, Disclaimer } from '@uniweb/kit'</p><p class="my-3"><Section width="lg" padding="md" className="bg-gray-50"><br /> <h1>Welcome</h1><br /></Section></p><p class="my-3"><SidebarLayout sidebar={<Nav />} sidebarPosition="left"><br /> <main>Content</main><br /></SidebarLayout></p><p class="my-3"><Disclaimer<br /> title="Terms of Service"<br /> content="<p>Please read our terms...</p>"<br /> triggerText="View Terms"<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Utilities</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { cn, stripTags, isExternalUrl, isFileUrl, detectMediaType } from '@uniweb/kit'</p><p class="my-3">// Merge Tailwind classes (uses tailwind-merge)<br />cn('px-4 py-2', 'bg-blue-500', condition && 'opacity-50')</p><p class="my-3">// Strip HTML tags<br />stripTags('<p>Hello</p>') // "Hello"</p><p class="my-3">// URL utilities<br />isExternalUrl('https://google.com') // true<br />isFileUrl('/files/doc.pdf') // true<br />detectMediaType('https://youtube.com/...') // 'youtube'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Architecture</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />┌─────────────────────────────────────────────────────────────┐<br />│ Foundation (your code) │<br />│ ├── imports @uniweb/kit (bundled, tree-shaken) │<br />│ └── @uniweb/core marked as external │<br />└─────────────────────────────────────────────────────────────┘<br /> │<br /> ▼<br />┌─────────────────────────────────────────────────────────────┐<br />│ @uniweb/runtime (browser) │<br />│ ├── Loads foundation dynamically │<br />│ ├── Provides @uniweb/core singleton │<br />│ └── Orchestrates React rendering │<br />└─────────────────────────────────────────────────────────────┘<br /></code>``</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Kit</strong>: Different foundations may use different subsets of kit. Tree-shaking ensures each foundation only includes what it uses.</p><p class="my-3">- <strong>Core</strong>: Contains the Website, Page, and Block classes that must be singletons. The runtime provides these — foundations reference them via the external import.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">Apache-2.0<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"25:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n26:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.0\"}]\n27:[\"$\",\"$L5\",\"tailwind-merge\",{\"href\":\"/package/tailwind-merge\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tailwind-merge\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.6.0\"}]]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}],\"Peer Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0 || ^19.0.0\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0 || ^19.0.0\"}]]}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":1}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"tailwindcss\",{\"href\":\"/package/tailwindcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tailwindcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.4.0\"}]]}]]}]}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>