Installation

Install the package#

npm install @clidey/ux

Import the stylesheet#

Clidey Design ships a compiled CSS file that must be imported once — typically in your app's entry point:

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@clidey/ux/styles.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Wrap with ThemeProvider#

Wrap your app with ThemeProvider to enable dark mode support across all components:

import { ThemeProvider } from '@clidey/ux';

function App() {
  return (
    <ThemeProvider defaultTheme="system" storageKey="my-app-theme">
      {/* your app */}
    </ThemeProvider>
  );
}

Configure Tailwind CSS#

If you use Tailwind CSS in your own project, import Clidey Design's stylesheet and add the package as a Tailwind source:

/* your global CSS */
@import 'tailwindcss';
@import '@clidey/ux/styles.css';
@source '../node_modules/@clidey/ux/dist';

@clidey/ux/styles.css is a full Tailwind build, nested under the components cascade layer so your own utilities always take precedence. The @source line makes your build emit every utility the components use, which keeps their responsive variants (for example the sidebar's hidden md:block) ordered correctly against your utilities.

Add toast notifications#

If you use toast() from the sonner integration, add the <Toaster /> component once near the root of your app:

import { Toaster } from '@clidey/ux';

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <Toaster />
      {/* rest of your app */}
    </ThemeProvider>
  );
}

Verify the setup#

Import and render a component to confirm everything is working:

import { Button } from '@clidey/ux';

export default function Home() {
  return <Button>Hello, Clidey Design!</Button>;
}

TypeScript#

Clidey Design ships TypeScript definitions at dist/index.d.ts. No additional @types packages are needed. Your tsconfig.json only needs standard React settings:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true
  }
}

Peer dependencies#

The package externalizes these dependencies — they must be present in your project:

Other required runtime packages are regular dependencies installed by your package manager. The library build externalizes these packages; they are not bundled into a single dependency-free file.