WTTJ / Welcome Ui
Licence: mit
Customizable design system of @wttj with react • styled-components • styled-system • reakit
Stars: ✭ 256
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Welcome Ui
oskrhq-design-system
A mostly reasonable although opinionated approach to building responsive Digital Interfaces sharing the same anatomy.
Stars: ✭ 60 (-76.56%)
Mutual labels: system, ux, design-system
playbook
Playbook Design System
Stars: ✭ 17 (-93.36%)
Mutual labels: design-systems, ux, design-system
Design System
Priceline.com Design System
Stars: ✭ 604 (+135.94%)
Mutual labels: design-system, design-systems, styled-components
Shards Dashboard Vue
A free Vue admin dashboard template pack featuring a modern design system and lots of custom templates and components.
Stars: ✭ 363 (+41.8%)
Mutual labels: design, ux, design-system
Awesome Design
🌟 Curated design resources from all over the world.
Stars: ✭ 13,333 (+5108.2%)
Mutual labels: design, ux, design-system
Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (-13.28%)
Mutual labels: design, design-system, design-systems
Prism
Gett's Design System code generator. Use Zeplin Styleguides as your R&D's Single Source of Truth.
Stars: ✭ 308 (+20.31%)
Mutual labels: design, design-system, design-systems
Ant Ux
🎸 A sitemap template for ux design
Stars: ✭ 1,077 (+320.7%)
Mutual labels: design, ux, design-systems
Ui Ux
📝 Curated list for UI/UX Designers
Stars: ✭ 125 (-51.17%)
Mutual labels: design, ux, design-systems
Argon Design System
Argon - Design System for Bootstrap 4 by Creative Tim
Stars: ✭ 2,307 (+801.17%)
Mutual labels: design, design-system, design-systems
System Design Primer
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
Stars: ✭ 154,659 (+60313.67%)
Mutual labels: system, design, design-system
sketch wireframing kit
Quick Sketchapp wireframing tool for UK government digital services
Stars: ✭ 74 (-71.09%)
Mutual labels: design-systems, design-system
lab-cli
Command line utilities and exporting module for Compositor Lab
Stars: ✭ 52 (-79.69%)
Mutual labels: styled-components, design-system
Design
🎨 Everything Design related in OSCA
Stars: ✭ 23 (-91.02%)
Mutual labels: design, design-systems
ElevenClock
ElevenClock: Customize Windows 11 taskbar clock
Stars: ✭ 1,494 (+483.59%)
Mutual labels: system, customizable
Madara
✍️ A way for people to manage their tasks.
Stars: ✭ 17 (-93.36%)
Mutual labels: styled-components, ux
helsinki-design-system
Components, principles, documentation and templates for the City of Helsinki design system.
Stars: ✭ 82 (-67.97%)
Mutual labels: design-systems, design-system
analogclock
🕰 A customizable analog clock built using React
Stars: ✭ 16 (-93.75%)
Mutual labels: styled-components, customizable
react-native-imaged-card-view
Rising Imaged Card View with Awesome Shadows and Fully Customizable Library for React Native
Stars: ✭ 16 (-93.75%)
Mutual labels: ux, customizable
paramount
React Component Library for React Native and React Web
Stars: ✭ 23 (-91.02%)
Mutual labels: customizable, design-system
Welcome UI
Welcome to the Welcome UI library created by Welcome to the jungle, a customizable design system with react • styled-components • styled-system and reakit.
Here you'll find all the core components you need to create a delightful webapp.
Installation
1 - Install the peer dependencies listed below:
yarn add @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components
2 - Install the the core component and any other components you need for your webapp e.g. if you need just a button…
yarn add @welcome-ui/core @welcome-ui/button
Import library & Theme
Getting started
import React from 'react'
import { createTheme, WuiProvider } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'
// Add theme options (if you want)
const options = {
defaultFontFamily: 'Helvetica',
headingFontFamily: 'Georgia',
colors: {
primary: {
500: '#124C80'
},
success: {
500: '#32CD32'
}
}
}
// Create your theme
const theme = createTheme(options)
export default function Root() {
return (
// Wrap your components with <WuiProvider /> with your theme
<WuiProvider
theme={theme}
// Will inject a CSS reset with normalizer
hasGlobalStyle
// Will show the focus ring on keyboard navigation only
shouldHideFocusRingOnClick
>
<Button>Welcome!</Button>
</WuiProvider>
)
}
Develop on local
- First install and build the packages (only the first time)
yarn first:install
- Start documentation website
yarn start
- Start a watch on all packages to rebuild them easily
yarn watch
- and go to https://localhost:3020
Add some new icons
Follow the steps of icons/README.md
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].