@slashclick/ui
v0.1.15
Published
Shared React component library built on Radix UI, shadcn/ui, and Tailwind CSS v4.
Readme
@slashclick/ui
Shared React component library built on Radix UI, shadcn/ui, and Tailwind CSS v4.
Installation
npm install @slashclick/uiPeer dependencies (install separately):
npm install next react react-domTailwind CSS Setup
The package ships pre-built JS/CSS. Add the design tokens and scan the package's class names in your app's Tailwind config.
1. Import the base CSS
In your root layout or global CSS:
/* app/globals.css */
@import '@slashclick/ui/styles.css';
/* Add your own @source so Tailwind generates classes used by the components */
@source "../node_modules/@slashclick/ui/dist/**/*.js";2. Update your CSS entry point
If your app uses Tailwind v4 CSS-first config, the @source directive above is all you need.
For Tailwind v3 (tailwind.config.js), add to content:
module.exports = {
content: [
// your app files...
'./node_modules/@slashclick/ui/dist/**/*.{js,cjs}',
],
}Usage
Import components directly from their subpath:
import { Button } from '@slashclick/ui/components/ui/button'
import { Dialog, DialogContent } from '@slashclick/ui/components/ui/dialog'
import { cn } from '@slashclick/ui/lib/utils'TypeScript path aliases (optional)
Add to your tsconfig.json for shorter imports:
{
"compilerOptions": {
"paths": {
"@slashclick/ui/*": ["./node_modules/@slashclick/ui/*"]
}
}
}Theme
The package uses CSS variables for theming. Dark mode is toggled by setting data-theme="dark" on any ancestor element:
// Light mode (default)
<html>...</html>
// Dark mode
<html data-theme="dark">...</html>Available Components
| Path | Components |
|------|-----------|
| components/ui/button | Button, buttonVariants |
| components/ui/dialog | Dialog, DialogContent, DialogTrigger, ... |
| components/ui/card | Card, CardHeader, CardContent, ... |
| components/ui/input | Input |
| components/ui/select | Select, SelectContent, SelectItem, ... |
| components/ui/tabs | Tabs, TabsContent, TabsList, TabsTrigger |
| components/ui/dropdown-menu | DropdownMenu, DropdownMenuContent, ... |
| components/ui/toast | Toast, Toaster, useToast |
| components/lightbox | ImageLightbox, GallerySection, useEntityLightbox |
| components/dashboard/sidebar | Sidebar, CollapsibleSection, EntityList |
| lib/utils | cn, formatDate, absoluteUrl |
Publishing
# From the monorepo root
cd packages/ui
npm publishThe prepublishOnly script runs pnpm clean && pnpm build automatically.