Shadcn UIKit

A monorepo containing 40+ custom UI components built on shadcn/ui principles, with multiple themes, pre-built CSS, and interactive demos.

Architecture in brief: Components are built on Base UI (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.

📦 Packages

@acronis-platform/shadcn-uikit (v0.34.0)

The core UI component library. Ships pre-built CSS — consumers do not need Tailwind CSS installed.

Peer dependencies:

react ^18.2.0 || ^19.0.0
react-dom ^18.2.0 || ^19.0.0
tw-animate-css ^1.4.0

@acronis-platform/shadcn-uikit-demo

Interactive demo application showcasing all components with multiple themes.

Features:

Component playground
Live theme switching
Responsive design

🚀 Getting Started

Prerequisites

Node.js 18+
pnpm 10+

Installation (development)

# Clone the repository
git clone https://github.com/acronis/shadcn-uikit.git
cd shadcn-uikit

# Install dependencies
pnpm install

# Build all packages
pnpm run build

Running the Demo

# Start the demo application
cd packages/demo
pnpm run dev

The demo will be available at http://localhost:3000.

📖 Usage

Installation

npm install @acronis-platform/shadcn-uikit tw-animate-css
# or
pnpm add @acronis-platform/shadcn-uikit tw-animate-css
# or
yarn add @acronis-platform/shadcn-uikit tw-animate-css

Note: tw-animate-css is a required peer dependency. It replaces the older tailwindcss-animate package.

Import Styles

Import the main stylesheet in your application entry point. This includes the default theme, base styles, components, and utilities — all pre-built:

// main.tsx or App.tsx
import '@acronis-platform/shadcn-uikit/styles';

No Tailwind CSS installation is needed. The package ships fully compiled CSS.

Initialize Theme System (Optional)

For theme switching, dark mode support, and persistence:

import { initializeThemeSystem } from '@acronis-platform/shadcn-uikit';

// Initialize on app startup
initializeThemeSystem();

Using Components

All components are exported from the main package:

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
  Input,
  Label,
  Badge,
  Alert,
  AlertTitle,
  AlertDescription,
} from '@acronis-platform/shadcn-uikit';

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        <Alert>
          <AlertTitle>Info</AlertTitle>
          <AlertDescription>This is an informational message.</AlertDescription>
        </Alert>
      </CardContent>
      <CardFooter>
        <Button>Submit</Button>
        <Badge variant="secondary">New</Badge>
      </CardFooter>
    </Card>
  );
}

Available Components

The library includes 40+ components:

Layout: Card, Separator, Sidebar, ScrollArea, ResizablePanel
Forms: Input, Textarea, Select, Checkbox, RadioGroup, Switch, Label, Form, PasswordInput
Buttons: Button, ButtonGroup
Navigation: NavigationMenu, Breadcrumb, Tabs, Pagination, SecondaryMenu
Overlays: Dialog, Sheet, Drawer, Popover, Tooltip, AlertDialog
Feedback: Alert, Badge, Chip, Tag, Progress, Spinner, Toast (Sonner)
Data Display: Table, DataTable, Tree, Avatar, Calendar, DatePicker
Advanced: Combobox, Command, Filter, Chart, Empty, Carousel, Collapsible, Accordion
Icons: 1500+ internal icons via BaseIcon + auto-generated components

Package Exports

JavaScript

// Main entry — all components + utilities
import { Button } from '@acronis-platform/shadcn-uikit';

// React-only entry (same content)
import { Button } from '@acronis-platform/shadcn-uikit/react';

// Individual components (tree-shakeable)
import { Button } from '@acronis-platform/shadcn-uikit/components/Button';

// Tailwind preset (for consumers extending Tailwind — requires Tailwind v4)
import preset from '@acronis-platform/shadcn-uikit/tailwind-preset';

CSS

// Default theme + base + components + utilities (most consumers use this)
import '@acronis-platform/shadcn-uikit/styles';

// Everything including all themes
import '@acronis-platform/shadcn-uikit/styles/full';

// Granular imports
import '@acronis-platform/shadcn-uikit/styles/tokens';      // CSS variables only
import '@acronis-platform/shadcn-uikit/styles/base';         // Reset + base styles
import '@acronis-platform/shadcn-uikit/styles/components';   // Component styles only
import '@acronis-platform/shadcn-uikit/styles/utilities';    // Tailwind utility classes

