\n ๐ DOCS\n \n โญ GITHUB\n \n ๐ฆ NPM\n
\n\n## โจ Features\n\n- ๐ฏ Built for Nuxt 4 and Vue 3\n- ๐จ Tailwind CSS v4 tokens, CSS variables and dark mode support\n- ๐งฉ Copy components directly into your project\n- ๐ง TypeScript-first component APIs\n- ๐ i18n-ready documentation patterns\n- ๐ Nuxt Color Mode examples\n- ๐ SEO, favicon, sitemap and robots.txt guide files\n- ๐งฐ Small CLI with npm, pnpm, yarn and bun command output\n- ๐ฆ No hidden component runtime dependency\n\n## ๐ Quick Start\n\nAdd one or more components from your project root:\n\n```bash\nnpx alixan-ui-nuxt add button icon-button input\n```\n\nThis copies the component and required utilities into your app:\n\n```txt\ncomponents/ui/button/Button.vue\nutils/cn.ts\n```\n\nThen use it in any Vue template:\n\n```vue\n\n\t\n\n```\n\n## ๐ฆ Installation Setup\n\nAlixan UI components expect Tailwind CSS and the shared CSS tokens from the documentation.\n\nInstall Tailwind CSS:\n\n```bash\nnpm install tailwindcss @tailwindcss/vite -D\n```\n\nRegister Tailwind in `nuxt.config.ts`:\n\n```ts\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default defineNuxtConfig({\n\tcss: ['~/assets/css/tailwind.css'],\n\tvite: {\n\t\tplugins: [tailwindcss()],\n\t},\n});\n```\n\nUse the documented `app/assets/css/tailwind.css` file for theme tokens, color variables, base styles and shared utilities.\n\n## ๐งฉ Components\n\nEvery registry item is source code that becomes part of your application. Start with\nthe smallest component that matches the interaction, then compose larger flows from\nthe same tokens and states.\n\n### Actions and navigation\n\n| Component | Use it for |\n| --- | --- |\n| `button` | Primary, secondary and destructive text actions. Choose one visually dominant action per surface and use quieter variants for alternatives. |\n| `icon-button` | Compact actions whose icon is universally recognizable. Always provide an accessible label and use a text Button when the meaning could be ambiguous. |\n| `text-link` | Inline navigation inside paragraphs, hints and documentation. It preserves reading flow without adding button padding. |\n| `app-bar` | Page-level navigation and actions. Compact keeps a stable 56px bar; Silver adds a large title that collapses while its own content container scrolls. |\n| `sidebar` | Responsive application shells with persistent desktop navigation, a mobile overlay and an independently scrolling router outlet. |\n| `bottom-navigation-bar` | Three to five primary mobile destinations. Keep it fixed below the router outlet and use the selected destination as the Compact App Bar title. |\n| `tabs` | Switching between closely related views without changing the page hierarchy. Avoid tabs for sequential workflows. |\n\n### Forms and selection\n\n| Component | Use it for |\n| --- | --- |\n| `input` | General text entry with floating labels, masks and validation. Create an `XControl` for every field to own its value and form state. |\n| `email-input` | Email entry with the Input interaction model and email-format validation. |\n| `password-input` | Secret text entry with a built-in visibility action and optional length rules. |\n| `phone-input` | Kazakhstan-friendly phone entry with a visible country prefix and formatted national number. |\n| `username-input` | Account names restricted to letters and numbers with sensible default length limits. |\n| `iin-input` | Kazakhstan IIN entry with numeric masking and a 12-digit validation rule. |\n| `otp` | Short one-time verification codes split into predictable character cells. Use it only for codes, not passwords or recovery phrases. |\n| `checkbox` | Independent boolean choices or selection of several values from a group. |\n| `switch` | Settings that take effect immediately when turned on or off. Use Checkbox when a value is submitted as part of a form. |\n| `select` | Choosing one predefined option when displaying every option inline would consume too much space. |\n| `autocomplete` | Selecting one predefined option while filtering a longer list by text. It is not a free-form Input. |\n| `calendar` | Selecting a day or date range with month/year navigation and common range presets. |\n| `search` | Search queries that benefit from debounce, a search affordance and a clear action. |\n\n### Content and data display\n\n| Component | Use it for |\n| --- | --- |\n| `accordion` | Progressive disclosure of secondary information. Keep labels descriptive so users can predict the hidden content. |\n| `avatar` | A user image with an initials fallback. Supply a meaningful name even when an image URL is available. |\n| `card` | A self-contained content preview with media, supporting information and one main action. |\n| `chip` | Compact filters, selected values and removable metadata. Do not use it as the primary page action. |\n| `divider` | A subtle boundary between related content groups when spacing alone is insufficient. |\n| `info-box` | Supporting notes, constraints and guidance that should remain visible without interrupting the flow. |\n| `island` | A grouped content surface with an optional inside or outside header. Use it to establish page rhythm, not to wrap every element. |\n| `list` | Repeated rows with consistent leading, content and trailing regions, including interactive rows and trailing actions. |\n| `status` | Short semantic states such as success, warning, information and error. Keep labels concise. |\n| `table` | Structured records whose columns need explicit labels and value mapping. Prefer List for narrow mobile summaries. |\n| `tooltip` | Brief clarification for icon actions or unfamiliar controls. Essential information must remain visible outside a tooltip. |\n\n### Feedback and overlays\n\n| Component | Use it for |\n| --- | --- |\n| `dialog` | Focused forms and decisions that must be completed or dismissed before returning to the page. |\n| `alert-dialog` | Blocking information with one acknowledgement action. It should not ask the user to make a choice. |\n| `confirm-dialog` | Explicit confirmation of consequential actions with clear cancel and submit labels. |\n| `drawer` | Secondary workflows and supporting details that benefit from more vertical space, especially on mobile. |\n| `dropdown-menu` | A compact set of contextual actions anchored to a trigger. Keep frequent actions directly visible instead. |\n| `empty` | No-data, no-results and recoverable error states with a useful explanation and next action. |\n| `global-loader` | Blocking application work during which navigation or duplicate actions would be unsafe. |\n| `spinner` | Local loading inside a bounded region where the rest of the interface remains usable. |\n| `toast` | Non-blocking feedback after an action. Use Dialog for information that requires acknowledgement. |\n\n### Project integration\n\n| Registry item | Use it for |\n| --- | --- |\n| `seo` | Shared site metadata, localized page metadata, favicon links and social previews. |\n\nExample:\n\n```bash\nnpx alixan-ui-nuxt add dialog toast seo\n```\n\n## ๐งฐ CLI\n\nThe package exposes one CLI command:\n\n```bash\nnpx alixan-ui-nuxt add