# Vinicunca

> Documentation for every @vinicunca package: Pohon UI, Akar, Perkakas, Taman, ESLint Config, UnoCSS Preset and UnoCSS Variants.

## Overview

- [Vinicunca](https://vinicunca.dev/raw/index.md)

## How to use these docs

Vinicunca is a set of open source packages for building Vue and TypeScript applications. Each package has its own section on this site.

- **Pohon UI** (`pohon-ui`): styled, accessible Vue and Nuxt components built on Akar and UnoCSS. Use it for application UI: forms, tables, overlays, dashboards, docs and chat layouts.
- **Akar** (`akar`): unstyled, accessible Vue primitives (a fork of Reka UI). Use it to build your own design system, or when Pohon UI is too opinionated.
- **Perkakas** (`@vinicunca/perkakas`): typed data-first and data-last utility functions (a fork of Remeda). Use it instead of lodash or ramda.
- **Taman** (`create-taman`, `@vinicunca/taman-*`, `@vinicunca/request`): a full-stack Vue admin template with oRPC, better-auth, Drizzle and Cloudflare Workers.
- **ESLint Config** (`@vinicunca/eslint-config`): a flat ESLint config that also formats code. Use `vinicuncaESLint()` in `eslint.config.js`.
- **UnoCSS Preset** (`@vinicunca/unocss-preset`): `presetVinicunca()`, the UnoCSS preset every Vinicunca project uses, with fluid sizing, animations and scrollbars.
- **UnoCSS Variants** (`unocss-variants`): `uv()` for variants, slots and compound styles with UnoCSS, a port of Tailwind Variants.

How an agent should read this site:

- Read any documentation page as Markdown: prefix its path with `/raw` and add `.md` (`https://vinicunca.dev/raw/pohon/components/button.md`).
- Start from the Markdown sitemap at https://vinicunca.dev/sitemap.md, or the full documentation at https://vinicunca.dev/llms-full.txt.
- For Pohon UI conventions and component selection, load the agent skill at https://vinicunca.dev/.well-known/skills/pohon-ui/SKILL.md.
- For ESLint Config setup and the style rules it enforces, load the agent skill at https://vinicunca.dev/.well-known/skills/eslint-config/SKILL.md.
- For Taman project layout and the add-a-feature checklist, load the agent skill at https://vinicunca.dev/.well-known/skills/taman/SKILL.md.
- For UnoCSS Preset setup, fluid utilities and theme tokens, load the agent skill at https://vinicunca.dev/.well-known/skills/unocss-preset/SKILL.md.
- For Perkakas imports, pipe, and data-first versus data-last, load the agent skill at https://vinicunca.dev/.well-known/skills/perkakas/SKILL.md.
- For Akar composition (Root/Trigger/Content, asChild, data attributes), load the agent skill at https://vinicunca.dev/.well-known/skills/akar/SKILL.md.
- For UnoCSS Variants (`uv`, slots, compound variants, no class merging), load the agent skill at https://vinicunca.dev/.well-known/skills/unocss-variants/SKILL.md.
- For setting up or troubleshooting a Windows (WSL) dev machine, load the agent skill at https://vinicunca.dev/.well-known/skills/windows-dev/SKILL.md.

Entry points:

- [Pohon UI installation (Nuxt)](https://vinicunca.dev/raw/pohon/getting-started/installation/nuxt.md): Add Pohon UI to a Nuxt application
- [Pohon UI installation (Vue)](https://vinicunca.dev/raw/pohon/getting-started/installation/vue.md): Add Pohon UI to a Vue application with Vite
- [Pohon UI agent skill](https://vinicunca.dev/.well-known/skills/pohon-ui/SKILL.md): Conventions, component selection and layout recipes
- [ESLint Config](https://vinicunca.dev/raw/eslint/getting-started.md): Install vinicuncaESLint and set up the editor
- [ESLint Config agent skill](https://vinicunca.dev/.well-known/skills/eslint-config/SKILL.md): Factory options and the style conventions it enforces
- [Taman](https://vinicunca.dev/raw/taman/getting-started.md): Create a Taman project and run it locally
- [Taman agent skill](https://vinicunca.dev/.well-known/skills/taman/SKILL.md): Where code goes and the add-a-feature checklist
- [UnoCSS Preset agent skill](https://vinicunca.dev/.well-known/skills/unocss-preset/SKILL.md): presetVinicunca options, fluid utilities and theme tokens
- [Perkakas](https://vinicunca.dev/raw/perkakas/getting-started.md): Install Perkakas and the function reference
- [Perkakas agent skill](https://vinicunca.dev/.well-known/skills/perkakas/SKILL.md): Data-first and data-last, pipe, and common functions
- [Akar](https://vinicunca.dev/raw/akar/overview.md): Install Akar and the component anatomy
- [Akar agent skill](https://vinicunca.dev/.well-known/skills/akar/SKILL.md): When to use Akar, composition, and data attributes
- [UnoCSS Variants](https://vinicunca.dev/raw/unocss-variants/getting-started.md): uv() variants, slots, and the no-merge layer setup
- [UnoCSS Variants agent skill](https://vinicunca.dev/.well-known/skills/unocss-variants/SKILL.md): uv API, slots, compound variants, and the no-merge caveat
- [Markdown sitemap](https://vinicunca.dev/sitemap.md): Every page on the site, as Markdown links

## Akar

Unstyled, accessible Vue primitives for building design systems.

- [Components](https://vinicunca.dev/raw/akar/components.md): Unstyled, accessible Vue primitives. Sixty components covering overlays, forms, dates, menus, and more.
- [Accordion](https://vinicunca.dev/raw/akar/components/accordion.md): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert Dialog](https://vinicunca.dev/raw/akar/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://vinicunca.dev/raw/akar/components/aspect-ratio.md): Displays content within a desired ratio.
- [Autocomplete](https://vinicunca.dev/raw/akar/components/autocomplete.md): An input with suggestions that allows free-form text entry. Unlike Combobox, the value is the input text itself rather than a selected item.
- [Avatar](https://vinicunca.dev/raw/akar/components/avatar.md): An image element with a fallback for representing the user.
- [Calendar](https://vinicunca.dev/raw/akar/components/calendar.md): Displays dates and days of the week, facilitating date-related interactions.
- [Checkbox](https://vinicunca.dev/raw/akar/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Collapsible](https://vinicunca.dev/raw/akar/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Color Area](https://vinicunca.dev/raw/akar/components/color-area.md): A two-dimensional area for selecting color values in a specific color space.
- [Color Field](https://vinicunca.dev/raw/akar/components/color-field.md): An input field for entering and editing color values in various formats.
- [Color Slider](https://vinicunca.dev/raw/akar/components/color-slider.md): A slider control for adjusting individual color channels.
- [Color Swatch](https://vinicunca.dev/raw/akar/components/color-swatch.md): A predefined color block that allows users to quickly select commonly used or brand-specific colors.
- [Color Swatch Picker](https://vinicunca.dev/raw/akar/components/color-swatch-picker.md): A component that allows users to select from a set of predefined colors, often used for themes or branding.
- [Combobox](https://vinicunca.dev/raw/akar/components/combobox.md): Choose from a list of suggested values with full keyboard support.
- [Context Menu](https://vinicunca.dev/raw/akar/components/context-menu.md): Displays a menu located at the pointer, triggered by a right-click or a long-press.
- [Date Field](https://vinicunca.dev/raw/akar/components/date-field.md): Enables users to input specific dates within a designated field.
- [Date Picker](https://vinicunca.dev/raw/akar/components/date-picker.md): Facilitates the selection of dates through an input and calendar-based interface.
- [Date Range Field](https://vinicunca.dev/raw/akar/components/date-range-field.md): Allows users to input a range of dates within a designated field.
- [Date Range Picker](https://vinicunca.dev/raw/akar/components/date-range-picker.md): Facilitates the selection of date ranges through an input and calendar-based interface.
- [Dialog](https://vinicunca.dev/raw/akar/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Drawer](https://vinicunca.dev/raw/akar/components/drawer.md): A panel that slides in from the edge of the screen, with support for swipe-to-dismiss, snap points, and nested drawers.
- [Dropdown Menu](https://vinicunca.dev/raw/akar/components/dropdown-menu.md): Displays a menu to the user—such as a set of actions or functions—triggered by a button.
- [Editable](https://vinicunca.dev/raw/akar/components/editable.md): Displays an input field used for editing a single line of text, rendering as static text on load.
- [Field](https://vinicunca.dev/raw/akar/components/field.md): Accessible wiring between a label, control, description, and error message, with built-in validation.
- [Form](https://vinicunca.dev/raw/akar/components/form.md): Extends the native form element with server error display and submit-time validation gating.
- [Hover Card](https://vinicunca.dev/raw/akar/components/hover-card.md): For sighted users to preview content available behind a link.
- [Label](https://vinicunca.dev/raw/akar/components/label.md): Renders an accessible label associated with controls.
- [Listbox](https://vinicunca.dev/raw/akar/components/listbox.md): A control that allows the user to toggle between checked and not checked.
- [Menubar](https://vinicunca.dev/raw/akar/components/menubar.md): A visually persistent menu common in desktop applications that provides quick
- [MonthPicker](https://vinicunca.dev/raw/akar/components/month-picker.md): Presents a calendar view tailored for selecting months.
- [MonthRangePicker](https://vinicunca.dev/raw/akar/components/month-range-picker.md): Presents a calendar view tailored for selecting month ranges.
- [Navigation Menu](https://vinicunca.dev/raw/akar/components/navigation-menu.md): A collection of links for navigating websites.
- [Number Field](https://vinicunca.dev/raw/akar/components/number-field.md): A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
- [Pagination](https://vinicunca.dev/raw/akar/components/pagination.md): Displays data in paged format and provides navigation between pages.
- [Pin Input](https://vinicunca.dev/raw/akar/components/pin-input.md): A sequence of one-character alphanumeric inputs.
- [Popover](https://vinicunca.dev/raw/akar/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://vinicunca.dev/raw/akar/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Radio Group](https://vinicunca.dev/raw/akar/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [RangeCalendar](https://vinicunca.dev/raw/akar/components/range-calendar.md): Presents a calendar view tailored for selecting date ranges.
- [Rating](https://vinicunca.dev/raw/akar/components/rating.md): A star-rating input where the user selects a score, with support for fractional values.
- [Scroll Area](https://vinicunca.dev/raw/akar/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://vinicunca.dev/raw/akar/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](https://vinicunca.dev/raw/akar/components/separator.md): Visually or semantically separates content.
- [Slider](https://vinicunca.dev/raw/akar/components/slider.md): An input where the user selects a value from within a given range.
- [Splitter](https://vinicunca.dev/raw/akar/components/splitter.md): A component that divides your layout into resizable sections.
- [Stepper](https://vinicunca.dev/raw/akar/components/stepper.md): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](https://vinicunca.dev/raw/akar/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Tabs](https://vinicunca.dev/raw/akar/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Tag Group](https://vinicunca.dev/raw/akar/components/tag-group.md): A focusable list of tags that can be navigated, selected and removed with the keyboard.
- [Tags Input](https://vinicunca.dev/raw/akar/components/tags-input.md): Tags input render tags inside an input, followed by an actual text input.
- [Time Field](https://vinicunca.dev/raw/akar/components/time-field.md): Enables users to input specific times within a designated field.
- [Time Range Field](https://vinicunca.dev/raw/akar/components/time-range-field.md): Allows users to input a range of times within a designated field.
- [Toast](https://vinicunca.dev/raw/akar/components/toast.md): A succinct message that is displayed temporarily.
- [Toggle](https://vinicunca.dev/raw/akar/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://vinicunca.dev/raw/akar/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Toolbar](https://vinicunca.dev/raw/akar/components/toolbar.md): A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.
- [Tooltip](https://vinicunca.dev/raw/akar/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Tree](https://vinicunca.dev/raw/akar/components/tree.md): A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.
- [YearPicker](https://vinicunca.dev/raw/akar/components/year-picker.md): Presents a calendar view tailored for selecting years.
- [YearRangePicker](https://vinicunca.dev/raw/akar/components/year-range-picker.md): Presents a calendar view tailored for selecting year ranges.
- [Guides](https://vinicunca.dev/raw/akar/guides.md): How to compose, style, animate, and internationalize Akar primitives.
- [Animation/Transition](https://vinicunca.dev/raw/akar/guides/animation.md): Animate Akar with CSS keyframes, native Vue Transition or JavaScript animation library of your choice.
- [Composition](https://vinicunca.dev/raw/akar/guides/composition.md): Use the `asChild` prop to compose Akar's functionality onto alternative element types or your own Vue components.
- [Controlled State](https://vinicunca.dev/raw/akar/guides/controlled-state.md): How to work with controlled vs. uncontrolled state in Akar.
- [Dates & Times](https://vinicunca.dev/raw/akar/guides/dates.md): How to work with dates and times in Akar.
- [Internationalization (RTL)](https://vinicunca.dev/raw/akar/guides/i18n.md): Akar support both LTR/RTL directions. Learn more about how to integrate internationalization.
- [Inject Context](https://vinicunca.dev/raw/akar/guides/inject-context.md): Utilize `injectContext` to enhance component composition in Akar, enabling powerful and flexible UI development.
- [Migration - Radix Vue to Akar](https://vinicunca.dev/raw/akar/guides/migration.md): This guide provides step-by-step instructions for developers transitioning their projects from Radix Vue to Akar.
- [Namespaced components](https://vinicunca.dev/raw/akar/guides/namespaced-components.md): Import a whole primitive as an object (`Dialog.Root`) instead of listing every part.
- [Server side rendering](https://vinicunca.dev/raw/akar/guides/server-side-rendering.md): Akar can be rendered on the server.
- [Styling](https://vinicunca.dev/raw/akar/guides/styling.md): Akar are unstyled—and compatible with any styling solution—giving you complete control over styling.
- [Virtualization](https://vinicunca.dev/raw/akar/guides/virtualization.md): Learn how to efficiently render large datasets with Akar, powered by `@tanstack/virtual`.
- [Introduction](https://vinicunca.dev/raw/akar/overview.md): Unstyled, accessible Vue primitives for building design systems and web apps.
- [Accessibility](https://vinicunca.dev/raw/akar/overview/accessibility.md): Akar follow the WAI-ARIA authoring practices guidelines and are tested in a wide selection of modern browsers and commonly used assistive technologies.
- [Getting started](https://vinicunca.dev/raw/akar/overview/getting-started.md): A quick tutorial to get you up and running with Akar.
- [Installation](https://vinicunca.dev/raw/akar/overview/installation.md): Install Akar with npm, add the Nuxt module, or wire the unplugin Vue resolver.
- [Releases](https://vinicunca.dev/raw/akar/overview/releases.md): Akar version history and changelog live on GitHub.
- [Utilities](https://vinicunca.dev/raw/akar/utilities.md): Config provider, presence, primitive, and composables for wrapping Akar parts.
- [Config Provider](https://vinicunca.dev/raw/akar/utilities/config-provider.md): Wraps your app to provide global configurations.
- [Focus Scope](https://vinicunca.dev/raw/akar/utilities/focus-scope.md): Manages focus within a component boundary with support for trapping and looping focus navigation.
- [Presence](https://vinicunca.dev/raw/akar/utilities/presence.md): Manages mounting and unmounting of element with transition support.
- [Primitive](https://vinicunca.dev/raw/akar/utilities/primitive.md): Compose Akar's functionality onto alternative element types or your own Vue components.
- [Roving Focus](https://vinicunca.dev/raw/akar/utilities/roving-focus.md): Utility component that implements the roving tabindex method to manage focus between items.
- [Slot](https://vinicunca.dev/raw/akar/utilities/slot.md): Merges its props onto its immediate child.
- [useDateFormatter](https://vinicunca.dev/raw/akar/utilities/use-date-formatter.md): Creates a wrapper around the `DateFormatter`, which is an improved version of the Intl.DateTimeFormat API, that is used internally by the various date builders to easily format dates in a consistent way.
- [useDirection](https://vinicunca.dev/raw/akar/utilities/use-direction.md): Access the current direction
- [useEmitAsProps](https://vinicunca.dev/raw/akar/utilities/use-emit-as-props.md): Convert emits into object similar to props
- [useFilter](https://vinicunca.dev/raw/akar/utilities/use-filter.md): Locale-Aware string filtering
- [useForwardExpose](https://vinicunca.dev/raw/akar/utilities/use-forward-expose.md): Forward component's exposed value, props and $el.
- [useForwardProps](https://vinicunca.dev/raw/akar/utilities/use-forward-props.md): Forward component's props without boolean casting
- [useForwardPropsEmits](https://vinicunca.dev/raw/akar/utilities/use-forward-props-emits.md): Combinations for useForwardProps & useEmitAsProps
- [useId](https://vinicunca.dev/raw/akar/utilities/use-id.md): Generate random id
- [useLocale](https://vinicunca.dev/raw/akar/utilities/use-locale.md): Access the current locale
- [Visually Hidden](https://vinicunca.dev/raw/akar/utilities/visually-hidden.md): Hides content from the screen in an accessible way.

## Pohon UI

A Vue and Nuxt component library styled with UnoCSS, built on Akar.

- [Components](https://vinicunca.dev/raw/pohon/components.md): Build beautiful, accessible, and responsive user interfaces with 125+ Vue components powered by UnoCSS and Akar.
- [Accordion](https://vinicunca.dev/raw/pohon/components/accordion.md): A stacked set of collapsible panels.
- [Alert](https://vinicunca.dev/raw/pohon/components/alert.md): A callout to draw the user's attention.
- [App](https://vinicunca.dev/raw/pohon/components/app.md): A wrapper to provide global configuration, toasts and tooltips to your app.
- [AuthForm](https://vinicunca.dev/raw/pohon/components/auth-form.md): A customizable Form to create login, register or password reset forms.
- [Avatar](https://vinicunca.dev/raw/pohon/components/avatar.md): An img element with fallback and Nuxt Image support.
- [AvatarGroup](https://vinicunca.dev/raw/pohon/components/avatar-group.md): Stack multiple avatars in a group.
- [Badge](https://vinicunca.dev/raw/pohon/components/badge.md): A short text to represent a status or a category.
- [Banner](https://vinicunca.dev/raw/pohon/components/banner.md): Display a banner at the top of your website to inform users about important information.
- [BlogPost](https://vinicunca.dev/raw/pohon/components/blog-post.md): A customizable article to display in a blog page.
- [BlogPosts](https://vinicunca.dev/raw/pohon/components/blog-posts.md): Display a list of blog posts in a responsive grid layout.
- [Breadcrumb](https://vinicunca.dev/raw/pohon/components/breadcrumb.md): A hierarchy of links to navigate through a website.
- [Button](https://vinicunca.dev/raw/pohon/components/button.md): A button element that can act as a link or trigger an action.
- [Calendar](https://vinicunca.dev/raw/pohon/components/calendar.md): A calendar component for selecting single dates, multiple dates or date ranges.
- [Card](https://vinicunca.dev/raw/pohon/components/card.md): Display content in a card with a header, body and footer.
- [Carousel](https://vinicunca.dev/raw/pohon/components/carousel.md): A carousel with motion and swipe built using Embla.
- [ChangelogVersion](https://vinicunca.dev/raw/pohon/components/changelog-version.md): A customizable article to display in a changelog.
- [ChangelogVersions](https://vinicunca.dev/raw/pohon/components/changelog-versions.md): Display a list of changelog versions in a timeline.
- [Chart](https://vinicunca.dev/raw/pohon/components/chart.md): A chart to visualize data as lines, areas, bars or a donut.
- [Chat](https://vinicunca.dev/raw/pohon/components/chat.md): Build AI chat interfaces with streaming, reasoning, and tool calling.
- [ChatMessage](https://vinicunca.dev/raw/pohon/components/chat-message.md): Display a chat message with icon, avatar, and actions.
- [ChatMessages](https://vinicunca.dev/raw/pohon/components/chat-messages.md): Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.
- [ChatPalette](https://vinicunca.dev/raw/pohon/components/chat-palette.md): A chat palette to create a chatbot interface inside an overlay.
- [ChatPrompt](https://vinicunca.dev/raw/pohon/components/chat-prompt.md): An enhanced Textarea for submitting prompts in AI chat interfaces.
- [ChatPromptSubmit](https://vinicunca.dev/raw/pohon/components/chat-prompt-submit.md): A Button for submitting chat prompts with automatic status handling.
- [ChatReasoning](https://vinicunca.dev/raw/pohon/components/chat-reasoning.md): Display a collapsible AI reasoning or thinking process.
- [ChatShimmer](https://vinicunca.dev/raw/pohon/components/chat-shimmer.md): Display a text shimmer animation effect.
- [ChatTool](https://vinicunca.dev/raw/pohon/components/chat-tool.md): Display a collapsible AI tool invocation status.
- [Checkbox](https://vinicunca.dev/raw/pohon/components/checkbox.md): An input element to toggle between checked and unchecked states.
- [CheckboxGroup](https://vinicunca.dev/raw/pohon/components/checkbox-group.md): A set of checkboxes to select multiple options from a list.
- [Chip](https://vinicunca.dev/raw/pohon/components/chip.md): An indicator of a numeric value or a state.
- [Collapsible](https://vinicunca.dev/raw/pohon/components/collapsible.md): A collapsible element to toggle visibility of its content.
- [ColorModeAvatar](https://vinicunca.dev/raw/pohon/components/color-mode-avatar.md): An Avatar with a different source for light and dark mode.
- [ColorModeButton](https://vinicunca.dev/raw/pohon/components/color-mode-button.md): A Button to switch between light and dark mode.
- [ColorModeImage](https://vinicunca.dev/raw/pohon/components/color-mode-image.md): An image element with a different source for light and dark mode.
- [ColorModeSelect](https://vinicunca.dev/raw/pohon/components/color-mode-select.md): A Select to switch between system, dark and light mode.
- [ColorModeSwitch](https://vinicunca.dev/raw/pohon/components/color-mode-switch.md): A Switch to toggle between light and dark mode.
- [ColorPicker](https://vinicunca.dev/raw/pohon/components/color-picker.md): A component to select a color.
- [CommandPalette](https://vinicunca.dev/raw/pohon/components/command-palette.md): A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
- [Container](https://vinicunca.dev/raw/pohon/components/container.md): A layout element to center and constrain the width of your content.
- [ContentNavigation](https://vinicunca.dev/raw/pohon/components/content-navigation.md): An accordion-style navigation component for organizing page links.
- [ContentSearch](https://vinicunca.dev/raw/pohon/components/content-search.md): A ready-to-use CommandPalette to add to your documentation.
- [ContentSearchButton](https://vinicunca.dev/raw/pohon/components/content-search-button.md): A pre-styled Button to open the ContentSearch modal.
- [ContentSurround](https://vinicunca.dev/raw/pohon/components/content-surround.md): A pair of prev and next links to navigate between pages.
- [ContentToc](https://vinicunca.dev/raw/pohon/components/content-toc.md): A sticky Table of Contents with automatic active anchor link highlighting.
- [ContextMenu](https://vinicunca.dev/raw/pohon/components/context-menu.md): A menu to display actions when right-clicking on an element.
- [DashboardGroup](https://vinicunca.dev/raw/pohon/components/dashboard-group.md): A fixed layout component that provides context for dashboard components with sidebar state management and persistence.
- [DashboardNavbar](https://vinicunca.dev/raw/pohon/components/dashboard-navbar.md): A responsive navbar to display in a dashboard.
- [DashboardPanel](https://vinicunca.dev/raw/pohon/components/dashboard-panel.md): A resizable panel to display in a dashboard.
- [DashboardResizeHandle](https://vinicunca.dev/raw/pohon/components/dashboard-resize-handle.md): A handle to resize a sidebar or panel.
- [DashboardSearch](https://vinicunca.dev/raw/pohon/components/dashboard-search.md): A ready-to-use CommandPalette to add to your dashboard.
- [DashboardSearchButton](https://vinicunca.dev/raw/pohon/components/dashboard-search-button.md): A pre-styled Button to open the DashboardSearch modal.
- [DashboardSidebar](https://vinicunca.dev/raw/pohon/components/dashboard-sidebar.md): A resizable and collapsible sidebar to display in a dashboard.
- [DashboardSidebarCollapse](https://vinicunca.dev/raw/pohon/components/dashboard-sidebar-collapse.md): A Button to collapse the sidebar on desktop.
- [DashboardSidebarToggle](https://vinicunca.dev/raw/pohon/components/dashboard-sidebar-toggle.md): A Button to toggle the sidebar on mobile.
- [DashboardToolbar](https://vinicunca.dev/raw/pohon/components/dashboard-toolbar.md): A toolbar to display under the navbar in a dashboard.
- [Drawer](https://vinicunca.dev/raw/pohon/components/drawer.md): A drawer that smoothly slides in and out of the screen.
- [Drawer Provider](https://vinicunca.dev/raw/pohon/components/drawer-provider.md): A wrapper that coordinates drawers and optionally scales the page behind them.
- [DropdownMenu](https://vinicunca.dev/raw/pohon/components/dropdown-menu.md): A menu to display actions when clicking on an element.
- [Editor](https://vinicunca.dev/raw/pohon/components/editor.md): A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.
- [EditorDragHandle](https://vinicunca.dev/raw/pohon/components/editor-drag-handle.md): A draggable handle for reordering and selecting blocks in the editor.
- [EditorEmojiMenu](https://vinicunca.dev/raw/pohon/components/editor-emoji-menu.md): An emoji picker menu that displays emoji suggestions when typing the : character in the editor.
- [EditorMentionMenu](https://vinicunca.dev/raw/pohon/components/editor-mention-menu.md): A mention menu that displays user suggestions when typing a trigger character in the editor.
- [EditorSuggestionMenu](https://vinicunca.dev/raw/pohon/components/editor-suggestion-menu.md): A command menu that displays formatting and action suggestions when typing the / character in the editor.
- [EditorToolbar](https://vinicunca.dev/raw/pohon/components/editor-toolbar.md): A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
- [Empty](https://vinicunca.dev/raw/pohon/components/empty.md): A component to display an empty state.
- [Error](https://vinicunca.dev/raw/pohon/components/error.md): A pre-built error component with NuxtError support.
- [FieldGroup](https://vinicunca.dev/raw/pohon/components/field-group.md): Group multiple button-like elements together.
- [FileUpload](https://vinicunca.dev/raw/pohon/components/file-upload.md): An input element to upload files.
- [Footer](https://vinicunca.dev/raw/pohon/components/footer.md): A responsive footer for your site links and legal notices.
- [FooterColumns](https://vinicunca.dev/raw/pohon/components/footer-columns.md): A list of links as columns to display in your Footer.
- [Form](https://vinicunca.dev/raw/pohon/components/form.md): A form component with built-in validation and submission handling.
- [FormField](https://vinicunca.dev/raw/pohon/components/form-field.md): A wrapper for form elements that provides validation and error handling.
- [Header](https://vinicunca.dev/raw/pohon/components/header.md): A responsive header for your site navigation.
- [Icon](https://vinicunca.dev/raw/pohon/components/icon.md): A component to display any icon from Iconify or another component.
- [Input](https://vinicunca.dev/raw/pohon/components/input.md): An input element to enter text.
- [InputDate](https://vinicunca.dev/raw/pohon/components/input-date.md): An input component for date selection.
- [InputMenu](https://vinicunca.dev/raw/pohon/components/input-menu.md): An autocomplete input with real-time suggestions.
- [InputNumber](https://vinicunca.dev/raw/pohon/components/input-number.md): An input for numerical values with a customizable range.
- [InputRating](https://vinicunca.dev/raw/pohon/components/input-rating.md): A component to display and collect ratings from users.
- [InputTags](https://vinicunca.dev/raw/pohon/components/input-tags.md): An input element that displays interactive tags.
- [InputTime](https://vinicunca.dev/raw/pohon/components/input-time.md): An input for selecting a time.
- [Kbd](https://vinicunca.dev/raw/pohon/components/kbd.md): A kbd element to display a keyboard key.
- [Link](https://vinicunca.dev/raw/pohon/components/link.md): A wrapper around NuxtLink with extra props.
- [Listbox](https://vinicunca.dev/raw/pohon/components/listbox.md): A selectable list of items with search, virtualization and rich item rendering.
- [LocaleSelect](https://vinicunca.dev/raw/pohon/components/locale-select.md): A Select to switch between locales.
- [Main](https://vinicunca.dev/raw/pohon/components/main.md): A main element that fills the available viewport height.
- [Marquee](https://vinicunca.dev/raw/pohon/components/marquee.md): A component to create infinite scrolling content.
- [Modal](https://vinicunca.dev/raw/pohon/components/modal.md): A dialog window that can be used to display a message or request user input.
- [NavigationMenu](https://vinicunca.dev/raw/pohon/components/navigation-menu.md): A list of links that can be displayed horizontally or vertically.
- [Page](https://vinicunca.dev/raw/pohon/components/page.md): A grid layout for your pages with left and right columns.
- [PageAnchors](https://vinicunca.dev/raw/pohon/components/page-anchors.md): A list of anchors to be displayed in the page.
- [PageAside](https://vinicunca.dev/raw/pohon/components/page-aside.md): A sticky aside to display your page navigation.
- [PageBody](https://vinicunca.dev/raw/pohon/components/page-body.md): The main content of your page.
- [PageCard](https://vinicunca.dev/raw/pohon/components/page-card.md): A pre-styled card component that displays a title, description and optional link.
- [PageColumns](https://vinicunca.dev/raw/pohon/components/page-columns.md): A responsive multi-column layout system for organizing content side-by-side.
- [PageCTA](https://vinicunca.dev/raw/pohon/components/page-cta.md): A call to action section to display in your pages.
- [PageFeature](https://vinicunca.dev/raw/pohon/components/page-feature.md): A component to showcase key features of your application.
- [PageGrid](https://vinicunca.dev/raw/pohon/components/page-grid.md): A responsive grid system for displaying content in a flexible layout.
- [PageHeader](https://vinicunca.dev/raw/pohon/components/page-header.md): A responsive header for your pages.
- [PageHero](https://vinicunca.dev/raw/pohon/components/page-hero.md): A responsive hero for your pages.
- [PageLinks](https://vinicunca.dev/raw/pohon/components/page-links.md): A list of links to be displayed in the page.
- [PageList](https://vinicunca.dev/raw/pohon/components/page-list.md): A vertical list layout for displaying content in a stacked format.
- [PageLogos](https://vinicunca.dev/raw/pohon/components/page-logos.md): A list of logos or images to display on your pages.
- [PageSection](https://vinicunca.dev/raw/pohon/components/page-section.md): A responsive section for your pages.
- [Pagination](https://vinicunca.dev/raw/pohon/components/pagination.md): A list of buttons or links to navigate through pages.
- [PinInput](https://vinicunca.dev/raw/pohon/components/pin-input.md): An input element to enter a pin.
- [Popover](https://vinicunca.dev/raw/pohon/components/popover.md): A non-modal dialog that floats around a trigger element.
- [PricingPlan](https://vinicunca.dev/raw/pohon/components/pricing-plan.md): A customizable pricing plan to display in a pricing page.
- [PricingPlans](https://vinicunca.dev/raw/pohon/components/pricing-plans.md): Display a list of pricing plans in a responsive grid layout.
- [PricingTable](https://vinicunca.dev/raw/pohon/components/pricing-table.md): A responsive pricing table component that displays tiered pricing plans with feature comparisons.
- [Progress](https://vinicunca.dev/raw/pohon/components/progress.md): An indicator showing the progress of a task.
- [ProgressGroup](https://vinicunca.dev/raw/pohon/components/progress-group.md): A progress bar split into multiple segments that add up to a total.
- [RadioGroup](https://vinicunca.dev/raw/pohon/components/radio-group.md): A set of radio buttons to select a single option from a list.
- [ScrollArea](https://vinicunca.dev/raw/pohon/components/scroll-area.md): A flexible scroll container with virtualization support.
- [Select](https://vinicunca.dev/raw/pohon/components/select.md): A select element to choose from a list of options.
- [SelectMenu](https://vinicunca.dev/raw/pohon/components/select-menu.md): An advanced searchable select element.
- [Separator](https://vinicunca.dev/raw/pohon/components/separator.md): Separates content horizontally or vertically.
- [Sidebar](https://vinicunca.dev/raw/pohon/components/sidebar.md): A collapsible sidebar with multiple visual variants.
- [Skeleton](https://vinicunca.dev/raw/pohon/components/skeleton.md): A placeholder to show while content is loading.
- [Slideover](https://vinicunca.dev/raw/pohon/components/slideover.md): A dialog that slides in from any side of the screen.
- [Slider](https://vinicunca.dev/raw/pohon/components/slider.md): An input to select a numeric value within a range.
- [Splitter](https://vinicunca.dev/raw/pohon/components/splitter.md): A set of resizable panels separated by draggable handles.
- [Stepper](https://vinicunca.dev/raw/pohon/components/stepper.md): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](https://vinicunca.dev/raw/pohon/components/switch.md): A control that toggles between two states.
- [Table](https://vinicunca.dev/raw/pohon/components/table.md): A responsive table element to display data in rows and columns.
- [Tabs](https://vinicunca.dev/raw/pohon/components/tabs.md): A set of tab panels that are displayed one at a time.
- [Textarea](https://vinicunca.dev/raw/pohon/components/textarea.md): A textarea element to input multi-line text.
- [Theme](https://vinicunca.dev/raw/pohon/components/theme.md): A headless component to theme child components.
- [Timeline](https://vinicunca.dev/raw/pohon/components/timeline.md): A component that displays a sequence of events with dates, titles, icons or avatars.
- [Toast](https://vinicunca.dev/raw/pohon/components/toast.md): A succinct message to provide information or feedback to the user.
- [Tooltip](https://vinicunca.dev/raw/pohon/components/tooltip.md): A popup that reveals information when hovering over an element.
- [Tree](https://vinicunca.dev/raw/pohon/components/tree.md): A tree view component to display and interact with hierarchical data structures.
- [User](https://vinicunca.dev/raw/pohon/components/user.md): Display user information with name, description and avatar.
- [defineLocale](https://vinicunca.dev/raw/pohon/composables/define-locale.md): A utility to create a custom locale for your app.
- [defineShortcuts](https://vinicunca.dev/raw/pohon/composables/define-shortcuts.md): A composable to define keyboard shortcuts in your app.
- [extendLocale](https://vinicunca.dev/raw/pohon/composables/extend-locale.md): A utility to extend an existing locale with custom translations.
- [extractShortcuts](https://vinicunca.dev/raw/pohon/composables/extract-shortcuts.md): A utility to extract keyboard shortcuts from menu items.
- [useOverlay](https://vinicunca.dev/raw/pohon/composables/use-overlay.md): A composable to programmatically control overlays.
- [useScrollShadow](https://vinicunca.dev/raw/pohon/composables/use-scroll-shadow.md): A composable to apply scroll shadow effects on any scrollable element.
- [useToast](https://vinicunca.dev/raw/pohon/composables/use-toast.md): A composable to display toast notifications in your app.
- [useTour](https://vinicunca.dev/raw/pohon/composables/use-tour.md): A composable to build guided tours by re-anchoring a single Popover across steps.
- [Introduction](https://vinicunca.dev/raw/pohon/getting-started.md): Pohon UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, UnoCSS components for building modern web applications.
- [LLMs.txt](https://vinicunca.dev/raw/pohon/getting-started/ai/llms-txt.md): How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Pohon UI components, theming, and best practices.
- [Skills](https://vinicunca.dev/raw/pohon/getting-started/ai/skills.md): Install Pohon UI skills to give AI coding agents deep knowledge of components, theming, and best practices.
- [Contribution](https://vinicunca.dev/raw/pohon/getting-started/contribution.md): A comprehensive guide on contributing to Pohon UI, including project structure, development workflow, and best practices.
- [Installation](https://vinicunca.dev/raw/pohon/getting-started/installation/nuxt.md): Learn how to install and configure Pohon UI in your Nuxt application.
- [Installation](https://vinicunca.dev/raw/pohon/getting-started/installation/vue.md): Learn how to install and configure Pohon UI in your Vue application, compatible with both plain Vite and Inertia.
- [Color Mode](https://vinicunca.dev/raw/pohon/getting-started/integrations/color-mode/nuxt.md): Pohon UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.
- [Color Mode](https://vinicunca.dev/raw/pohon/getting-started/integrations/color-mode/vue.md): Pohon UI integrates with VueUse to allow for easy switching between light and dark themes.
- [Content](https://vinicunca.dev/raw/pohon/getting-started/integrations/content.md): Pohon UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.
- [Fonts](https://vinicunca.dev/raw/pohon/getting-started/integrations/fonts.md): Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
- [Internationalization (i18n)](https://vinicunca.dev/raw/pohon/getting-started/integrations/i18n/nuxt.md): Pohon UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.
- [Internationalization (i18n)](https://vinicunca.dev/raw/pohon/getting-started/integrations/i18n/vue.md): Pohon UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.
- [Icons](https://vinicunca.dev/raw/pohon/getting-started/integrations/icons/nuxt.md): Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
- [Icons](https://vinicunca.dev/raw/pohon/getting-started/integrations/icons/vue.md): Pohon UI integrates with Iconify to access over 200,000+ icons.
- [SSR](https://vinicunca.dev/raw/pohon/getting-started/integrations/ssr.md): Pohon UI has first-party support for Vue SSR. This guide will help you have it fully enabled.
- [Customize components](https://vinicunca.dev/raw/pohon/getting-started/theme/components.md): Learn how to customize Pohon UI components with the UnoCSS Variants API for advanced, flexible, and maintainable styling.
- [CSS Variables](https://vinicunca.dev/raw/pohon/getting-started/theme/css-variables.md): Pohon UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.
- [Design System](https://vinicunca.dev/raw/pohon/getting-started/theme/design-system.md): Pohon UI's design system uses UnoCSS for simple theming and easy customization.
- [Introduction](https://vinicunca.dev/raw/pohon/typography.md): Beautiful typography components and utilities to style your content with Pohon UI.
- [ProseAccordion](https://vinicunca.dev/raw/pohon/typography/accordion.md): Create expandable content sections for better information organization.
- [ProseBadge](https://vinicunca.dev/raw/pohon/typography/badge.md): Display version numbers, status labels, and tags within your content.
- [ProseCallout](https://vinicunca.dev/raw/pohon/typography/callout.md): Highlight important information with eye-catching colored boxes and icons.
- [ProseCard](https://vinicunca.dev/raw/pohon/typography/card.md): Create highlighted content blocks with optional links and navigation.
- [ProseCardGroup](https://vinicunca.dev/raw/pohon/typography/card-group.md): Organize multiple cards in responsive grid layouts for better content presentation.
- [Code](https://vinicunca.dev/raw/pohon/typography/code.md): Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.
- [ProseCodeCollapse](https://vinicunca.dev/raw/pohon/typography/code-collapse.md): Make long code blocks collapsible to save space and improve readability.
- [ProseCodeGroup](https://vinicunca.dev/raw/pohon/typography/code-group.md): Group multiple code examples in tabbed interfaces for easy comparison.
- [ProseCodePreview](https://vinicunca.dev/raw/pohon/typography/code-preview.md): Display code examples with a preview and their source for clearer documentation.
- [ProseCodeTree](https://vinicunca.dev/raw/pohon/typography/code-tree.md): Visualize file and folder structures with syntax-highlighted code.
- [ProseCollapsible](https://vinicunca.dev/raw/pohon/typography/collapsible.md): Toggle content visibility with smooth expand and collapse animations.
- [ProseField](https://vinicunca.dev/raw/pohon/typography/field.md): Document API parameters, props, and configuration options clearly.
- [ProseFieldGroup](https://vinicunca.dev/raw/pohon/typography/field-group.md): Group related fields together for comprehensive API documentation.
- [Headers and text](https://vinicunca.dev/raw/pohon/typography/headers-and-text.md): Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.
- [ProseIcon](https://vinicunca.dev/raw/pohon/typography/icon.md): Display icons from popular icon libraries to enhance your content.
- [Images and embeds](https://vinicunca.dev/raw/pohon/typography/images-and-embeds.md): Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.
- [ProseKbd](https://vinicunca.dev/raw/pohon/typography/kbd.md): Display keyboard shortcuts and key combinations with proper styling.
- [Lists and tables](https://vinicunca.dev/raw/pohon/typography/lists-and-tables.md): Organize information with styled lists and responsive tables for clear, consistent readability.
- [ProsePrompt](https://vinicunca.dev/raw/pohon/typography/prompt.md): Display pre-built AI prompts with one-click copy and IDE integration.
- [ProseSteps](https://vinicunca.dev/raw/pohon/typography/steps.md): Transform headings into numbered step-by-step guides and tutorials.
- [ProseTabs](https://vinicunca.dev/raw/pohon/typography/tabs.md): Organize related content in interactive tabbed interfaces.

## Taman

A full-stack Vue admin template with oRPC, better-auth and Cloudflare.

- [Contributing](https://vinicunca.dev/raw/taman/contributing.md): How to work on the Taman source repository — releases, commits, and the template smoke test.
- [Commit conventions](https://vinicunca.dev/raw/taman/contributing/commit-conventions.md): Conventional commits with workspace-aware scopes via @vinicunca/commitlint-config.
- [Releases](https://vinicunca.dev/raw/taman/contributing/releases.md): Version published Taman packages with changesets and GitHub Actions OIDC publishing.
- [Template smoke test](https://vinicunca.dev/raw/taman/contributing/template-smoke-test.md): Pack published packages, generate a project from this git checkout, and prove it installs, builds, type-checks, tests, and lints.
- [Introduction](https://vinicunca.dev/raw/taman/getting-started.md): Taman is a full-stack Vue admin template you own after generate — published @vinicunca packages keep receiving updates.
- [Architecture](https://vinicunca.dev/raw/taman/getting-started/architecture.md): How a browser request reaches Postgres, how realtime fans out, and how email is queued.
- [Create a project](https://vinicunca.dev/raw/taman/getting-started/create-a-project.md): Scaffold a Taman monorepo with pnpm create taman. The generated code is yours; only @vinicunca packages keep receiving updates.
- [Environment variables](https://vinicunca.dev/raw/taman/getting-started/environment-variables.md): Every env var Taman reads, where it is defined, and whether you must set it.
- [Project structure](https://vinicunca.dev/raw/taman/getting-started/project-structure.md): Where code lives in a generated Taman monorepo, and which packages stay on npm.
- [Running locally](https://vinicunca.dev/raw/taman/getting-started/running-locally.md): Start Postgres, push the schema, seed a dev admin, and run the API and web apps.
- [Scripts](https://vinicunca.dev/raw/taman/getting-started/scripts.md): Root and app scripts you actually run while developing a Taman project.
- [Guides](https://vinicunca.dev/raw/taman/guides.md): Task-oriented walkthroughs for adding features, auth, forms, email, and deployment in a Taman project.
- [Adding a feature](https://vinicunca.dev/raw/taman/guides/adding-a-feature.md): Copy the todo resource through rbac, schema, contract, repo/service, RPC, routes, views, and i18n.
- [API and realtime](https://vinicunca.dev/raw/taman/guides/api-and-realtime.md): Typed oRPC calls from the Vue app, TanStack Query helpers, live streams, and the REST client.
- [Authentication and organizations](https://vinicunca.dev/raw/taman/guides/authentication-and-organizations.md): better-auth on the API, the Vue client, route guards, and the current UI gaps.
- [Database and migrations](https://vinicunca.dev/raw/taman/guides/database-and-migrations.md): Drizzle push for local dev, migrate for UAT/prod, generate, and the better-auth schema output path.
- [Deployment](https://vinicunca.dev/raw/taman/guides/deployment.md): Deploy the Nitro API as a Cloudflare Worker and the Vue app as static files. Marked where Cloudflare UI steps are inferred.
- [Dialogs and alerts](https://vinicunca.dev/raw/taman/guides/dialogs-and-alerts.md): Programmatic dialogs, drawers, and alert/confirm/prompt overlays from @vinicunca/taman-ui/popup.
- [Email](https://vinicunca.dev/raw/taman/guides/email.md): Maizzle templates, inline vs Cloudflare Queue delivery, and the console sender in development.
- [Forms](https://vinicunca.dev/raw/taman/guides/forms.md): Schema-driven Vue forms with useTamanForm, codecs, and progressive validation — from @vinicunca/taman-ui/form.
- [Internationalization](https://vinicunca.dev/raw/taman/guides/i18n.md): en-US and id-ID message files, $t, and how to add a locale in Taman.
- [Permissions](https://vinicunca.dev/raw/taman/guides/permissions.md): RBAC statements, route authority, v-access, and useAccess in a Taman app.
- [Preferences, layouts, and theming](https://vinicunca.dev/raw/taman/guides/preferences-layouts-theming.md): initPreferences, layout modes, Pohon unstyled theme, and UnoCSS setup for Taman UI.
- [Testing](https://vinicunca.dev/raw/taman/guides/testing.md): vitest for units, Playwright for the admin SPA, and the template smoke script in CI.
- [Packages](https://vinicunca.dev/raw/taman/packages.md): Published npm packages that keep receiving updates after you generate a Taman project.
- [create-taman](https://vinicunca.dev/raw/taman/packages/create-taman.md): CLI that downloads vinicunca/taman, applies template.manifest.ts, and writes a project you own.
- [@vinicunca/request](https://vinicunca.dev/raw/taman/packages/request.md): Typed oRPC and ofetch REST clients, each with TanStack Query helpers.
- [@vinicunca/taman-core](https://vinicunca.dev/raw/taman/packages/taman-core.md): Foundation layer — utils, constants, color, cache, store, typings, composables, and preferences.
- [@vinicunca/taman-ui](https://vinicunca.dev/raw/taman/packages/taman-ui.md): Unstyled Vue admin components on pohon-ui — base widgets, popup, form, layout, menu, and tabs.
- [Tooling packages](https://vinicunca.dev/raw/taman/packages/tooling.md): @vinicunca/vite-config, tsconfig, node-utils, and commitlint-config — published 1.0.1 from the Taman repo.

## Perkakas

A typed, data-first and data-last utility library for TypeScript.

- [Functions](https://vinicunca.dev/raw/perkakas/functions.md): Reference for every @vinicunca/perkakas export, grouped by category, generated from the package JSDoc.
- [Introduction](https://vinicunca.dev/raw/perkakas/getting-started.md): Install @vinicunca/perkakas, a typed utility library with data-first and data-last APIs, pipes, and lazy evaluation.
- [Migrate](https://vinicunca.dev/raw/perkakas/migrate.md): Move to @vinicunca/perkakas from Remeda, Lodash, Ramda, or Just.
- [Coming from Just](https://vinicunca.dev/raw/perkakas/migrate/just.md): Map angus-c/just helpers to @vinicunca/perkakas, with notes where the APIs differ.
- [Coming from Lodash](https://vinicunca.dev/raw/perkakas/migrate/lodash.md): Map Lodash functions to @vinicunca/perkakas, with notes where the APIs differ.
- [Coming from Ramda](https://vinicunca.dev/raw/perkakas/migrate/ramda.md): Map Ramda functions to @vinicunca/perkakas, with notes where the APIs differ.
- [Coming from Remeda](https://vinicunca.dev/raw/perkakas/migrate/remeda.md): Swap remeda for @vinicunca/perkakas, rename purry to curry, and pick up the extras Perkakas ships.

## ESLint Config

Vinicunca's flat ESLint config with formatting, TypeScript, Vue and more.

- [Overview](https://vinicunca.dev/raw/eslint/configuration.md): How the vinicuncaESLint factory combines its options, your own flat configs and the composer API into one ESLint config.
- [Formatters](https://vinicunca.dev/raw/eslint/configuration/formatters.md): Format CSS, HTML, XML, SVG, Markdown, GraphQL and Astro with Prettier or dprint through ESLint.
- [Frameworks](https://vinicunca.dev/raw/eslint/configuration/frameworks.md): Enable Vue, React, Next.js, Svelte, Solid, Astro or UnoCSS in vinicuncaESLint.
- [Optional configs](https://vinicunca.dev/raw/eslint/configuration/optional-configs.md): Anti-slop, pnpm workspace, e18e, regexp and command integrations.
- [Options](https://vinicunca.dev/raw/eslint/configuration/options.md): Reference of every option accepted by the first argument of vinicuncaESLint, with types and defaults.
- [Rules and renaming](https://vinicunca.dev/raw/eslint/configuration/rules-overrides.md): Override rules, rename plugin prefixes and target generated configs by name.
- [TypeScript](https://vinicunca.dev/raw/eslint/configuration/typescript.md): TypeScript parsing, strict rules, type-aware linting and erasable-syntax-only mode.
- [Introduction](https://vinicunca.dev/raw/eslint/getting-started.md): Install @vinicunca/eslint-config, a flat ESLint config that lints and formats JavaScript, TypeScript, Vue and more in one call.
- [Guides](https://vinicunca.dev/raw/eslint/guides.md): Differences from antfu/eslint-config, upgrading to v6, migrating from Prettier, the config inspector and FAQ.
- [Config inspector](https://vinicunca.dev/raw/eslint/guides/config-inspector.md): Inspect every vinicunca/* config item and which rules apply to a file.
- [Differences from antfu/eslint-config](https://vinicunca.dev/raw/eslint/guides/differences-from-antfu.md): Explicit list of how @vinicunca/eslint-config diverges from its antfu/eslint-config upstream.
- [FAQ](https://vinicunca.dev/raw/eslint/guides/faq.md): Common issues with the named export, style defaults, optional plugins and editors.
- [Migrating](https://vinicunca.dev/raw/eslint/guides/migrating.md): Upgrade from v5 to v6, or switch from Prettier or another ESLint config to @vinicunca/eslint-config.

## UnoCSS Preset

The Vinicunca UnoCSS preset: fluid sizing, animations, scrollbars and more.

- [Animations](https://vinicunca.dev/raw/unocss-preset/animations.md): Enter and exit animations with fade, zoom, spin, and slide, inspired by tailwindcss-animate.
- [Animation properties](https://vinicunca.dev/raw/unocss-preset/animations/animation-properties.md): Wind4 utilities that set duration, delay, easing, and other animation properties.
- [Fade Animations](https://vinicunca.dev/raw/unocss-preset/animations/fade.md): Set enter and exit opacity with fade-in and fade-out utilities.
- [Interactive docs](https://vinicunca.dev/raw/unocss-preset/animations/interactive-documentation.md): Try the animation utilities in the UnoCSS playground and interactive docs.
- [Slide Animations](https://vinicunca.dev/raw/unocss-preset/animations/slide.md): Set enter and exit translation with slide-in and slide-out utilities.
- [Spin Animations](https://vinicunca.dev/raw/unocss-preset/animations/spin.md): Set enter and exit rotation with spin-in and spin-out utilities.
- [Zoom Animations](https://vinicunca.dev/raw/unocss-preset/animations/zoom.md): Set enter and exit scale with zoom-in and zoom-out utilities.
- [Fluid](https://vinicunca.dev/raw/unocss-preset/fluid.md): Scale type, spacing, and layout fluidly between a minimum and maximum viewport without breakpoints.
- [Examples](https://vinicunca.dev/raw/unocss-preset/fluid/examples.md): Examples of fluid utility classes.
- [Utilities](https://vinicunca.dev/raw/unocss-preset/fluid/utilities.md): Built-in fluid utilities and the CSS properties they set.
- [Getting Started](https://vinicunca.dev/raw/unocss-preset/getting-started.md): Install @vinicunca/unocss-preset, an opinionated UnoCSS preset with wind4, icons, fluid sizing, enter/exit animations, and optional scrollbars and Magic CSS.
- [Options](https://vinicunca.dev/raw/unocss-preset/getting-started/options.md): Reference of every option accepted by presetVinicunca, with types and the defaults from v2.4.0.
- [Theme](https://vinicunca.dev/raw/unocss-preset/getting-started/theme.md): Add keyframes and Tailwind-style animation strings through extendedTheme.
- [Magic CSS](https://vinicunca.dev/raw/unocss-preset/magic-css.md): Opt-in Magic Animate keyframes as UnoCSS animate-* utilities, with animation-fill-mode both.
- [Scrollbar](https://vinicunca.dev/raw/unocss-preset/scrollbar.md): Opt-in utilities for styling scrollbars with webkit pseudo-elements and optional Firefox properties.

## UnoCSS Variants

Variants, slots and compound styles for UnoCSS, a port of Tailwind Variants.

- [API reference](https://vinicunca.dev/raw/unocss-variants/api.md): Reference for uv, cn, VariantProps, and the options object. Verified against unocss-variants 1.5.0 source and the published dist.
- [Concepts](https://vinicunca.dev/raw/unocss-variants/concepts.md): Variants, slots, overrides, composition, layers, the cn helper, and TypeScript utilities.
- [cn utility](https://vinicunca.dev/raw/unocss-variants/concepts/cn.md): Join class names without merging conflicting UnoCSS utilities. Source exports cn; npm 1.5.0 currently ships cnBase instead.
- [Composing components](https://vinicunca.dev/raw/unocss-variants/concepts/composing-components.md): Reuse recipes with extend, or concatenate a parent result into a new base. Classes from both sides are kept.
- [Layers and conflict resolution](https://vinicunca.dev/raw/unocss-variants/concepts/layers.md): uv never merges utilities. Put a uv layer in UnoCSS and prefix classes that must win with uno-layer-uv.
- [Overriding styles](https://vinicunca.dev/raw/unocss-variants/concepts/overriding-styles.md): Append extra classes at the call site with class or className. Nothing is dropped from the recipe.
- [Slots](https://vinicunca.dev/raw/unocss-variants/concepts/slots.md): Split a component into named parts, style them with variants, and share classes through compound slots.
- [TypeScript](https://vinicunca.dev/raw/unocss-variants/concepts/typescript.md): Infer variant props with VariantProps, tighten required keys, and type slotted return values.
- [Variants](https://vinicunca.dev/raw/unocss-variants/concepts/variants.md): Create multiple versions of a component with variant axes, boolean flags, compound rules, and defaults.
- [Introduction](https://vinicunca.dev/raw/unocss-variants/getting-started.md): First-class variants, slots, and compound styles for UnoCSS — a port of Tailwind Variants that leaves conflict resolution to the CSS cascade.
- [Framework usage](https://vinicunca.dev/raw/unocss-variants/getting-started/frameworks.md): Use the class string from uv() with Vue, React, Svelte, Solid, Angular, or vanilla DOM.
- [Installation](https://vinicunca.dev/raw/unocss-variants/getting-started/installation.md): Install unocss-variants, configure an UnoCSS uv layer, and create your first recipe.
- [Guides](https://vinicunca.dev/raw/unocss-variants/guides.md): Migrate from Tailwind Variants and run the package benchmark script.
- [Benchmark](https://vinicunca.dev/raw/unocss-variants/guides/benchmark.md): How the unocss-variants repository is wired to time uv. No throughput numbers are published here.
- [Migrating from Tailwind Variants](https://vinicunca.dev/raw/unocss-variants/guides/migration.md): Map tv to uv, drop merge config and lite, and stop expecting conflicting classes to disappear.

## Windows Dev Setup

Set up a web development environment on Windows with WSL.

- [Extras](https://vinicunca.dev/raw/windows-dev/extras.md): Commit message conventions and fixes for common WSL problems after the Windows setup guide.
- [Commit messages](https://vinicunca.dev/raw/windows-dev/extras/git-commits.md): Use Conventional Commits so changelogs, version bumps and commitlint stay consistent, with a short attributed summary of the spec.
- [Troubleshooting](https://vinicunca.dev/raw/windows-dev/extras/troubleshooting.md): Fixes for WSL that will not start, slow installs, localhost mismatches, and a missing code command.
- [Overview](https://vinicunca.dev/raw/windows-dev/guide.md): Set up a fast, Linux-based web development environment on Windows 11 with WSL, zsh, Node.js, pnpm and VS Code.
- [Git](https://vinicunca.dev/raw/windows-dev/guide/git.md): Install Git in WSL, set your identity and line endings, and sign in with Git Credential Manager, the GitHub CLI, or an SSH key.
- [Node.js](https://vinicunca.dev/raw/windows-dev/guide/nodejs.md): Install fnm inside WSL and use it to install Node.js LTS, with automatic version switching per project.
- [Package Managers](https://vinicunca.dev/raw/windows-dev/guide/package-managers.md): Open an administrator shell, then install and update Windows apps from the command line with WinGet or Chocolatey.
- [pnpm](https://vinicunca.dev/raw/windows-dev/guide/pnpm.md): Install pnpm in WSL with its standalone script and use it as your Node.js package manager.
- [Windows Terminal](https://vinicunca.dev/raw/windows-dev/guide/terminal.md): Install Windows Terminal, make it your default terminal and have it open straight into your Linux home directory.
- [VS Code](https://vinicunca.dev/raw/windows-dev/guide/vscode.md): Connect Visual Studio Code to WSL, install the extensions this stack needs, and format with ESLint instead of Prettier.
- [WSL](https://vinicunca.dev/raw/windows-dev/guide/wsl.md): Install Ubuntu on WSL 2, create your Linux user, and tune memory, networking and systemd for web development.
- [zsh](https://vinicunca.dev/raw/windows-dev/guide/zsh.md): Replace bash with zsh as your login shell and add Oh My Zsh, autosuggestions and syntax highlighting.

## Documentation Sets

- [Vinicunca Full Documentation](https://vinicunca.dev/llms-full.txt): The full documentation for every @vinicunca package, as Markdown.

## Notes

- The content is generated from the same source as the documentation pages.