V voidkit
v0.3 · native

Beautiful UI.
Zero framework.

A copy-friendly component library built entirely on Web Standards. Accessible, themeable, typed, and ready for any stack — or no stack at all.

Get started Copy install command

01 / Setup

Installation

Import once. Use everywhere.

npm install @void-web-dev/kit

Import @void-web-dev/kit, then use custom elements directly in HTML. Every component exposes CSS custom properties and shadow parts for controlled customization.

02 / Actions

Button

Semantic variants, four sizes, loading and disabled states.

PrimarySecondaryOutlineGhostInfoWarningSuccessDeleteSavingDisabled

03 / Input

Form controls

Form-associated controls with labels, descriptions and errors.

@
Accept the terms and privacy policySome items selectedProduct updatesMarketing emails

03.1 / Composition

Input Group

Add icons, text, buttons and helper content around inputs and textareas.

Search documentation⌘K Websitehttps:// Code snippetscript.js0 / 280Run

04 / Choice

Select

Custom listbox behavior with full keyboard support.

No frameworkReactVueSvelte

05 / Content

Display

Composable surfaces, status and data feedback.

Project usage

Requests this billing period

Live
78,429 / 100k
+12 collaborators
Heads upYour trial ends in 6 days. Add a payment method to keep your projects running.InformationA new version of the component library is available.Storage warningYour project has used 85% of its storage quota.Deployment completeThe production release is now live.Deployment failedThe build exited with code 1. Review the logs and try again.
DefaultSecondaryOutlineError

06 / Navigation

Tabs

Roving focus and arrow-key navigation included.

AccountPasswordBilling

Account

Update your profile and public account details.

Password

Change your password and review active sessions.

Billing

Manage your plan, invoices and payment methods.

07 / Disclosure

Accordion

Single or multiple disclosure panels.

Is this really framework-free?Yes. The runtime uses native Custom Elements, Shadow DOM, ElementInternals and standard browser events.Can I use it with React or Vue?Yes. Web Components work across modern frameworks and in plain HTML.How do I customize the design?Override the semantic CSS tokens globally, or target exposed shadow parts for a specific component.

07.1 / Layout

Resizable panels

Accessible split layouts with pointer and keyboard resizing.

Navigation Project files

Drag the handle or focus it and use the arrow keys.
Canvas Preview area

Panel sizes stay proportional when the container changes.

08 / Overlay

Dialog

Native modal semantics, focus trapping and escape handling.

Open dialog

Create project

Deploy a new project in a few seconds.

CancelCreate project

09 / Feedback

Toast & tooltip

Polite announcements, destructive alerts and contextual hints.

InfoWarningSuccessErrorHover for context

10 / Advanced

Production patterns

Rich form controls, structured navigation and compact data displays.

Form workflow

FrankfurtAmsterdamSingapore

Progress and navigation

BoldItalicCode

Project health

This month Last 24 hours
Release readiness

Activity

Repository and environments are ready. Component tokens were reviewed. Build and accessibility checks are running.

Release details

Production Europe West 7f3c92a Healthy

10 / Complete set

The rest of the system

104 custom elements covering shadcn-style primitives and advanced application patterns.

Calendar & date

Data visualization

Selection

PersonalTeamEnterprise

Menus & popovers

Open menuProfile ⌘PBillingNotificationsPopoverDimensions

Set the size for the layer.

Data table

Empty state

No projects yetCreate a project to see deployments and analytics.New project

AI conversation

VoidkitHow can I help with your interface today?TodayYouShow me the complete component set.