
@onyxwebdev
Coastal UI
Changing Svelte front-end development, one component at a time. Visit coastalui.com for more. Made by: https://x.com/thomaslappenbus
Impact
-
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.
1 month ago211 -
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.
2 months ago620 -
Modern Testimonial
A simple and easy to use component for reviews and testimonials.
2 months ago527 -
Simple User Icon
Perfect for dashboard corners or social media platforms. Part of the coastalui.com collection.
3 months ago419 -
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.
5 months ago1.8k -
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.
6 months ago1.4k -
iPhone 15 Mockup
The "Screen Content" div can be manipulated to have anything inside the screen.
6 months ago961 -
Section Heading
A gorgeous section heading with a smooth blur element.
6 months ago833 -
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.
6 months ago1.2k -
Plug and Play Button - Animated gradient background
Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.
6 months ago1.3k -
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.
6 months ago1.2k -
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.
7 months ago1.4k