@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

• Storybook
• Confluence