UI Kit

About this UI Kit

This UI Kit is built using the Solo Design System (not related to my last name), which provides a comprehensive set of components and styles to create consistent and accessible user interfaces in my projects. The kit includes a variety of my pre-designed components such as buttons, cards, modals, and more, all adhering to best practices in design and usability.

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.

See solutions Explore platform →

98.7%on-time deliverables

40%↓handoff friction

21 CFRPart 11 aligned

Live Study ViewMilestone Alerts

Request demo How it works

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

Loaders

The Loader component is a small, customizable spinner used for showing loading states. It accepts width, heightand border props (strings or numbers) and sets matching CSS variables (--loader-width, --loader-height,--loader-border) so the pseudo-element spinner can be styled consistently. Place the loader inside a centered container or use a positioned parent (e.g. position: relative) when showing an overlay.

UI Kit

Buttons

Comprehensive button system supporting variants, sizes, icons, block layout, disabled and loading states, and full accessibility. Easily customized via props for label, icon, type, and more.

Variants

Sizes

Icons

States

Button as link

Outlined

States

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

Text input

Number

Select (single)

Select (multiple)Hold Cmd/Ctrl to multi-select.

Radios Phase I Phase II Phase III

Checkboxes Design Development SEO

Enable alerts

Slider 50

File input

Textarea

Invalid examplePlease enter a valid email.

Disabled

UI Kit

Inline Form Validation

Client-side rules with inline messages, an error summary, and accessible states.

UI Kit

Inline Async Validation

Debounced “email already taken?” check with loading state and accessible messages.

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.

Steppers

1Discovery & Planning
2Design & Prototyping
3Development & Testing
4Launch & Support

Discovery & Planning
Design & Prototyping
Development & Testing
Launch & Support

Linear: 25%

25%

Circular

UI Kit

Image Rotator

The ImageRotator cycles through an array of images on a configurable interval. Key props:

images — array of {src, alt}
interval — rotation period in milliseconds
transition — animation style (fade, slide, zoom, flip, kenburns, dissolve, crossfade, none)
transitionDuration — animation duration in ms (controls CSS and timing)
width / height — sizing; accepts numbers or CSS strings

The component renders layered slides for smooth enter/exit animations and honoursprefers-reduced-motion. Remote images are left unoptimized in dev to avoid Next.js optimizer errors.

Select a Transition:

UI Kit

Horizontal Carousel

Cards as image placeholders. Use the arrows or drag/scroll. Snaps per card.

Sample card 1Placeholder imagery / copy.

Sample card 2Placeholder imagery / copy.

Sample card 3Placeholder imagery / copy.

Sample card 4Placeholder imagery / copy.

Sample card 5Placeholder imagery / copy.

Sample card 6Placeholder imagery / copy.

Sample card 7Placeholder imagery / copy.

Sample card 8Placeholder imagery / copy.

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

Sungold Cherry Tomatoes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Image 1 description.

UI Kit

Breadcrumbs

Context navigation with separators and responsive overflow.

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.

Request a demo Download overview

UI Kit

Toasts

Toasts are used to display brief, auto-dismissing notifications.

Toasts

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

Tooltips & Popovers

Short hints (hover/focus) and richer, non-modal popovers (click/ESC/outside).

Tooltips

Link with tooltipHover/focus chip

Popovers

UI Kit

Pop Confirm

UI Kit

Modals & Overlays

Centered modal and slide-over overlay. Keyboard: ESC to close. Focus is trapped inside.

UI Kit

Command Palette

Quickly jump to UI Kit sections or run actions. Press ⌘/Ctrl + K or click the button to open the palette. Type to filter, use ↑/↓ to navigate, Enter to run, and Esc to close.

UI Kit

Search Suggest Chips

Type to filter suggestions and add tokens (Enter or comma). When the input is empty Backspace removes the last token. Use the Arrow keys to navigate suggestions and press Enter or click a suggestion to add it. Focusing the field shows recent suggestions when available.

QueryExamples: Accessibility Standards, Agentic Development, Engineering Management, Front-end Development…

UI Kit

File Uploader

Drag files here or browse. Shows basic validation and mock progress.

Drag & drop filesor click to browse — up to 10 files, max 10 MB each

UI Kit

File Uploader (Images)

Drag & drop or browse. Shows live thumbnails with remove & size checks.

Drop images here

or click to — up to 10 files, max 10 MB each

UI Kit

Meter / Score

Linear score with thresholds + native <meter> styling. Drag to preview values.

Score

72 • Fair

0–49: Poor • 50–74: Fair • 75–89: Good • 90–100: Excellent

Native meter

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.

November 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

UI Kit

Date Picker

Pick a single date with “Today” and “Clear.”

November 2025