// Individual themes
import '@acronis-platform/shadcn-uikit/styles/themes/acronis-default';
import '@acronis-platform/shadcn-uikit/styles/themes/acronis-ocean';
import '@acronis-platform/shadcn-uikit/styles/themes/cyber-chat';
import '@acronis-platform/shadcn-uikit/styles/themes/acronis-white-label';

TypeScript Support

The library is fully typed with TypeScript:

import type { ButtonProps, CardProps } from '@acronis-platform/shadcn-uikit';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Utility Functions

import { cn } from '@acronis-platform/shadcn-uikit';

// Merge class names
const className = cn('base-class', condition && 'conditional-class', 'another-class');

⚡ Tailwind CSS v4 — Notes for Consumers

This 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.

Styling philosophy

Tailwind is not part of the public API. The package ships pre-built CSS files. In your application you can use:

CSS Modules or SCSS files with your own design system tokens
A dedicated token/theme layer (CSS custom properties)
Tailwind CSS (any version), Vanilla Extract, styled-components, or any other solution
Plain CSS

The component styles, themes, and design tokens are all available as standalone CSS imports — no Tailwind processing needed at your end.

Pre-built CSS consumers (the majority)

Zero impact. Import @acronis-platform/shadcn-uikit/styles as before. No Tailwind installation needed on your side.

`tw-animate-css` peer dependency (required)

The tw-animate-css package replaces the older tailwindcss-animate (from Tailwind v3). Install it alongside the UI kit:

npm install tw-animate-css

If you previously had tailwindcss-animate as a dependency only for this UI kit, you can remove it.

Tailwind preset users (`./tailwind-preset` export)

If you use the @acronis-platform/shadcn-uikit/tailwind-preset export in your own Tailwind build, you must upgrade to Tailwind CSS v4:

Install @tailwindcss/postcss and tailwindcss ^4.x
Update your PostCSS configuration accordingly
See the Tailwind CSS v4 upgrade guide for details

Existing Tailwind v3 consumers using pre-built CSS

No 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.

🎨 Themes

Built-in Themes

Acronis Default — standard Acronis brand colors (included by default)
Acronis Ocean — alternative blue-focused theme with deeper ocean tones
Cyber Chat — theme for the Cyber Chat product
Acronis White Label — white-label theme for partner customization

Theme Features

✅ Light & Dark modes — all themes support both modes via CSS variables
✅ CSS-based — zero JavaScript overhead
✅ Tree-shakeable — import only themes you use
✅ Customizable — override CSS variables or create custom themes
✅ SSR-compatible — works with server-side rendering

Theme Switching

Switch themes programmatically:

import { applyTheme, applyColorMode, toggleColorMode } from '@acronis-platform/shadcn-uikit';

// Switch to ocean theme
applyTheme('acronis-ocean');

// Toggle dark mode
toggleColorMode();

// Or set specific mode
applyColorMode('dark');
applyColorMode('light');
applyColorMode('system'); // Follow system preference

Shadow DOM / Embedded Containers

When 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.

Pass additional container elements via the extraRoots parameter:

import { applyTheme, applyNavVariant } from '@acronis-platform/shadcn-uikit';

const innerContainer = document.getElementById('app-container');
applyTheme('acronis-ocean', true, innerContainer ? [innerContainer] : []);

// Same for white-label nav variants
applyNavVariant('ingram-micro', true, innerContainer ? [innerContainer] : []);

Both applyTheme and applyNavVariant accept the same optional parameters:

Parameter	Type	Default	Description
`theme` / `variant`	`ThemeName` / `WhiteLabelNavVariant`	—	The theme or variant to apply
`persist`	`boolean`	`true`	Whether to persist the choice to `localStorage`
`extraRoots`	`HTMLElement[]`	`[]`	Additional elements to receive the same theme classes

Using Alternative Themes

Import additional theme CSS, then apply:

// Import ocean theme
import '@acronis-platform/shadcn-uikit/styles/themes/acronis-ocean';

// Then apply it
import { applyTheme } from '@acronis-platform/shadcn-uikit';
applyTheme('acronis-ocean');

Creating Custom Themes

Create custom themes by copying the template file and customizing colors:

# See packages/ui/src/styles/themes/_template.scss for the template

