Coloriginz Design System
shadcn custom registry
// components.json
"registries": {
"@col": "https://design-system.apps.coloriginz.com/r/{name}.json"
}Componenten worden als broncode naar je app gekopieerd — geen runtime-koppeling. Items met het label startpunt installeer je één keer; daarna zijn ze van jouw app en overschrijft een update ze nooit.
Gidsen
Geen code om te installeren — hoe je iets aansluit, en welke keuzes daarbij horen.
- Microsoft Entra ID aansluiten
Wat je aan IT vraagt, hoe de redirect URI’s eruitzien, en de vier beslissingen die je zelf moet nemen
Inloggen en authenticatie
Twee soorten inlogscherm om uit te kiezen, de Microsoft-knop, en een startpunt met de vier complete schermen.
- @col/auth-shellv1.0.0
Foto over het volle scherm, donkere laag, inhoud in een kaart erbovenop
- @col/auth-splitv1.0.0
Formulier in de ene kolom, foto in de andere — geen kaart, geen donkere laag
- @col/sso-buttonv1.0.0
Inlogknop voor Entra met het officiële Microsoft-logo
- @col/auth-pages-starterstartpuntv1.1.0
Inloggen, activeren, wachtwoord vergeten en resetten — vier schermen plus hun API-routes
Logica
Geen UI — pure functies zonder framework-afhankelijkheid, gedeeld tussen apps met heel verschillend gebruik.
- @col/rate-limitv1.0.0
In-memory rate limiter met schuivend venster, voor onauthenticated POST-routes. Geen preview — er valt niets te zien.
- @col/formatv1.0.0
Datum, tijd, getal, bedrag en bestandsgrootte formatteren, locale als parameter. Geen preview — vijf pure functies.
Status binnen een pagina
Laden, leeg en fout als blok ín een pagina — niet het volledige 404/500-scherm met logo.
- @col/page-statesv1.0.0
LoadingState, EmptyState (met filter-hints), ErrorState en WakingUpNotice — alles via props
Interactie
Besturingselementen binnen een pagina: bevestigen vóór een onomkeerbare actie, en door een lange tabel bladeren. Beide controlled.
- @col/confirm-dialogv1.0.0
Bevestigingsdialoog met annuleren/bevestigen, voor een verwijderactie of andere onomkeerbare stap
- @col/paginationv1.0.0
Vorige, paginakiezer en volgende — springt rechtstreeks naar pagina 40 van 55
Merk
Kleuren, logo’s en de bestanden die daarbij horen. Per label geschakeld.
- @col/brand-tokensv1.1.0
Merkkleuren per label als CSS-variabelen, geschakeld met data-label
- @col/brand-logov1.1.0
Merklogo in vier behandelingen: rond, monochroom, kleur op een witte schijf, of onbewerkt
- @col/brand-assetsstartpuntv1.0.0
Script dat de logo’s en achtergronden ophaalt naar public/brand/
Transactionele mail: één romp, HTML en platte tekst uit dezelfde bron.
- @col/email-shellv1.0.0
Bouwt merkgebonden e-mail uit blokken, met een Outlook-vaste knop en het logo als CID-bijlage
- @col/email-templatesv1.0.0
Wachtwoord instellen en wachtwoord vergeten, als blokkenreeks met Nederlandse en Engelse standaardzinnen
Ontwikkelen en testen
Alleen zichtbaar op test- en demo-omgevingen.
- @col/demo-modev1.1.0
Testbalk met rolselectie en e-mailconfigurator
- @col/demo-mode-starterstartpuntv1.0.0
De compositie en twee API-routes die demo-mode aansturen