@devcraft-ts/abac-admin-react-ui

> Pre-built UI components for ABAC Policy Administration with theme support - batteries included


🚀 Live Demo & Documentation

View Live Demo →

Explore a fully functional demo application showcasing all UI components with dark/light theme support, including complete documentation for abac-engine integration and best practices.

🎯 Overview

@devcraft-ts/abac-admin-react-ui provides a complete set of pre-built, customizable UI components for managing ABAC policies. Built on top of Radix UI and styled with Tailwind CSS, these components offer a production-ready admin interface with full dark/light theme support.

When to use this package:

- ✅ You want a ready-made ABAC admin UI with theme support
- ✅ You need to get up and running quickly
- ✅ You're okay with an opinionated design
- ✅ You need dark mode support out of the box
- ✅ Built on abac-engine for reliable policy evaluation

When NOT to use this package:

- ❌ You need full design control (use @devcraft-ts/abac-admin-react instead)
- ❌ You have an existing design system
- ❌ You want to minimize bundle size

📦 Installation

``bash
npm install @devcraft-ts/abac-admin-react-ui
`

Peer dependencies:

`bash
npm install react react-dom
`

🚀 Quick Start

$3

`tsx
import {
ThemeProvider,
ABACProvider,
PolicyList,
ThemeToggle,
} from "@devcraft-ts/abac-admin-react-ui";
import "@devcraft-ts/abac-admin-react-ui/styles.css";