Sun

Mon

Tue

Wed

Thu

Fri

Sat

UI Kit

Metric Cards

Small metric cards for dashboards and summaries.

...…

—

...…

—

...…

—

UI Kit

Combobox / Autocomplete

Single-select and multi-select with chips. Arrow keys + Enter, click to choose.

Single-select

Choose an item

Multi-select

Select items

UI Kit

Data Table

Sortable columns, sticky header, and client-side pagination.

ID	Phase	Version	Status	Task
1000	UI Design	I	Sprint Planning	12
1001	UI Development	II	In Review	19
1002	Accessibility Fixes	III	Deployed	26
1003	Bugs & Issues	I	Sprint Planning	33
1004	UI Design	II	In Review	40
1005	UI Development	III	Deployed	47
1006	Accessibility Fixes	I	Sprint Planning	54
1007	Bugs & Issues	II	In Review	61

Click headers to sort. Rows per page selectable below.

Rows:

Page 1 / 4

UI Kit

Pagination

Reusable pager with first/prev/number/next/last, accessible keyboard shortcuts, and a page-size selector.

Keyboard: ← → (prev/next), Home/End (first/last), PageUp/PageDown (skip pages). The demo uses a skip step of 5 pages.

Items per page

53 items • Page 1 of 7

Record #1
Placeholder row for pagination demo.
Record #2
Placeholder row for pagination demo.
Record #3
Placeholder row for pagination demo.
Record #4
Placeholder row for pagination demo.
Record #5
Placeholder row for pagination demo.
Record #6
Placeholder row for pagination demo.
Record #7
Placeholder row for pagination demo.
Record #8
Placeholder row for pagination demo.

UI Kit

Filters

Toggle chips with counts, “Clear all,” and live results.

0 selected

Result 1

Sample result

Result 2

Sample result

Result 3

Sample result

Result 4

Sample result

Result 5

Sample result

Result 6

Sample result

Result 7

Sample result

Result 8

Sample result

UI Kit

Logic Pills (Selected Filters)

Removable filter chips with AND/OR logic and quick “clear all”.

No filters selected

18 results

Result 1

Version: II • Status: Deployed • Phase: UI Design

Result 2

Version: I • Status: Sprint Planning • Phase: UI Development

Result 3

Version: II • Status: Sprint Planning • Phase: UI Development

Result 4

Version: I • Status: Deployed • Phase: UI Development

Result 5

Version: II • Status: Sprint Planning • Phase: UI Design

Result 6

Version: I • Status: Sprint Planning • Phase: UI Development

Result 7

Version: II • Status: Deployed • Phase: UI Development

Result 8

Version: I • Status: Sprint Planning • Phase: UI Development

Result 9

Version: II • Status: Sprint Planning • Phase: UI Design

Result 10

Version: I • Status: Deployed • Phase: UI Development

Result 11

Version: II • Status: Sprint Planning • Phase: UI Development

Result 12

Version: I • Status: Sprint Planning • Phase: UI Development

Result 13

Version: II • Status: Deployed • Phase: UI Design

Result 14

Version: I • Status: Sprint Planning • Phase: UI Development

Result 15

Version: II • Status: Sprint Planning • Phase: UI Development

Result 16

Version: I • Status: Deployed • Phase: UI Development

Result 17

Version: II • Status: Sprint Planning • Phase: UI Design

Result 18

Version: I • Status: Sprint Planning • Phase: UI Development

Add:

About this UI Kit

Page Hero

Tulio Solorzano

Cards

With Header

Loaders

Buttons

Variants

Sizes

Icons

States

Outlined

States

Forms & Inputs

Contact form

Control gallery

Inline Form Validation

Inline Async Validation

Tabs

Accordion

Getting started

Integrations

Security & compliance

Support & timelines

Stepper & Progress

Steppers

Multi-step Modal Wizard

Image Rotator

Horizontal Carousel

Image Slider

Sungold Cherry Tomatoes

Breadcrumbs

CTA Band

Ready to align your study team?

Toasts

Toasts

Inline Alerts

Tooltips & Popovers

Tooltips

Popovers

Pop Confirm

Modals & Overlays

Command Palette

Search Suggest Chips

File Uploader

File Uploader (Images)

Meter / Score

Date-Range Picker

Date Picker

Date Input (Popover)

Metric Cards

Combobox / Autocomplete

Single-select

Multi-select

Data Table

Pagination

Filters

Result 1

Result 2

Result 3

Result 4

Result 5

Result 6

Result 7

Result 8

Logic Pills (Selected Filters)

Result 1

Result 2

Result 3

Result 4

Result 5

Result 6

Result 7

Result 8

Result 9

Result 10

Result 11

Result 12

Result 13

Result 14