UI Integration Kit

Pre-built, responsive UI components optimized for Ensot's ecosystem with out-of-the-box accessibility and customizable themes.

Get Started View Docs

Key Features

Our UI components are built with performance, accessibility, and customization in mind.

Modular Components

300+ pre-designed UI elements optimized for Ensot's design principles with full customizability.

Responsive Design

Fully responsive layouts and adaptive components that work flawlessly across all device sizes.

Accessible By Design

Built with ARIA standards and keyboard navigation support for WCAG compliance.

Integration Methods

CDN Integration

Use our pre-built assets via global CDN for rapid deployment in your projects.


<script src="https://cdn.ensot.com/uikit/latest/ensot-ui.min.js"></script>

✅ No build setup required • ✅ Zero dependencies • ✅ Live updates

NPM Package

Install as a dependency in your Node.js applications for full flexibility.


npm install @ensot/ui-kit

✅ Tree-shakable • ✅ TypeScript ready • ✅ Auto-updates available

React Integration


import { EnButton, EnCard } from '@ensot/ui';

export default function App() {
  return (
    <EnCard className="max-w-md">
      <EnButton>Primary Action</EnButton>
    </EnCard>
  );
}

🚀 Full component library with TypeScript support

Vanilla JS


<script type="module">
  import { Button } from 'https://cdn.ensot.com/uikit/latest.js';
  
  document.body.innerHTML += `
    <button class='ensot-btn bg-indigo-500'>Click Me</button>
  `;
</script>

💡 No build toolchain required • ✅ Works immediately in any HTML

Getting Started

1. Choose Integration

Select CDN or NPM based on your workflow.

2. Install

Include the script or install via package manager.

3. Import

Use components in your app or HTML file.

4. Customize

Tailor the design system to match your brand using theme variables.

Theme Customization

Color Variables


:root {
  --ensot-primary: #6366f1;
  --ensot-accent: #8b5cf6;
  --ensot-background: #f9fafb;
}

Override default colors by setting these CSS variables in your global styles.

Dark Mode Support


@import '@ensot/ui/themes/dark';

Use the provided dark mode variant for automatic color inversion and high-contrast rendering.

Transform Your Product with Ensot UI
Get started with pre-built UI design systems that adapt to your needs. Our components are battle-tested in enterprise environments.
Start Integrating