PatternFly Svelte
A Svelte component library implementing PatternFly design system components.
Installation
npm install @patternfly/svelte @patternfly/patternfly
Usage
<script>
import { Button } from '@patternfly/svelte';
import '@patternfly/svelte/styles.css';
</script>
<Button variant="primary">Click me</Button>
Components
š View the Storybook for live examples and documentation.
The following PatternFly components are available:
| Component | PatternFly Docs |
|---|---|
| Accordion | Docs |
| Action List | Docs |
| Alert | Docs |
| Avatar | Docs |
| Badge | Docs |
| Banner | Docs |
| Brand | Docs |
| Breadcrumb | Docs |
| Button | Docs |
| Calendar Month | Docs |
| Card | Docs |
| Checkbox | Docs |
| Clipboard Copy | Docs |
| Code Block | Docs |
| Content | Docs |
| Data List | Docs |
| Date Picker | Docs |
| Date Time Picker | Docs |
| Description List | Docs |
| Drawer | Docs |
| Dropdown | Docs |
| Dual List Selector | Docs |
| Empty State | Docs |
| Expandable Section | Docs |
| Form | Docs |
| Form Select | Docs |
| Helper Text | Docs |
| Hint | Docs |
| Icon | Docs |
| Input Group | Docs |
| Jump Links | Docs |
| Label | Docs |
| List | Docs |
| Masthead | Docs |
| Menu | Docs |
| Menu Toggle | Docs |
| Modal | Docs |
| Multiple File Upload | Docs |
| Navigation | Docs |
| Notification Badge | Docs |
| Notification Drawer | Docs |
| Number Input | Docs |
| Options Menu | Docs |
| Overflow Menu | Docs |
| Page | Docs |
| Pagination | Docs |
| Panel | Docs |
| Popover | Docs |
| Progress | Docs |
| Progress Stepper | Docs |
| Radio | Docs |
| Search Input | Docs |
| Select | Docs |
| Sidebar | Docs |
| Simple File Upload | Docs |
| Simple List | Docs |
| Skeleton | Docs |
| Slider | Docs |
| Spinner | Docs |
| Switch | Docs |
| Table | Docs |
| Tabs | Docs |
| Text Area | Docs |
| Text Input | Docs |
| Text Input Group | Docs |
| Time Picker | Docs |
| Timestamp | Docs |
| Title | Docs |
| Toggle Group | Docs |
| Toolbar | Docs |
| Tree View | Docs |
| Truncate | Docs |
| Wizard | Docs |
Development
Setup
npm install
For development run storybook
npm run storybook
Build
npm run build
Testing
# Run tests
npm test
# Run tests with UI
npm run test:ui
# Run tests with coverage
npm run test:coverage
Storybook
# Start Storybook
npm run storybook
# Build Storybook
npm run build-storybook
License
MIT
