\n\nA modern React component library built for fast product teams.\n\n[](https://altech-ui.vercel.app/)\n\nAltech UI provides production-ready UI primitives with:\n\n- simple APIs for daily use\n- multiple built-in style variants\n- easy Tailwind customization with `className`\n- TypeScript-first developer experience\n\n## Why Altech UI\n\nAltech UI helps developers ship interfaces faster without losing design flexibility.\nInstead of rebuilding common components from scratch, teams can focus on product logic.\n\nAdvantages:\n\n- less boilerplate for common UI patterns\n- flexible styling via `className` overrides\n- TypeScript-first for stronger safety and DX\n- consistent design tokens and variant patterns\n- built-in micro-interactions for better UX\n- works well with modern Next.js and React apps\n\n## What You Get\n\n- 17 reusable components\n- variant-based styling system\n- support for size, state, and layout props on core components\n- accessibility-focused primitives powered by Radix UI\n- smooth motion defaults with reduced-motion support\n- tree-shakeable package output (`esm` + `cjs` + `d.ts`)\n\n## Best For\n\n- startup/product teams shipping fast\n- SaaS dashboards and internal tools\n- teams that use Tailwind and want a reusable design foundation\n\n## Installation\n\n```bash\npnpm add @altech-ui/react\n```\n\n## Usage\n\n```tsx\nimport \"@altech-ui/react/styles.css\";\nimport { Button, Card, CardContent, CardHeader, Input } from \"@altech-ui/react\";\n\nexport default function App() {\n return (\n \n Sign in\n \n \n \n \n \n );\n}\n```\n\nButton-only import:\n\n```tsx\nimport \"@altech-ui/react/styles.css\";\nimport { Button } from \"@altech-ui/react/button\";\n```\n\nSimple button API:\n\n```tsx\n\n\n} endIcon={}>\n Create project\n\n```\n\n## Component Philosophy\n\n- sensible defaults: components work with minimal props\n- scalable API: use `variant`, `size`, and state props for quick customization\n- escape hatch always available: use `className` for Tailwind-level control\n\n## Available Components\n\n- Alert\n- Avatar\n- Badge\n- Button\n- Card\n- Checkbox\n- Dropdown\n- Input\n- Layout (Box, Container, Flex, Grid, Stack)\n- Modal\n- Radio\n- Select\n- Switch\n- Table\n- Tabs\n- Textarea\n- Tooltip\n\n## Variants and Simplicity\n\nMost components include 3 or more preset styles so developers can build polished UI with short code.\n\nExample:\n\n```tsx\n\n\n\n\n\n\n\n\n\n```\n\n## Notes\n\n- TypeScript-first\n- Supports `className` override\n- Uses `class-variance-authority` for variants\n- Uses `clsx` + `tailwind-merge` via `cn()`\n- Works well with Next.js App Router\n\n## Peer Dependencies\n\n- `react` `^19.0.0`\n- `react-dom` `^19.0.0`\n\n## License\n\nMIT\n\n## Links\n\n- Repository: `https://github.com/Luxxn12/altech-ui`\n- Issues: `https://github.com/Luxxn12/altech-ui/issues`\n","readmeFilename":"README.md"}
![\"Altech](\"https://altech-ui.vercel.app/logo-altech.png\"){kind=logo}
\n