react-schema-form-wizard/dist/index.esm.css

A customizable React JSON Schema Form library with shadcn/ui components and multi-step support

:root{--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--background:0 0% 100%;--foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96%;--secondary-foreground:222.2 84% 4.9%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--muted:210 40% 96%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96%;--accent-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--radius:0.5rem}.form-control{background-color:#fff!important;border:2px solid #1d4ed8!important;border-radius:.375rem;color:#000!important;display:flex;font-size:.875rem;height:2.5rem;padding:.5rem .75rem;transition:all .2s;width:100%}.form-control:focus{border-color:#1e40af!important;box-shadow:0 0 0 2px rgba(96,165,250,.5)!important;outline:none!important}.form-control:disabled{cursor:not-allowed;opacity:.5}.form-control::-moz-placeholder{color:#9ca3af}.form-control::placeholder{color:#9ca3af}.form-control select,.form-control[type=select],select.form-control{background-color:#fff!important;border:2px solid #1d4ed8!important;border-radius:.375rem;color:#000!important;cursor:pointer;display:flex;font-size:.875rem;height:2.5rem;padding:.5rem .75rem;transition:all .2s;width:100%}.form-control select:focus,.form-control[type=select]:focus,select.form-control:focus{border-color:#1e40af!important;box-shadow:0 0 0 2px rgba(96,165,250,.5)!important;outline:none!important}.form-control[type=textarea],textarea.form-control{min-height:6rem;resize:vertical}.rjsf-button{align-items:center;border:none;border-radius:.375rem;cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;justify-content:center;padding:.5rem 1rem;transition:all .2s;white-space:nowrap}.rjsf-button-primary{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.rjsf-button-primary:hover{background-color:hsl(var(--primary)/.9)}.rjsf-button-secondary{background-color:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}.rjsf-button-secondary:hover{background-color:hsl(var(--secondary)/.8)}.rjsf-button:disabled{opacity:.5;pointer-events:none}.rjsf-input{background-color:#fff;border:2px solid #1d4ed8;border-radius:.375rem;color:#000;display:flex;font-size:.875rem;height:2.5rem;padding:.5rem .75rem;transition:all .2s;width:100%}.rjsf-input:focus{border-color:#1e40af;box-shadow:0 0 0 2px rgba(96,165,250,.5);outline:none}.rjsf-input:disabled{cursor:not-allowed;opacity:.5}.rjsf-input::-moz-placeholder{color:#9ca3af}.rjsf-input::placeholder{color:#9ca3af}.rjsf-select{background-color:#fff;border:2px solid #1d4ed8;border-radius:.375rem;color:#000;cursor:pointer;display:flex;font-size:.875rem;height:2.5rem;padding:.5rem .75rem;transition:all .2s;width:100%}.rjsf-select:focus{border-color:#1e40af;box-shadow:0 0 0 2px rgba(96,165,250,.5);outline:none}.form-group{margin-bottom:1.5rem}.control-label{color:#1d4ed8!important;display:block;font-size:1rem;font-weight:600;margin-bottom:.25rem}.control-label .required:after{color:#ef4444;content:" *";margin-left:.25rem}.field-description{color:#6b7280;font-size:.75rem;margin-bottom:.25rem}.error-detail,.text-danger{color:#ef4444!important;font-size:.75rem;margin-top:.25rem}.help-block{color:#9ca3af;font-size:.75rem;margin-top:.25rem}.rjsf-form-container{display:flex;flex-direction:column;gap:1rem;min-width:200px}.rjsf-progress-container{margin-bottom:1.5rem}.rjsf-progress-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.rjsf-step-title{font-size:1.25rem;font-weight:600}.rjsf-step-indicator{color:#6b7280;font-size:.875rem}.rjsf-progress-bar{background-color:#e5e7eb;border-radius:9999px;height:.5rem;width:100%}.rjsf-progress-fill{background-color:#2563eb;border-radius:9999px;height:.5rem;transition:all .3s}.rjsf-nav-buttons{display:flex;justify-content:space-between;margin-top:1.5rem}.rjsf-nav-button{border:none;border-radius:.375rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;font-weight:600;padding:.5rem 1.5rem;transition:all .2s}.rjsf-nav-button-back{background-color:#d1d5db;color:#374151}.rjsf-nav-button-next{background-color:#1d4ed8;color:#fff}.rjsf-nav-button-next:hover{background-color:#1e40af}.rjsf-nav-button-submit{background-color:#059669;color:#fff}.rjsf-nav-button-submit:hover{background-color:#047857}.rjsf-error-container{background-color:#fef2f2;border:1px solid #fecaca;border-radius:.375rem;margin-top:1rem;padding:1rem}.rjsf-error-title{color:#991b1b;font-weight:600;margin-bottom:.5rem}.rjsf-error-list{color:#b91c1c;list-style:disc;list-style-position:inside}.rjsf-success-container{background-color:#f0fdf4;border-radius:.375rem;color:#166534;margin-top:1rem;padding:1rem}.rjsf-mb-4{margin-bottom:1rem}.rjsf-mb-6{margin-bottom:1.5rem}.rjsf-mt-2{margin-top:.5rem}.rjsf-mt-4{margin-top:1rem}.rjsf-mt-6{margin-top:1.5rem}.rjsf-text-2xl{font-size:1.5rem}.rjsf-text-xl{font-size:1.25rem}.rjsf-font-bold{font-weight:700}.rjsf-font-semibold{font-weight:600}.rjsf-text-gray-600{color:#4b5563}.rjsf-text-gray-500{color:#6b7280}.rjsf-w-full{width:100%}.rjsf-flex{display:flex}.rjsf-flex-col{flex-direction:column}.rjsf-gap-4{gap:1rem}.rjsf-justify-between{justify-content:space-between}.rjsf-justify-end{justify-content:flex-end}.rjsf-items-center{align-items:center}