Component Reference
Better Admin Component Reference
Better Admin provides a comprehensive set of production-ready components designed to work seamlessly with better-query and better-auth. All components follow the patterns from shadcn-admin-kit and are fully customizable.
Quick Links
- Admin - Root application component
- Layout - Application shell and navigation
- Dashboard - Build custom dashboards with stats
- List - Display lists of records
- DataTable - Feature-rich table component
- Create - Create new records
- Edit - Edit existing records
- Show - Display single records
Installation
Install any component using the Better Admin CLI:
npx better-admin add [component-name]The CLI automatically:
- Installs required shadcn/ui components
- Installs npm dependencies
- Copies the component to your project
Component Categories
Core Components
List & Display
- Dashboard - Dashboard page with stats and metrics
- List - List page container
- DataTable - Data table with sorting and filtering
- Show - Show page container
Forms & Inputs
- Create - Create page container
- Edit - Edit page container
- SimpleForm - Form container
- TextInput - Text input field
- SelectInput - Select dropdown
- BooleanInput - Checkbox input
Navigation
- AppSidebar - Sidebar navigation
- Breadcrumb - Breadcrumb trail
- CreateButton - Navigate to create page
- EditButton - Navigate to edit page
Authentication
Usage with better-query
Components automatically integrate with better-query:
import { List, DataTable } from '@/components/admin';
import { query } from '@/lib/query';
export const PostList = () => (
<List resource="posts">
<DataTable>
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="created_at" />
</DataTable>
</List>
);Usage with better-auth
Components integrate with better-auth for authentication:
import { Admin } from '@/components/admin';
import { createAuthProvider } from 'better-admin';
import { authClient } from '@/lib/auth-client';
const authProvider = createAuthProvider({ authClient });
export default function App() {
return (
<Admin authProvider={authProvider}>
{/* Resources */}
</Admin>
);
}Component Patterns
List-Detail Pattern
// List view
export const PostList = () => (
<List>
<DataTable>
<DataTable.Col source="title" />
<DataTable.Col>
<EditButton />
</DataTable.Col>
</DataTable>
</List>
);
// Detail view
export const PostEdit = () => (
<Edit>
<SimpleForm>
<TextInput source="title" />
<TextInput source="content" />
</SimpleForm>
</Edit>
);Master-Detail Pattern
export const OrderShow = () => (
<Show>
<SimpleShowLayout>
<TextField source="order_number" />
<DateField source="order_date" />
<ReferenceManyField reference="order_items" target="order_id">
<DataTable>
<DataTable.Col source="product_name" />
<DataTable.Col source="quantity" />
<DataTable.Col source="price" />
</DataTable>
</ReferenceManyField>
</SimpleShowLayout>
</Show>
);