function App() {
return (




`tsx
// app/layout.tsx
import { ThemeProvider } from "@devcraft-ts/abac-admin-react-ui";
import "@devcraft-ts/abac-admin-react-ui/styles.css";

export default function RootLayout({ children }) {
return (



{children}



);
}

// app/admin/policies/page.tsx
("use client");

import {
ABACProvider,
PolicyList,
ThemeToggle,
} from "@devcraft-ts/abac-admin-react-ui";

export default function PoliciesPage() {
return (



Wrap your app with ThemeProvider to enable theme support:

`tsx
import { ThemeProvider } from "@devcraft-ts/abac-admin-react-ui";

defaultTheme="system" // "light" | "dark" | "system"
storageKey="app-theme" // localStorage key (default: "abac-ui-theme")
>
{children}
;
`

$3

Access and control the theme programmatically:

`tsx
import { useTheme } from "@devcraft-ts/abac-admin-react-ui";

function MyComponent() {
const { theme, actualTheme, setTheme, toggleTheme } = useTheme();

return (


`tsx
import { ThemeToggle } from '@devcraft-ts/abac-admin-react-ui';

// Icon button (default)


// Button with label


// Different sizes



`

🎨 ABAC Components

$3

Displays a table of policies with search, filtering, and CRUD actions:

`tsx
import { PolicyList } from "@devcraft-ts/abac-admin-react-ui";

onCreate={() => setShowCreateDialog(true)}
onEdit={(id) => router.push(/policies/${id}/edit)}
onDelete={(id) => handleDelete(id)}
onView={(id) => router.push(/policies/${id})}
/>;
`

Props:

- onCreate?: () => void - Called when create button is clicked
- onEdit?: (policyId: string) => void - Called when edit button is clicked
- onDelete?: (policyId: string) => void - Called after successful deletion
- onView?: (policyId: string) => void - Called when a row is clicked

$3

Manage attributes for a specific resource:

`tsx
import { AttributeManager } from "@devcraft-ts/abac-admin-react-ui";

resourceType="user"
resourceId="user-123"
onEdit={(key) => handleEdit(key)}
onDelete={(key) => handleDelete(key)}
onCreate={() => setShowCreateDialog(true)}
/>;
`

Props:

- resourceType: ResourceType - Type of resource (required)
- resourceId: string - ID of the resource (required)
- onEdit?: (attributeKey: string) => void - Called when edit is clicked
- onDelete?: (attributeKey: string) => void - Called when delete is clicked
- onCreate?: () => void - Called when create button is clicked

$3

View audit logs for policy and attribute changes:

`tsx
import { AuditLogViewer } from "@devcraft-ts/abac-admin-react-ui";

onEntryClick={(id) => showDetails(id)}
autoRefresh={true}
refreshInterval={30000}
entityType="policy"
/>;
`

Props:

- onEntryClick?: (entryId: string) => void - Called when an entry is clicked
- autoRefresh?: boolean - Enable auto-refresh (default: false)
- refreshInterval?: number - Refresh interval in ms (default: 30000)
- entityType?: "policy" | "attribute" - Filter by entity type

$3

Policy creation and editing form:

`tsx
import { PolicyForm } from "@devcraft-ts/abac-admin-react-ui";

initialData={policy}
onSubmit={handleSubmit}
onCancel={() => setShowDialog(false)}
/>;
`

$3

Read-only policy display:

`tsx
import { PolicyViewer } from "@devcraft-ts/abac-admin-react-ui";

;
`

$3

Visual condition builder:

`tsx
import { ConditionBuilder } from "@devcraft-ts/abac-admin-react-ui";

value={conditions}
onChange={setConditions}
availableAttributes={attributes}
/>;
`

🎨 UI Components

$3

`tsx
import { Input } from "@devcraft-ts/abac-admin-react-ui";

label="Email"
type="email"
placeholder="Enter your email"
error={errors.email}
helperText="We'll never share your email"
required
/>;
`

$3

`tsx
import { Button } from '@devcraft-ts/abac-admin-react-ui';


Click me



Loading...


}>
Delete

`

Variants: primary, secondary, destructive, outline, ghost
Sizes: sm, md, lg

$3

`tsx
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@devcraft-ts/abac-admin-react-ui";



Policy Details
View and edit policy information

{/ Your content /}

Save Changes

;
`

$3

`tsx
import { Badge } from '@devcraft-ts/abac-admin-react-ui';

Active
Error
Warning
Info
Default
`

$3

`tsx
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@devcraft-ts/abac-admin-react-ui";

`tsx
import "@devcraft-ts/abac-admin-react-ui/styles.css";
`

$3

The package uses CSS variables for theming. Override them in your CSS:

`css
:root {
/ Primary color /
--primary: 221 83% 53%;
--primary-foreground: 0 0% 100%;

/ Secondary color /
--secondary: 240 5% 96%;
--secondary-foreground: 222 47% 11%;

/ Destructive (error) color /
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;

/ Background /
--background: 0 0% 98%;
--foreground: 222 47% 11%;

/ Card /
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;

/ Border radius /
--radius: 0.5rem;
}

/ Dark mode /
.dark {
--primary: 217 91% 60%;
--primary-foreground: 0 0% 98%;
--background: 240 10% 4%;
--foreground: 0 0% 98%;
--card: 240 10% 7%;
--card-foreground: 0 0% 98%;
/ ... other dark mode variables /
}
`

$3

Extend your Tailwind config:

`js
// tailwind.config.js
module.exports = {
darkMode: "class",
content: [
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/@devcraft-ts/abac-admin-react-ui/dist/*/.js",
],
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
// ... other colors
},
},
},
};
`

🔧 Utilities

$3

`tsx
import {
formatDate,
truncate,
getEffectColor,
getStatusColor,
} from "@devcraft-ts/abac-admin-react-ui";

// Format dates
formatDate(new Date()); // "Jan 1, 2024, 12:00 PM"

// Truncate strings
truncate("Very long text here...", 20); // "Very long text he..."

// Get badge colors
getEffectColor("PERMIT"); // "abac-badge-success"
getStatusColor(true); // "abac-badge-success"
`

$3

`tsx
import { cn } from "@devcraft-ts/abac-admin-react-ui";

className={cn("base-class", isActive && "active-class", "another-class")}
/>;
`

📚 Complete Example

`tsx
"use client";

import { useState } from "react";
import {
ThemeProvider,
ABACProvider,
PolicyList,
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
Button,
ThemeToggle,
Toaster,
useToast,
} from "@devcraft-ts/abac-admin-react-ui";
import "@devcraft-ts/abac-admin-react-ui/styles.css";

export default function PoliciesPage() {
const [showCreate, setShowCreate] = useState(false);
const { toast } = useToast();

const handleDelete = (id: string) => {
toast({
variant: "success",
title: "Policy deleted",
description: Policy ${id} has been deleted successfully.,
});
};

return (




Always wrap your app with ThemeProvider at the root:

`tsx



`

$3

Wrap policy components in ABACProvider:

`tsx



`

$3

Import the CSS file at the root of your app:

`tsx
// app/layout.tsx or _app.tsx
import "@devcraft-ts/abac-admin-react-ui/styles.css";
`

$3

Include Toaster component at your app root:

`tsx

{children}


`

$3

Components are built with accessibility in mind. Use proper labels and ARIA attributes:

`tsx
Email

`

🆕 What's New in v1.1.0

- ✨ Full Theme Support: Dark/light/system theme with ThemeProvider and useTheme hook
- 🎨 New ABAC Components: AttributeManager for managing resource attributes, AuditLogViewer` for tracking changes
- 🎯 Better Accessibility: Improved ARIA support and keyboard navigation
- 📱 Responsive Design: All components are mobile-friendly
- 🚀 Performance: Optimized animations and transitions
- 🎨 Enhanced Styling: Better dark mode support and smoother animations

🔗 Related Packages

- @devcraft-ts/abac-admin-core - Framework-agnostic core
- @devcraft-ts/abac-admin-react - Headless React hooks
- @devcraft-ts/abac-admin-nextjs - Next.js utilities

📖 Documentation

- Main Documentation
- API Reference
- Examples

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📄 License

MIT © astralstriker

🔗 Links

- GitHub: https://github.com/astralstriker/abac-admin
- npm: https://www.npmjs.com/package/@devcraft-ts/abac-admin-react-ui
- Issues: https://github.com/astralstriker/abac-admin/issues

---

Built with ❤️ using Radix UI, Tailwind CSS, Lucide Icons, and TypeScript