DuPage Labs@dupagelabs/ui
npm
Design System
Preview
Mobile
Brand
Overview
About
Color
Typography
Spacing
Button
Checkbox
Switch
Radio
Input
TextArea
Alert
Badge
Chip
Tooltip
Divider
Avatar
Empty State
Tabs
Dropdown
Dropdown Menu
Search Field
Pagination
Progress Tracker
Breadcrumb
Accordion
File Upload
Date & Time
Data Table
Text
Card
Dialog
Sheet
Brands
Client brands
Company tokens
@DUPAGELABS/UIOne design system for Next.js and Expo.White-label themes per client — same components, no forks, no parallel design systems. Browse the gallery, then unlock saved brands with Starter.
Browse components →
Foundations
Start 90-day free trial →
DuPage LabsComponents
Button
Input
Dialog
Tabs
BrandsNorthshoreEmber
Button
Primary
Same API on Next.js and Expo.
Save
Cancel
Company tokens
Get started easilyInstall once, wrap your app, and ship the same controls on web and native.
1
Install the package
Add @dupagelabs/ui to your Next.js or Expo project.
2
Wrap with the provider
DupageUIProvider + createConfig themes every control from one place.
3
Use the components
Button, Input, Dialog, Sheet, and more — typed variants, same imports.
npm i @dupagelabs/ui
import { DupageUIProvider, createConfig } from '@dupagelabs/ui' export function App({ children }) { return ( <DupageUIProvider config={createConfig()}> {children} </DupageUIProvider> ) }
Button
Input
Dialog
Brand
import { Button } from '@dupagelabs/ui' <Button variant="primary">Save</Button>
Explore the galleryFoundations, components, and client brand presets — same docs you use after you sign in.Browse components →
Unlock saved brandsStarter adds a card and a 90-day trial. Studio for multi-brand. Partner is Contact us.View plans →