Docs
Button
Button
Displays a button or a component that looks like a button.
A ShadCN Button component customized by adding gradient color and adjusting hover states.
Installation
Run the following command to install button.tsx
pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/button.json"
Add the following colors to your CSS file
The command above should install the colors for you. If not, copy and paste the following in your CSS file.
app/globals.css
:root {
--primary-start: 72.4% 0.177 350.2;
--primary-end: 58.7% 0.204 277.4;
}
.dark {
--primary-start: 72.4% 0.177 350.2;
--primary-end: 58.7% 0.204 277.4;
}Usage
import { Button } from "<path-to-ui-components>/button";<Button variant="outline">Button</Button>Link
You can use the link variant to create a link button.
import { Button } from "@/components/ui/button";<Button variant="link">Click here</Button>Alternatively, you can set the asChild parameter and nest the anchor element.
<Button asChild>
<a href="/link">Link</a>
</Button>