{"id":50979492,"url":"https://github.com/acronis/uikit","last_synced_at":"2026-06-19T12:34:08.861Z","repository":{"id":332383449,"uuid":"1133554176","full_name":"acronis/uikit","owner":"acronis","description":"The Acronis UI Component Library for Web applications based on React","archived":false,"fork":false,"pushed_at":"2026-06-19T04:14:40.000Z","size":19220,"stargazers_count":2,"open_issues_count":101,"forks_count":10,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-19T04:18:10.195Z","etag":null,"topics":["base-ui","react","shadcn-ui"],"latest_commit_sha":null,"homepage":"https://acronis.github.io/uikit/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acronis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-13T14:04:10.000Z","updated_at":"2026-06-19T04:14:44.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/acronis/uikit","commit_stats":null,"previous_names":["acronis/shadcn-uikit"],"tags_count":50,"template":false,"template_full_name":null,"purl":"pkg:github/acronis/uikit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acronis%2Fuikit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acronis%2Fuikit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acronis%2Fuikit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acronis%2Fuikit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acronis","download_url":"https://codeload.github.com/acronis/uikit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acronis%2Fuikit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34532256,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["base-ui","react","shadcn-ui"],"created_at":"2026-06-19T12:34:07.148Z","updated_at":"2026-06-19T12:34:08.833Z","avatar_url":"https://github.com/acronis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shadcn UIKit\n\nA monorepo containing 40+ custom UI components built on [shadcn/ui](https://ui.shadcn.com/) principles, with multiple themes, pre-built CSS, and interactive demos.\n\n**Architecture in brief:** Components are built on [Base UI](https://base-ui.com/) (and partially Radix UI) unstyled primitives. Tailwind CSS is used **internally** to compile styles — consumers receive fully pre-built CSS and can use any styling solution in their own project (CSS Modules, SCSS, a design system token layer, plain CSS, etc.). No Tailwind installation required.\n\n## 📦 Packages\n\n### [@acronis-platform/shadcn-uikit](./packages/ui-legacy) (v0.34.0)\n\nThe core UI component library. Ships pre-built CSS — consumers do **not** need Tailwind CSS installed.\n\n**Peer dependencies:**\n\n- `react` ^18.2.0 || ^19.0.0\n- `react-dom` ^18.2.0 || ^19.0.0\n- `tw-animate-css` ^1.4.0\n\n### [@acronis-platform/design-tokens](./packages/design-tokens)\n\nAcronis design tokens — DTCG-2025.10-conformant JSON (primitives, semantic, components). Data only: no build, no runtime API.\n\n### [@acronis-platform/design-assets](./packages/design-assets)\n\nAcronis visual assets — DTCG-divergent JSON manifests for icons and illustrations, plus the bundled binaries they reference. Data only: no build, no runtime API.\n\n### [@acronis-platform/shadcn-uikit-demo](./apps/demo)\n\nInteractive demo application showcasing all components with multiple themes.\n\n**Features:**\n\n- Component playground\n- Live theme switching\n- Responsive design\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm 10+\n\n### Installation (development)\n\n```bash\n# Clone the repository\ngit clone https://github.com/acronis/uikit.git\ncd uikit\n\n# Install dependencies\npnpm install\n\n# Build all packages\npnpm run build\n```\n\n### Running the Demo\n\n```bash\n# Start the demo application\ncd apps/demo\npnpm run dev\n```\n\nThe demo will be available at `http://localhost:3000`.\n\n## 📖 Usage\n\n### Installation\n\n```bash\nnpm install @acronis-platform/shadcn-uikit tw-animate-css\n# or\npnpm add @acronis-platform/shadcn-uikit tw-animate-css\n# or\nyarn add @acronis-platform/shadcn-uikit tw-animate-css\n```\n\n\u003e **Note:** `tw-animate-css` is a required peer dependency. It replaces the older `tailwindcss-animate` package.\n\n### Import Styles\n\nImport the main stylesheet in your application entry point. This includes the default theme, base styles, components, and utilities — all pre-built:\n\n```typescript\n// main.tsx or App.tsx\nimport '@acronis-platform/shadcn-uikit/styles';\n```\n\nNo Tailwind CSS installation is needed. The package ships fully compiled CSS.\n\n### Initialize Theme System (Optional)\n\nFor theme switching, dark mode support, and persistence:\n\n```typescript\nimport { initializeThemeSystem } from '@acronis-platform/shadcn-uikit';\n\n// Initialize on app startup\ninitializeThemeSystem();\n```\n\n### Using Components\n\nAll components are exported from the main package:\n\n```tsx\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardContent,\n  CardFooter,\n  Input,\n  Label,\n  Badge,\n  Alert,\n  AlertTitle,\n  AlertDescription,\n} from '@acronis-platform/shadcn-uikit';\n\nfunction MyComponent() {\n  return (\n    \u003cCard\u003e\n      \u003cCardHeader\u003e\n        \u003cCardTitle\u003eWelcome\u003c/CardTitle\u003e\n      \u003c/CardHeader\u003e\n      \u003cCardContent className=\"space-y-4\"\u003e\n        \u003cdiv\u003e\n          \u003cLabel htmlFor=\"email\"\u003eEmail\u003c/Label\u003e\n          \u003cInput id=\"email\" type=\"email\" placeholder=\"Enter your email\" /\u003e\n        \u003c/div\u003e\n        \u003cAlert\u003e\n          \u003cAlertTitle\u003eInfo\u003c/AlertTitle\u003e\n          \u003cAlertDescription\u003eThis is an informational message.\u003c/AlertDescription\u003e\n        \u003c/Alert\u003e\n      \u003c/CardContent\u003e\n      \u003cCardFooter\u003e\n        \u003cButton\u003eSubmit\u003c/Button\u003e\n        \u003cBadge variant=\"secondary\"\u003eNew\u003c/Badge\u003e\n      \u003c/CardFooter\u003e\n    \u003c/Card\u003e\n  );\n}\n```\n\n### Available Components\n\nThe library includes 40+ components:\n\n- **Layout**: Card, Separator, Sidebar, ScrollArea, ResizablePanel\n- **Forms**: Input, Textarea, Select, Checkbox, RadioGroup, Switch, Label, Form, PasswordInput\n- **Buttons**: Button, ButtonGroup\n- **Navigation**: NavigationMenu, Breadcrumb, Tabs, Pagination, SecondaryMenu\n- **Overlays**: Dialog, Sheet, Drawer, Popover, Tooltip, AlertDialog\n- **Feedback**: Alert, Badge, Chip, Tag, Progress, Spinner, Toast (Sonner)\n- **Data Display**: Table, DataTable, Tree, Avatar, Calendar, DatePicker\n- **Advanced**: Combobox, Command, Filter, Chart, Empty, Carousel, Collapsible, Accordion\n- **Icons**: 1500+ internal icons via `BaseIcon` + auto-generated components\n\n### Package Exports\n\n#### JavaScript\n\n```typescript\n// Main entry — all components + utilities\nimport { Button } from '@acronis-platform/shadcn-uikit';\n\n// React-only entry (same content)\nimport { Button } from '@acronis-platform/shadcn-uikit/react';\n\n// Individual components (tree-shakeable)\nimport { Button } from '@acronis-platform/shadcn-uikit/components/Button';\n\n// Tailwind preset (for consumers extending Tailwind — requires Tailwind v4)\nimport preset from '@acronis-platform/shadcn-uikit/tailwind-preset';\n```\n\n#### CSS\n\n```typescript\n// Default theme + base + components + utilities (most consumers use this)\nimport '@acronis-platform/shadcn-uikit/styles';\n\n// Everything including all themes\nimport '@acronis-platform/shadcn-uikit/styles/full';\n\n// Granular imports\nimport '@acronis-platform/shadcn-uikit/styles/tokens'; // CSS variables only\nimport '@acronis-platform/shadcn-uikit/styles/base'; // Reset + base styles\nimport '@acronis-platform/shadcn-uikit/styles/components'; // Component styles only\nimport '@acronis-platform/shadcn-uikit/styles/utilities'; // Tailwind utility classes\n\n// Individual themes\nimport '@acronis-platform/shadcn-uikit/styles/themes/acronis-default';\nimport '@acronis-platform/shadcn-uikit/styles/themes/acronis-ocean';\nimport '@acronis-platform/shadcn-uikit/styles/themes/cyber-chat';\nimport '@acronis-platform/shadcn-uikit/styles/themes/acronis-white-label';\n```\n\n### TypeScript Support\n\nThe library is fully typed with TypeScript:\n\n```tsx\nimport type { ButtonProps, CardProps } from '@acronis-platform/shadcn-uikit';\n\nconst MyButton: React.FC\u003cButtonProps\u003e = (props) =\u003e {\n  return \u003cButton {...props} /\u003e;\n};\n```\n\n### Utility Functions\n\n```typescript\nimport { cn } from '@acronis-platform/shadcn-uikit';\n\n// Merge class names\nconst className = cn(\n  'base-class',\n  condition \u0026\u0026 'conditional-class',\n  'another-class'\n);\n```\n\n## ⚡ Tailwind CSS v4 — Notes for Consumers\n\nThis package uses **Tailwind CSS v4** as a build-time tool to compile component styles. The output is standard CSS — consumers are free to use any styling solution in their own projects.\n\n### Styling philosophy\n\nTailwind is **not** part of the public API. The package ships pre-built CSS files. In your application you can use:\n\n- CSS Modules or SCSS files with your own design system tokens\n- A dedicated token/theme layer (CSS custom properties)\n- Tailwind CSS (any version), Vanilla Extract, styled-components, or any other solution\n- Plain CSS\n\nThe component styles, themes, and design tokens are all available as standalone CSS imports — no Tailwind processing needed at your end.\n\n### Pre-built CSS consumers (the majority)\n\n**Zero impact.** Import `@acronis-platform/shadcn-uikit/styles` as before. No Tailwind installation needed on your side.\n\n### `tw-animate-css` peer dependency (required)\n\nThe `tw-animate-css` package replaces the older `tailwindcss-animate` (from Tailwind v3). Install it alongside the UI kit:\n\n```bash\nnpm install tw-animate-css\n```\n\nIf you previously had `tailwindcss-animate` as a dependency only for this UI kit, you can remove it.\n\n### Tailwind preset users (`./tailwind-preset` export)\n\nIf you use the `@acronis-platform/shadcn-uikit/tailwind-preset` export in your own Tailwind build, you must upgrade to **Tailwind CSS v4**:\n\n- Install `@tailwindcss/postcss` and `tailwindcss ^4.x`\n- Update your PostCSS configuration accordingly\n- See the [Tailwind CSS v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) for details\n\n### Existing Tailwind v3 consumers using pre-built CSS\n\nNo direct conflict. However, the pre-built CSS uses Tailwind v4's `@layer` cascade layers, which may interact with a v3 Tailwind build if both are present in the same page. **Recommended:** avoid running Tailwind v3 over the pre-built CSS output.\n\n## 🎨 Themes\n\n### Built-in Themes\n\n1. **Acronis Default** — standard Acronis brand colors (included by default)\n2. **Acronis Ocean** — alternative blue-focused theme with deeper ocean tones\n3. **Cyber Chat** — theme for the Cyber Chat product\n4. **Acronis White Label** — white-label theme for partner customization\n\n### Theme Features\n\n- ✅ **Light \u0026 Dark modes** — all themes support both modes via CSS variables\n- ✅ **CSS-based** — zero JavaScript overhead\n- ✅ **Tree-shakeable** — import only themes you use\n- ✅ **Customizable** — override CSS variables or create custom themes\n- ✅ **SSR-compatible** — works with server-side rendering\n\n### Theme Switching\n\nSwitch themes programmatically:\n\n```typescript\nimport {\n  applyTheme,\n  applyColorMode,\n  toggleColorMode,\n} from '@acronis-platform/shadcn-uikit';\n\n// Switch to ocean theme\napplyTheme('acronis-ocean');\n\n// Toggle dark mode\ntoggleColorMode();\n\n// Or set specific mode\napplyColorMode('dark');\napplyColorMode('light');\napplyColorMode('system'); // Follow system preference\n```\n\n#### Shadow DOM / Embedded Containers\n\nWhen the app renders inside a shadow root (e.g. via module federation), theme classes must also be applied to the inner container element — not just `document.documentElement` — because CSS inside a shadow root uses `:host` selectors that don't inherit from the document.\n\nPass additional container elements via the `extraRoots` parameter:\n\n```typescript\nimport { applyTheme, applyNavVariant } from '@acronis-platform/shadcn-uikit';\n\nconst innerContainer = document.getElementById('app-container');\napplyTheme('acronis-ocean', true, innerContainer ? [innerContainer] : []);\n\n// Same for white-label nav variants\napplyNavVariant('ingram-micro', true, innerContainer ? [innerContainer] : []);\n```\n\nBoth `applyTheme` and `applyNavVariant` accept the same optional parameters:\n\n| Parameter           | Type                                 | Default | Description                                           |\n| ------------------- | ------------------------------------ | ------- | ----------------------------------------------------- |\n| `theme` / `variant` | `ThemeName` / `WhiteLabelNavVariant` | —       | The theme or variant to apply                         |\n| `persist`           | `boolean`                            | `true`  | Whether to persist the choice to `localStorage`       |\n| `extraRoots`        | `HTMLElement[]`                      | `[]`    | Additional elements to receive the same theme classes |\n\n### Using Alternative Themes\n\nImport additional theme CSS, then apply:\n\n```typescript\n// Import ocean theme\nimport '@acronis-platform/shadcn-uikit/styles/themes/acronis-ocean';\n\n// Then apply it\nimport { applyTheme } from '@acronis-platform/shadcn-uikit';\napplyTheme('acronis-ocean');\n```\n\n### Creating Custom Themes\n\nCreate custom themes by copying the template file and customizing colors:\n\n```bash\n# See packages/ui-legacy/src/styles/themes/_template.scss for the template\n```\n\nSee [Theme Documentation](./apps/docs/THEMES.md) for details.\n\n## 🏗️ Project Structure\n\n```\nshadcn-uikit/\n├── apps/\n│   ├── demo/                  # Vite demo app (@acronis-platform/shadcn-uikit-demo)\n│   ├── demos/                 # Shared demo components (@acronis-platform/shadcn-uikit-demos)\n│   └── docs/                  # Fumadocs documentation site (@acronis-platform/shadcn-uikit-docs)\n├── packages/\n│   └── legacy/\n│       └── ui/                # Published library (@acronis-platform/shadcn-uikit)\n│           ├── src/           # React components, hooks, lib, styles, types, utils\n│           │   ├── components/    # React components\n│           │   ├── hooks/         # Custom React hooks\n│           │   ├── lib/           # Utility functions\n│           │   ├── styles/        # SCSS source — themes, tokens, base\n│           │   │   ├── themes/    # Theme SCSS files + template\n│           │   │   └── tokens/    # Design tokens (CSS variables)\n│           │   ├── types/         # Shared TypeScript types\n│           │   ├── utils/         # Additional utilities\n│           │   ├── index.ts       # Main entry (all exports)\n│           │   └── react.ts       # React-only entry\n│           ├── docker-compose.storybook.yml      # Storybook visual-regression compose\n│           ├── Dockerfile.storybook              # ... and its image\n│           └── package.json\n├── tools/                     # Private (unpublished) build tooling\n│   └── style-dictionary/      # design-tokens → per-brand CSS (@acronis-platform/style-dictionary)\n├── context/                   # Cross-workspace docs (conventions, commits, releasing)\n├── .changeset/                # Pending changesets (each PR adds one)\n├── .github/workflows/         # ci.yml, release.yml, demo-deploy.yml, visual-regression.yml\n├── .husky/                    # Git hooks (managed by Husky)\n├── package.json               # Workspace root: scripts + shared devDeps\n├── pnpm-workspace.yaml        # pnpm workspaces + dependency catalog\n└── README.md\n```\n\n## 🛠️ Scripts\n\nAll commands run from the repo root unless noted otherwise. Every workspace\nexposes the same vocabulary, so `pnpm -r \u003cname\u003e` is reliable.\n\n| Script                                     | What it does                                                   |\n| ------------------------------------------ | -------------------------------------------------------------- |\n| `pnpm -r dev` / `pnpm --filter \u003cname\u003e dev` | Run the dev server / watcher for one or all workspaces         |\n| `pnpm -r build`                            | Build every package in topological order (ui → demo/docs)      |\n| `pnpm -r test`                             | Run the test suite once across all workspaces                  |\n| `pnpm -r test:watch`                       | Run tests in watch mode                                        |\n| `pnpm -r lint` / `pnpm -r lint:fix`        | ESLint across all workspaces                                   |\n| `pnpm -r typecheck`                        | `tsc --noEmit` across all workspaces                           |\n| `pnpm format` / `pnpm format:check`        | Prettier write / check from the repo root                      |\n| `pnpm -r clean`                            | Delete `dist/`, `.next/`, `storybook-static/`, etc.            |\n| `pnpm changeset`                           | Add a changeset for a PR that changes the published UI library |\n\nTo run a single workspace, prefix with `pnpm --filter \u003cpackage-name\u003e`:\n\n```bash\npnpm --filter @acronis-platform/shadcn-uikit-docs dev\npnpm --filter @acronis-platform/shadcn-uikit storybook\n```\n\n## 🚢 Releasing\n\nReleases are driven by [changesets](https://github.com/changesets/changesets).\nEvery PR that changes `@acronis-platform/shadcn-uikit` should include a\n`.changeset/*.md` file describing the bump:\n\n```bash\npnpm changeset\n```\n\nOn merge to `main`, the **Release** workflow opens (or updates) a single\n\"Version Packages\" PR aggregating all pending changesets. Merging that PR\npublishes to **npm** and **GitHub Packages** and creates the corresponding\n**GitHub Release**, which in turn triggers the **Demo \u0026 Storybook Pages\ndeploy**. See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for the full flow.\n\n## 🚀 Quick Reference\n\n### Complete Setup Example\n\n```tsx\n// main.tsx\nimport '@acronis-platform/shadcn-uikit/styles';\nimport { initializeThemeSystem } from '@acronis-platform/shadcn-uikit';\n\ninitializeThemeSystem();\n\n// App.tsx\nimport {\n  Button,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardContent,\n} from '@acronis-platform/shadcn-uikit';\n\nexport function App() {\n  return (\n    \u003cCard\u003e\n      \u003cCardHeader\u003e\n        \u003cCardTitle\u003eMy App\u003c/CardTitle\u003e\n      \u003c/CardHeader\u003e\n      \u003cCardContent\u003e\n        \u003cButton\u003eClick me\u003c/Button\u003e\n      \u003c/CardContent\u003e\n    \u003c/Card\u003e\n  );\n}\n```\n\n## 📚 Documentation\n\n- [Tree-Shaking \u0026 Performance](./apps/docs/TREE_SHAKING.md) — bundle optimization guide\n- [Theme System Guide](./apps/docs/THEMES.md) — complete theme usage guide\n- [Theme Build Configuration](./apps/docs/THEME_BUILD.md) — build setup details\n- [Theme Architecture](./apps/demo/docs/THEME_ARCHITECTURE.md) — token system architecture\n- [UI Package Documentation](./packages/ui-legacy/README.md)\n- [Demo Package Documentation](./apps/demo/README.md)\n\n## 📝 License\n\nMIT License — Copyright (c) 2026 Acronis International GmbH\n\nSee [LICENSE](./LICENSE) for more details.\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 🔗 Links\n\n- [shadcn/ui](https://ui.shadcn.com/) — the original inspiration\n- [Base UI](https://base-ui.com/) — unstyled primitives (primary)\n- [Radix UI](https://www.radix-ui.com/) — unstyled primitives (NavigationMenu, Slot)\n- [Tailwind CSS](https://tailwindcss.com/) — internal build tool\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facronis%2Fuikit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facronis%2Fuikit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facronis%2Fuikit/lists"}