See Theme Documentation for details.

🏗️ Project Structure

shadcn-uikit/
├── packages/
│   ├── ui/                    # Core UI components library (@acronis-platform/shadcn-uikit)
│   │   ├── src/
│   │   │   ├── components/    # React components
│   │   │   ├── hooks/         # Custom React hooks
│   │   │   ├── lib/           # Utility functions
│   │   │   ├── styles/        # SCSS source — themes, tokens, base
│   │   │   │   ├── themes/    # Theme SCSS files + template
│   │   │   │   └── tokens/    # Design tokens (CSS variables)
│   │   │   ├── types/         # Shared TypeScript types
│   │   │   ├── utils/         # Additional utilities
│   │   │   ├── index.ts       # Main entry (all exports)
│   │   │   └── react.ts       # React-only entry
│   │   └── package.json
│   ├── demo/                  # Demo application
│   │   ├── src/
│   │   │   ├── components/    # Demo-specific components
│   │   │   ├── demos/         # Per-component demo pages
│   │   │   └── layouts/       # App layouts
│   │   └── package.json
│   └── docs/                  # Package-level documentation
├── docs/                      # Project-level documentation
│   ├── explorations/          # Research & exploration documents
│   ├── features/              # Feature specifications
│   └── team/                  # Team processes & guides
├── git-hooks/                 # Git hook scripts
├── package.json               # Root workspace config
├── pnpm-workspace.yaml        # pnpm workspace definition
└── README.md

🛠️ Development

Build All Packages

pnpm run build

Type Checking

pnpm run type-check

Linting

pnpm run lint

🚀 Quick Reference

Complete Setup Example

// main.tsx
import '@acronis-platform/shadcn-uikit/styles';
import { initializeThemeSystem } from '@acronis-platform/shadcn-uikit';

initializeThemeSystem();

// App.tsx
import { Button, Card, CardHeader, CardTitle, CardContent } from '@acronis-platform/shadcn-uikit';

export function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My App</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

📚 Documentation

Tree-Shaking & Performance — bundle optimization guide
Theme System Guide — complete theme usage guide
Theme Build Configuration — build setup details
Theme Architecture — token system architecture
UI Package Documentation
Demo Package Documentation

📝 License

See LICENSE for more details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🔗 Links

shadcn/ui — the original inspiration
Base UI — unstyled primitives (primary)
Radix UI — unstyled primitives (NavigationMenu, Slot)
Tailwind CSS — internal build tool

Name		Name	Last commit message	Last commit date
Latest commit History 444 Commits
.github		.github
.husky		.husky
docs		docs
git-hooks		git-hooks
packages		packages
.commitlintrc.json		.commitlintrc.json
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
CLAUDE.md		CLAUDE.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
Dockerfile.storybook		Dockerfile.storybook
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
docker-compose.storybook.update.yml		docker-compose.storybook.update.yml
docker-compose.storybook.yml		docker-compose.storybook.yml
eslint.config.js		eslint.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
shadcn-extension.json		shadcn-extension.json

Folders and files

Latest commit

History

Repository files navigation

Shadcn UIKit

📦 Packages

@acronis-platform/shadcn-uikit (v0.34.0)

@acronis-platform/shadcn-uikit-demo

🚀 Getting Started

Prerequisites

Installation (development)

Running the Demo

📖 Usage

Installation

Import Styles

Initialize Theme System (Optional)

Using Components

Available Components

Package Exports

JavaScript

CSS

TypeScript Support

Utility Functions

⚡ Tailwind CSS v4 — Notes for Consumers

Styling philosophy

Pre-built CSS consumers (the majority)

tw-animate-css peer dependency (required)

Tailwind preset users (./tailwind-preset export)

Existing Tailwind v3 consumers using pre-built CSS

🎨 Themes

Built-in Themes

Theme Features

Theme Switching

Shadow DOM / Embedded Containers

Using Alternative Themes

Creating Custom Themes

🏗️ Project Structure

🛠️ Development

Build All Packages

Type Checking

Linting

🚀 Quick Reference

Complete Setup Example

📚 Documentation

📝 License

🤝 Contributing

🔗 Links

About

Topics

Resources

License

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 47

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

`tw-animate-css` peer dependency (required)

Tailwind preset users (`./tailwind-preset` export)

Packages