The portal to your secrets. A beautifully crafted, high-security management interface for Grimoire — your self-hosted secrets vault and configuration manager.
- 🛡️ Secure Vaulting: Manage sensitive credentials with an interface designed for security first.
- 🌍 Environment Management: Switch between Development, Staging, and Production contexts with zero friction.
- 🧙♂️ Elegant UX: A dark, magical aesthetic built with React 19, Tailwind CSS 4, and Framer Motion.
- 🌑 Fluid Animations: Powered by
motionfor smooth, meaningful transitions. - 📊 Insightful Dashboards: Keep track of API keys, app configurations, and secret rotations.
- 🚀 Modern Stack: Fully typed with TypeScript, tested with Vitest, and built with Vite 6.
| Ingredient | Purpose |
|---|---|
| React 19 | Modern UI components & state management |
| Tailwind CSS 4 | Ultra-efficient utility-first styling |
| Vite 6 | Lightning-fast build tool and dev server |
| Vitest | Blazing fast unit and integration testing |
| Framer Motion | Magical UI animations and interactions |
| Zustand | Lightweight, atomic state management |
| Lucide React | Beautifully simple icon set |
Clone the repository and step into the circle:
git clone https://github.com/guibranco/grimoire-ui.git
cd grimoire-uiInstall the necessary magical artifacts:
npm installLaunch the development portal:
npm run devOpen http://localhost:3000 to see the magic happen.
npm run dev— Starts the development server at port 3000.npm run build— Compiles the project into a production-readydistfolder.npm run test— Runs the test suite in watch mode.npm run test:coverage— Executes tests and generates a detailed coverage report.npm run lint— Performs a thorough type-check with TypeScript.npm run clean— Clears thedistdirectory.
We take reliability seriously. Our testing suite ensures that your secrets stay safe and the UI stays consistent.
# Run tests
npm run test
# Run tests with coverage
npm run test:coverageTo create a optimized production build, run:
npm run buildThe artifacts will be generated in the dist/ directory, ready to be hosted on your magical cloud.
This project is configured for GitHub Pages. Every push to the main branch triggers a magical workflow that:
- 🏗️ Builds the application.
- 🧪 Runs all tests.
- 🚀 Deploys to http://guilherme.stracini.com.br/grimoire-ui/
- 🏷️ Creates a new SemVer release automatically.
Feel like adding a new spell?
- Fork the repository.
- Create your feature branch (
git checkout -b feature/amazing-spell). - Commit your changes (
git commit -m 'Add some amazing spell'). - Push to the branch (
git push origin feature/amazing-spell). - Open a Pull Request.
Distributed under the MIT License. See LICENSE for more information.
Built with ✨ and ☕ by guibranco