@ibrohhm/intranet-ui
v0.1.1
Published
Personal intranet UI kit — React components built on Tailwind v4 + Base UI
Readme
@ibrohhm/intranet-ui
React component library for internal tools — dashboards, admin panels, intranets. Built on Tailwind v4 and shadcn/ui + Base UI primitives.
Install
npm install @ibrohhm/intranet-uiLocal dev (from path): use
--install-linksto avoid Turbopack symlink issuesnpm install --install-links /path/to/intranet-ui
Setup
1. globals.css
@import "tailwindcss";
@import "@ibrohhm/intranet-ui/styles";
@source "../node_modules/@ibrohhm/intranet-ui/dist";2. Root layout — add Toaster for toast notifications
import { Toaster } from 'sonner'
export default function Layout({ children }) {
return (
<html>
<body>
{children}
<Toaster richColors />
</body>
</html>
)
}3. Use components
import { ButtonX, InputX, TableX } from '@ibrohhm/intranet-ui'
export default function Page() {
return (
<div>
<InputX label="Name" placeholder="John Smith" />
<ButtonX variant="primary">Submit</ButtonX>
</div>
)
}Components
Forms
ButtonX InputX TextboxX CheckboxX RadioX DropdownX ToggleX DatePickerX FileUploadX SliderX
Layout
SidebarX TopbarX NavigationX PageHeaderX SearchBarX DrawerX DividerX SectionX
Navigation
BreadcrumbX TabsX StepperX
Content
AvatarX BadgeX StatX StatsCardX ProfileCardX AccordionX TimelineX CalendarX DateTimeWidgetX StatsWidgetX EventWidgetX EmptyStateX ContentSliderX
Feedback
AlertX TooltipX ModalX DrawerX SkeletonX ProgressX SpinnerX toastX
Data
TableX PaginationX ChartX
Foundation
TypographyX ColorPaletteX
Design tokens
| Token | Value | Role |
|---|---|---|
| coral | #FF6059 | Primary / brand |
| navy | #01093F | Text / dark |
| xactive-bg | #FFE5E0 | Active / error bg |
| xsubtle | #EBECF0 | Subtle bg / dividers |
| xborder | #A5A7B1 | Default border |
| xplaceholder | #CFD0D7 | Placeholder text |
| xerror | #FF2500 | Error |
| xbg | #F5F5F8 | Page background |
Peer dependencies
{
"react": ">=18",
"react-dom": ">=18",
"tailwindcss": ">=4"
}License
MIT