Repository files navigation

Atlas UI is a flexible, component-driven UI toolkit for Vue 3 projects, designed for clean integration with PrimeVue (Unstyled), TailwindCSS, Inertia.js, and composable architecture.

• General Composables - Vue 3 composables for any project

  • useModal - Reactive global modal manager
  • useScroll - Reactive scroll tracking utility
  • useTheme - Detects and manages light/dark mode

• Inertia Composables - Inertia.js-specific composables

  • useDataTableOptions - Server-driven pagination/sorting
  • useFormSubmit - Form submission with hooks
  • usePageProp - Access Inertia page props

• Format Utilities - Format data for display
• Validation Utilities - Validate inputs
• Environment Utilities - Environment detection

npm install github:tmarois/atlas-ui#semver:^1.1

Peer dependencies:

"@tabler/icons-vue": "^3.31.0","primeicons": "^7.0.0","primevue": "^4.0.0","tailwind-merge": "^3.2.0","tailwindcss": "^4.1.4","tailwindcss-primeui": "^0.6.1","vue": "^3.4.0","vuedraggable": "^4.1.0"

If using tiptap editor, install these:

"@tiptap/extension-placeholder": "^2.12.0","@tiptap/extension-bold": "^2.11.7","@tiptap/extension-bullet-list": "^2.11.7","@tiptap/extension-hard-break": "^2.11.7","@tiptap/extension-link": "^2.11.7","@tiptap/extension-list-item": "^2.11.7","@tiptap/extension-ordered-list": "^2.11.7","@tiptap/starter-kit": "^2.11.7","@tiptap/vue-3": "^2.11.7",

If using inertia composables make sure@inertiajs/vue3 is installed.

Atlas UI includes a Vite-based visual testing environment for UI components, especially focused on layout, dark mode, theming, and sizing.

# Start the visual testing environmentnpm run dev

This will open a development server where you can interact with components, toggle dark mode, adjust sizes, and test different configurations. The testing environment is separate from the main source code as it's only used for development purposes.

For more details, see theTesting Environment Documentation.

npmtest

npm run eslint