- Tailwind
- React / Next
- Formik
You can activate Dark mode in your tailwind.config.js
This package is ready for it
<ThemeProvider defineBodyColor>
<SidebarProvider>
<Sidebar>
<NextLinkMenu to="/" icon="BellIcon" name="Test" />
</Sidebar>
<Header title="Woogo UI" haveNotification/>
<MainContainer>
<PageTitle>Dashboard</PageTitle>
<SectionTitle>Summary</SectionTitle>
<div className="container grid grid-cols-4 gap-4">
<InfoCard title="Users Account">556</InfoCard>
<InfoCard title="Pure Benefice">+8500€</InfoCard>
<InfoCard title="Open Box">5</InfoCard>
</div>
<div className="space-x-5 mt-5">
<Button styleType="primary">Primary</Button>
<Button styleType="primary" size="small">Small</Button>
<Button styleType="outline">Outline</Button>
<Button styleType="link">Link</Button>
<Button styleType="primary" disabled>Primary Disabled</Button>
<Button styleType="outline" disabled>Outline Disabled</Button>
<Button styleType="link" disabled>Link Disabled</Button>
</div>
<div className="mt-5 space-x-5">
<Badge type="primary">Primary</Badge>
<Badge type="neutral">Neutral</Badge>
<Badge type="danger">Danger</Badge>
<Badge type="success">Success</Badge>
<Badge type="warning">Warning</Badge>
</div>
</MainContainer>
</SidebarProvider>
</ThemeProvider>
For more exemple look stories in dir : src/stories
<ReactLinkMenu to="/" icon="BellIcon" name="Test" />
<NextLinkMenu to="/" icon="BellIcon" name="Test" />
To prevent purge of class in the package your need to add next line to your tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@woogo/admin-ui/src/theme/default.ts'],
safelist: ['dark']
},
theme: {
extend: {},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [
require('@tailwindcss/forms')
],
}
If you use dark theme you must put this in safelist like above
You can choose to set with javascript the class to body with props defineBodyColor
on ThemeProvider component
Or you can add this to your css file
body {
@apply bg-gray-50 dark:bg-gray-900;
}
Check stories/tailwind.css
Add ::webkit*
class in your css file
- Badges
- Buttons
- Cards
- Contexts
- Froms
- Header
- Sidebar
- Tables
- Titles
- Icons
- Modal
- Loader
- Text
- SelectSearch
- RichEditor
moutehard | GautheyValentin |
- SVG Loader Original : Sam Herbert (@sherb) | More Info
MIT