Stylit is a platform for creating and discovering CSS-styled HTML components that are ready to be used in your next project. Stylit has many customized creations from tons of talented developers. Select the component type you're looking for, filtering by popularity or creation, try out dark mode, publish new components for the world to see, and much more! Stylit is as awesome as people like you make it. 🤙
Make an account to get started, and get ready to take your styles to the next level!
Stylit was created for the creator - these features are to streamline the process of styling, so you can spend more time coding.
- 💯 100+ Components (and growing)
- 🎨 Full Component Editor
- 👓 Style For Hover & Focus Styles
- 🗒️ Save Drafts For Later
- 🏝️ Component Explorer
- 🎩 Filter by Component (3 Components)
- 🗓️ Filter By Creation Date
- 💗 Filter By Popularity
- 🌟 Star Your Favorite Components
- 👍 Like The Best Components
- 🖨️ Ready to Copy styles
- 🌘 Dark mode
- 💻 Fully Responsive Page
- 🔀 Sign In With Google or Github
- Clone the repository
git clone https://github.com/BlakeEriks/stylit.git- Change the working directory
cd stylit- Install dependencies
npm install- Create
.env.localfile in root and add your variables
DATABASE_URL=YOUR_MONGO_DB_API_URL- Run the app
npm run start- NextJS SSR + builtin express server
- TypeScript Typed JavaScript
- Mongo Cloud: Cloud Database-as-a-Service
- Tailwind: easy drop in styles
- lodash: utility functions
- react-icons clean icons
- recoil state between components
- react-color color picker
- react-hot-toast: action notifications
- firebase: user auth
- date-fns: date distancing
- Material UI: helpful, clean components
- Animate.css: drop in css animations
- AOS: scroll animations
- Netlify: for hosting
There's two great ways to contribute to the Stylit community!
-
First is to create components on the editor and publish them for the world! Shoot for creativity and a style that you haven't seen yet on the app.
-
The second way is for developers! Anyone can contribute on any features or create one on their own. Make a pull request following the guidelines. Use the GitHub Flow model. Create a branch, add commits, and open a pull request.
Please read
CONTRIBUTINGfor details on theCODE OF CONDUCT, and the process for submitting pull requests.
- Add gradients to background colors of components
- Inset option for shadows
- Optional private / public components
- Add ability to edit placeholder text styles in input components