Shared React component library for the Track Any Device platform.
Built with React 19, Tailwind CSS v4, Radix UI primitives, and shadcn/ui conventions.
npm install @trackany-device/componentsPeer dependencies — install the ones you use:
npm install react react-dom lucide-react tailwindcssOptional peers (only needed for specific components):
@dnd-kit/*,@tanstack/react-table,@xyflow/react,recharts,react-hook-form,zod
In your app's CSS entry point (e.g. app.css):
@import "tailwindcss";
@import "@trackany-device/components/styles/themes.css";
/* If you use KeenIcons: */
@import "@trackany-device/components/styles/keenicons.css";Apply a data-theme attribute to your root element (or <html>):
<html data-theme="blue"> <!-- or green, purple, red, orange … -->Add .dark for dark mode:
<html data-theme="blue" class="dark">The library abstracts routing/forms behind a PlatformProvider. Pick the adapter for your framework:
// Next.js
import { PlatformProvider, createNextjsAdapter } from '@trackany-device/components';
export default function RootLayout({ children }) {
return (
<PlatformProvider adapter={createNextjsAdapter()}>
{children}
</PlatformProvider>
);
}// Inertia.js (Laravel)
import { PlatformProvider, createInertiaAdapter } from '@trackany-device/components';
createInertiaApp({
setup({ el, App, props }) {
createRoot(el).render(
<PlatformProvider adapter={createInertiaAdapter()}>
<App {...props} />
</PlatformProvider>
);
},
});import { Button, Card, CardContent, CardHeader, CardTitle } from '@trackany-device/components';
export default function Example() {
return (
<Card className="w-80">
<CardHeader>
<CardTitle>Hello world</CardTitle>
</CardHeader>
<CardContent className="flex gap-2">
<Button variant="primary">Save</Button>
<Button variant="outline">Cancel</Button>
</CardContent>
</Card>
);
}21 brand colour schemes are included. Apply via data-theme on any ancestor element:
| Token | Colour |
|---|---|
default / blue |
Blue-600 |
green |
Green-600 |
purple |
Purple-600 |
red |
Red-600 |
orange |
Orange-500 |
rose |
Rose-600 |
sky |
Sky-500 |
teal |
Teal-600 |
cyan |
Cyan-600 |
indigo |
Indigo-600 |
violet |
Violet-600 |
emerald |
Emerald-600 |
lime |
Lime-600 |
yellow |
Yellow-500 |
amber |
Amber-500 |
pink |
Pink-500 |
fuchsia |
Fuchsia-600 |
neutral |
Neutral-700 |
slate |
Slate-600 |
gray |
Gray-600 |
Each theme ships with a matching dark variant — add .dark to the same element.
AppShell · AppHeader · AppSidebar · AppSidebarHeader · AppContent · NavMain · NavUser · NavFooter · NotificationBell · AppLogo · Breadcrumbs · AppearanceTabs
Button · Input · Select · Checkbox · Switch · Slider · Textarea · Label · Badge · Avatar · Card · Dialog · Drawer · Sheet · Popover · Tooltip · DropdownMenu · Tabs · Accordion · Progress · Skeleton · Spinner · Separator · Alert · Sonner (toast)
DataGrid · DataList · Chart · StatCard · Pagination
LoginForm · RegisterForm · ForgotPasswordForm · ResetPasswordForm · ConfirmPasswordForm · OtpForm · VerifyEmailForm · SmsChallengeForm
KeenIcon — ~1 200 icons in four styles (duotone · filled · outline · solid):
import { KeenIcon } from '@trackany-device/components';
// Don't forget: import '@trackany-device/components/styles/keenicons.css';
<KeenIcon icon="home" style="duotone" className="size-5" />Browse all components interactively — includes a Theme toolbar to switch between all 21 colour schemes and a Color Mode toggle for dark mode.
npm run storybook # dev server on :6006
npm run build-storybook # static build → storybook-static/docker build -t tad-storybook .
docker run -p 8080:80 tad-storybook
# open http://localhost:8080npm install
npm run storybook # live-reload component dev
npm run types:check # TypeScript validationReleases are fully automated via semantic-release on every push to main.
| Commit prefix | Version bump |
|---|---|
fix: |
patch — 1.0.0 → 1.0.1 |
feat: |
minor — 1.0.1 → 1.1.0 |
feat!: / BREAKING CHANGE |
major — 1.1.0 → 2.0.0 |
chore: docs: ci: style: refactor: |
no release |
On release, semantic-release automatically:
- Calculates the next version from commit messages
- Updates
package.jsonandCHANGELOG.md - Creates a GitHub release with notes
- Publishes to npm
UNLICENSED — private, all rights reserved.