-
Notifications
You must be signed in to change notification settings - Fork 150
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(ui): added Polaris Button Secondary #372
base: main
Are you sure you want to change the base?
Conversation
🚀 Preview deployed to: https://bf807c99.animata.pages.dev |
<Step>Install dependencies</Step> | ||
|
||
```bash | ||
npm install framer-motion lucide-react | ||
``` | ||
|
||
<Step>Update `tailwind.config.js`</Step> | ||
|
||
Add the following to your tailwind.config.js file. | ||
|
||
```json | ||
module.exports = { | ||
theme: { | ||
extend: { | ||
} | ||
} | ||
} | ||
``` | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove these as you don't need them
className={`h-12 w-40 rounded-xl border border-gray-300 bg-white px-4 py-2 font-semibold text-black transition-all duration-200 ease-in-out ${isClicked ? "border-t-4 border-gray-300" : "border-b-2 border-gray-300"}`} | ||
onClick={handleClick} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
instead of tracking click manually, you can use active:border-t-4 active:border-gray-300
--- | ||
title: Polaris Button Secondary | ||
description: It is a clickable button | ||
author: YourTwitterUsername |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
change this to your twitter username
I Have added a New PR for Polaris Button
Recording.2024-10-16.005955.mp4
This is the preview of the Button I have added