Component Library
Self-contained, copy-paste-ready components for admin interfaces. No npm install — just copy the source into your project.
ATLAS components are designed to be copied and customized, not installed as a package. Each component below includes the full source code, a requirements list, and a usage example. Click "View full source" to see the complete, self-contained code. All components use Tailwind CSS utility classes and have zero external dependencies beyond React and lucide-react.
Input
Text input with label, placeholder, and error state.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
This field is required
Select
Native dropdown with label, placeholder, and chevron icon.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
Badge
Status indicators for labels, tags, and state.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
Toggle
Boolean switch for settings and preferences.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
Modal / Confirm Dialog
Overlay dialog with Escape-to-close, click-outside-to-close, and a pre-built confirm variant.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
Toast / Notification
Context-based toast system with auto-dismiss. Wrap your app in ToastProvider, then call useToast() anywhere.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
Empty State
Placeholder for empty lists, tables, or search results with optional action button.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
No documents yet
Upload your first document to get started.
Page Header
Consistent page title with optional description and action buttons.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
Users
Manage your team members and their roles.
Data Table
Searchable, sortable table with pagination, row selection, and bulk actions.
Copy this component into your project and customize it. No install needed — just Tailwind CSS classes.
| Name | Role | Status | ||
|---|---|---|---|---|
| Alice Johnson | alice@example.com | Admin | Active | |
| Bob Smith | bob@example.com | Editor | Active | |
| Carol White | carol@example.com | Viewer | Inactive | |
| Dan Brown | dan@example.com | Editor | Active | |
| Eve Davis | eve@example.com | Admin | Active |