Sungold Cherry Tomatoes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Image 1 description.
UI Kit
Command Palette
Global quick actions. Press ⌘/Ctrl +K or use the button.
UI Kit
Page Hero
A hero component that showcases key content and actions, with a visually striking background and prominent call-to-action buttons.
Regulatory-readyCollaboration-first
Tulio Solorzano
Front End Engineering Manager and Developer with 20 years of experience spanning engineering management, front-end development, design, sprint planning and estimation, and product management. Passionate about building high-performing, collaborative teams at the intersection of design, software, and product. Currently leveraging my years of experience to use the power of AI for Agentic and Spec Driven development.
98.7%on-time deliverables
40%↓handoff friction
21 CFRPart 11 aligned
Live Study ViewMilestone Alerts
UI Kit
Cards
Modular card layouts with header support, variant styling, and interactive hover/focus states for clear content grouping and visual hierarchy.
With Header
This card has a header with an icon and text.
This card has no header. Just content.
This card uses extra classes for variant styles.
UI Kit
Skeletons & Empty States
Shimmer placeholders during load and friendly empty screens with CTAs.
Card skeletons
Empty state
No documents yet
Create your first protocol or import an SOP template to get started.
UI Kit
Forms & Inputs
Flexible form and input system supporting text, selects, checkboxes, radios, sliders, file uploads, and validation. All controls are accessible, customizable, and support helpful messaging and state via props.
Control gallery
Hold Cmd/Ctrl to multi-select.
Please enter a valid email.
UI Kit
Tabs
Accessible tab interface with ARIA roles, keyboard navigation (←/→, Home/End), focus management, and horizontal scrolling for overflow. Only one tab panel is visible at a time, and all controls are screen reader friendly.
High-level snapshot of the study—sites, milestones, and current risks.
UI Kit
Accordion
Accessible accordion component with ARIA roles, keyboard navigation (↑/↓, Home/End), and smooth open/close animations. Only one panel is open at a time, and all controls are screen reader friendly.
Kickoff steps, discovery, and mapping of roles (RACI) to align the team on milestones and SLAs.
UI Kit
Stepper & Progress
A multi-step workflow component with next/previous navigation, plus visual linear and circular progress indicators that update as you advance through each step.
Stepper
- 1Intake
- 2Integrations
- 3Review
- 4Go-live
- 5Maintenance
Progress
Linear: 20%
20%
CircularUI Kit
Image Rotator
Rotates through images every x amount of seconds. Interval can be customized.
UI Kit
Horizontal Carousel
Cards as image placeholders. Use the arrows or drag/scroll. Snaps per card.
UI Kit
Image Slider
Interactive image slider with:
- Large main image area with smooth sliding transitions
- Previous/Next arrow buttons
- Clickable thumbnail navigation
- Active image indicator
- Keyboard navigation (left/right arrows)
- Touch/drag/swipe support
- Responsive layout
- Customizable heading tag and class for info panel
UI Kit
CTA Band
A prominent call-to-action band for demos, downloads, or contact.
Ready to align your study team?
Get a demo tailored to your protocol and timelines.
UI Kit
Tooltips & Popovers
Short hints (hover/focus) and richer, non-modal popovers (click/ESC/outside).
Tooltips
Link with tooltipHover/focus chip
Popovers
UI Kit
Modals & Overlays
Centered modal and slide-over overlay. Keyboard: ESC to close. Focus is trapped inside.
UI Kit
Toasts
Toasts are used to display brief, auto-dismissing notifications.
Toasts Demo
Inline Alerts
Success: Your settings have been saved.
Info: New template guidance is available.
Warning: A site has overdue tasks.
Error: Couldn’t sync with the EDC. Try again.
UI Kit
File Uploader
Drag files here or browse. Shows basic validation and mock progress.
UI Kit
File Uploader (Images)
Drag & drop or browse. Shows live thumbnails with remove & size checks.
Drop images here
or
0 files • max 10MB each
UI Kit
Meter / Score
Linear score with thresholds + native <meter> styling. Drag to preview values.
72 • Fair
0–49: Poor • 50–74: Fair • 75–89: Good • 90–100: Excellent
UI Kit
Click headers to sort. Rows per page selectable below.
Data Table
Sortable columns, sticky header, and client-side pagination.
| ID | Site | Phase | Status | Subjects |
|---|---|---|---|---|
| 1000 | North Site | I | Draft | 12 |
| 1001 | South Site | II | In Review | 19 |
| 1002 | East Site | III | Approved | 26 |
| 1003 | West Site | I | Draft | 33 |
| 1004 | North Site | II | In Review | 40 |
| 1005 | South Site | III | Approved | 47 |
| 1006 | East Site | I | Draft | 54 |
| 1007 | West Site | II | In Review | 61 |
Page 1 / 4
UI Kit
Date-Range Picker
Select start and end dates using the calendar or the quick presets. Click a day to set the start date, then click another day to set the end date (clicking an earlier day will swap start and end). Use the presets for common ranges and the Clear button to reset.
Use the arrow keys to move between days, Page Up/Page Down to move between months, Home/End to jump to the start/end of the week, and Enter or Space to select the focused date.
—
September 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4