Skip to content
INZIU INZIU.cc

Components

All UI components in this project

Form / Formulier

Button variants, sizes & states
Input labels, icons & states

Include https://

Textarea multiline input with hint

Supports markdown formatting

Select dropdown options
Checkbox with description & disabled state
Radio default & card variant
Switch sizes & states

Switch to a darker color theme.

Data Display / Gegevensweergave

Avatar sizes
Avatar Avatar
Avatar Avatar
Avatar Avatar
Avatar Avatar
Avatar Avatar
AvatarGroup stacked with overflow
Anna Anna
Mark Mark
Sara Sara
Tom Tom
+2
Badge variants, pill & pulse
Default Success Warning Error Info Brand Pill Live
Card variants

Default

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Outline

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Elevated + hover

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Solid

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Ghost

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Table striped rows
Name Role Status
Anna de Vries Designer Active
Mark Jansen Developer Active
Sara Bakker Product Manager Away
Tom Smit QA Engineer Active
Progress determinate, variants & indeterminate
Uploading... 35%
Skeleton loading placeholders
GoogleMap embedded map (setup state)

Google Maps

Add PUBLIC_GOOGLE_MAPS_API_KEY to your .env file to enable the map.

Feedback / Terugkoppeling

Alert variants & dismissible
Toast triggered notifications
Tooltip positions
Top tooltip Bottom tooltip Left tooltip Right tooltip

Overlay / Overlay

Accordion card variant, exclusive
What is INZIU?
INZIU is a personal site and component playground used to build and showcase UI patterns.
How does it work?
Each component lives in its own folder with variants, styles and usage examples.
Can I reuse these components?
Yes, every component on this page is a real, working instance.
ConsentBanner cookie banner (active only when enabled)

We use cookies to improve your experience. Privacy policy

Dialog modal with footer actions
Dropdown menu with icons & separator
Tabs horizontal tabs
A short overview with some placeholder content goes here.
More detailed placeholder content for this tab.
Settings-related placeholder content.
VerticalTabs with icons & descriptions
Profile content placeholder.
Security content placeholder.
Notifications content placeholder.

Marketing / Marketing

CTA invert variant
Ready to get started?
Join hundreds of users already building with these components.
SocialProof avatars + trust text

Trusted by 500+ happy users

Logo sizes & letter monogram
INZIU INZIU INZIU INZIU I
Wordmark brand text
INZIU.cc
NpmCopyButton copy-to-clipboard command

Layout / Layout

Separator horizontal, with label & vertical
Left Right

Content / Inhoud

CodeBlock with filename & line numbers
example.ts
1 function welkom(naam: string) {
2 return `Hallo, ${naam}!`;
3 }
4
5 console.log(welkom('Dennis'));

Primitives / Primitieven

Icon sample icon set
menu
search
mail
phone
heart
star
shield
globe
sun
moon
zap
code
check-circle
alert-circle
info
github

Apps, tools,
and experiments.

A mismatched collection of web apps. Categories: Games, Knowledge, Productivity, Lifestyle.

Not because I think I can do better — mostly experiments. And no rights can be derived from the outcome or functionality. LOL

All relics

What AI Progress Leaves Out

AI systems are optimized for maximum output, not genuine understanding. This raises the empirical question of who is truly investigating the structural systemic risks, as energy consumption rises exponentially, training data depletes, and decision-making increasingly escapes adequate institutional oversight.

AI Head