@marcwelti/mw-ui
v0.4.4
Published
Marc Welti - Styled UI components based on shadcn/ui
Downloads
2,604
Maintainers
siempiReadme
@marcwelti/mw-ui
Marc Welti's UI component library based on shadcn/ui, styled according to the Brand Design System.
Installation
npm install @marcwelti/mw-uiSetup
1. Import styles in your app's layout
// app/layout.tsx
import '@marcwelti/mw-ui/styles.css';2. Configure Tailwind (optional)
If you need to extend the theme in your app, you can import the preset:
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./app/**/*.{ts,tsx}',
'./node_modules/@marcwelti/mw-ui/dist/**/*.{js,mjs}',
],
// Your additional config...
};
export default config;Usage
import { Button, Card, Input, Dialog } from '@marcwelti/mw-ui';
// Intent-based Button system
<Button intent="primary" background="solid">
Book Now
</Button>
<Button intent="secondary" background="picture" size="lg">
Learn More
</Button>
// Card with gold accent
<Card variant="gold">
<CardHeader>
<CardTitle>Welcome</CardTitle>
<CardDescription>Get started with Marc Welti</CardDescription>
</CardHeader>
<CardContent>
Content here
</CardContent>
</Card>
// Input with gold focus
<Input placeholder="Enter your email" />Components
Core Components
- Button - Intent-based (primary/secondary/destructive/ghost/link × solid/picture)
- Input - Text input with gold focus border
- Textarea - Multi-line text input
- Label - Form labels
- Card - Container with default and gold variants
- Dialog - Modal dialogs
- Alert - Status messages (default/destructive/success/warning/info)
- AlertDialog - Confirmation dialogs
Form Components
- Checkbox - Gold checked state
- RadioGroup - Radio buttons with gold indicator
- Switch - Toggle switches with gold when active
- Select - Dropdown select with gold focus
- Slider - Range slider with gold track
- Toggle - Toggle buttons
- ToggleGroup - Group of toggle buttons
- Progress - Progress bars with gold indicator
- InputOTP - OTP input with gold focus
Navigation
- Tabs - Tab navigation
- Breadcrumb - Breadcrumb navigation
- Pagination - Page navigation
- NavigationMenu - Dropdown navigation
- Menubar - Application menubar
Data Display
- Table - Data tables
- Badge - Status badges (default/secondary/destructive/success/warning/info)
- Avatar - User avatars
- Calendar - Date picker calendar
- Carousel - Image/content carousel
- Chart - Data visualization (recharts)
Feedback & Overlay
- Tooltip - Hover tooltips
- Popover - Click-triggered popovers
- HoverCard - Hover-triggered cards
- DropdownMenu - Context menus
- ContextMenu - Right-click menus
- Command - Command palette
- Sheet - Slide-out panels
- Drawer - Mobile-friendly bottom sheets
- Toast - Toast notifications
- Sonner - Toast notifications (alternative)
Layout & Utility
- Separator - Visual dividers
- Skeleton - Loading placeholders
- ScrollArea - Custom scrollbars
- AspectRatio - Maintain aspect ratios
- Accordion - Expandable sections
- Collapsible - Show/hide content
- Resizable - Resizable panels
Brand Colors
| Color | Hex | Usage | |-------|-----|-------| | Brand Gold | #B08C53 | Primary accent, CTAs | | Gold Hover (Light) | #8B6D3D | Hover state (light mode) | | Gold Hover (Dark) | #C4A066 | Hover state (dark mode) |
Typography
- Font Family: Poppins
- Weights: Light (300), Normal (350), Medium (500), Semibold (600)
Dark Mode
All components support dark mode automatically via the .dark class on the <html> element.
// Using next-themes
import { ThemeProvider } from 'next-themes';
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>License
UNLICENSED - Marc Welti