Security News
The Hidden Blast Radius of the Axios Compromise
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
By Ahmad Nassri - Apr 01, 2026
New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
@ceed/ads
Advanced tools
@ceed/ads
Admin Design System - A React component library for Ecube Labs admin applications.
Installation
npm install @ceed/ads
# or
yarn add @ceed/ads
Usage
With Bundler (Vite, Webpack, etc.)
import { Button, ThemeProvider } from '@ceed/ads';
function App() {
return (
<ThemeProvider>
<Button variant="solid">Click me</Button>
</ThemeProvider>
);
}
Browser ESM (via CDN)
You can use @ceed/ads directly in the browser without a bundler via esm.sh.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@ceed/ads Browser Example</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import React from 'https://esm.sh/react@18';
import { createRoot } from 'https://esm.sh/react-dom@18/client';
import { Button, ThemeProvider } from 'https://esm.sh/@ceed/ads';
const App = () => (
React.createElement(ThemeProvider, null,
React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!')
)
);
createRoot(document.getElementById('root')).render(
React.createElement(App)
);
</script>
</body>
</html>
With Import Maps
For cleaner imports, use Import Maps:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@ceed/ads with Import Maps</title>
</head>
<body>
<div id="root"></div>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
"react-dom/client": "https://esm.sh/react-dom@18/client",
"@ceed/ads": "https://esm.sh/@ceed/ads"
}
}
</script>
<script type="module">
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, ThemeProvider } from '@ceed/ads';
const App = () => (
React.createElement(ThemeProvider, null,
React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!')
)
);
createRoot(document.getElementById('root')).render(
React.createElement(App)
);
</script>
</body>
</html>
With JSX (using esm.sh)
esm.sh supports JSX transformation via the ?jsx-runtime=automatic parameter:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@ceed/ads with JSX</title>
</head>
<body>
<div id="root"></div>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
"react-dom/client": "https://esm.sh/react-dom@18/client",
"@ceed/ads": "https://esm.sh/@ceed/ads"
}
}
</script>
<script type="module">
import { createRoot } from 'react-dom/client';
import { jsx } from 'react/jsx-runtime';
import { Button, Stack, ThemeProvider } from '@ceed/ads';
const App = () =>
jsx(ThemeProvider, {
children: jsx(Stack, {
spacing: 2,
children: [
jsx(Button, { variant: 'solid', children: 'Solid' }),
jsx(Button, { variant: 'outlined', children: 'Outlined' }),
jsx(Button, { variant: 'soft', children: 'Soft' }),
],
}),
});
createRoot(document.getElementById('root')).render(jsx(App, {}));
</script>
</body>
</html>
Documentation
FAQs
UI tool for Ecube Labs front-end developers
We found that @ceed/ads demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Package last updated on 31 Mar 2026
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Supply Chain Attack on Axios Pulls Malicious Dependency from npm
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
By Socket Research Team - Mar 31, 2026
Research
TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
By Socket Research Team - Mar 27, 2026