14 | These templates are designed to help you get started with your next
15 | project. They are fully customizable and built with React, NextJS,
16 | TailwindCSS, Framer Motion and Typescript.
17 |
18 |
19 |
20 |
21 |
22 | New templates are coming be the first to know. Join our discord
23 |
39 | {/* your other content*/}
40 |
41 |
42 |
43 | {/* your other content*/}
44 |
45 | );
46 | };
47 |
48 | export default MyButtons;
49 | ```
50 |
51 |
52 |
53 | ## Credits
54 |
55 | Built by [Bossadi Zenith](https://github.com/code-env)
56 |
--------------------------------------------------------------------------------
/content/docs/components/button/create-new.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Create
3 | description: Create button effect when the client's click on the create new.
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `create.tsx` inside the `components/buttons/create.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/buttons && touch components/buttons/create.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx jsx file=/fg/button/create-new.tsx
26 |
27 | ```
28 |
29 | Usage
30 |
31 | In the directory you want to use, do the following:
32 |
33 | ```jsx {1} {8}
34 | import Create from "@/components/buttons/create";
35 |
36 | const MyButtons = () => {
37 | return (
38 |
39 | {/* your other content*/}
40 |
41 |
42 |
43 | {/* your other content*/}
44 |
45 | );
46 | };
47 |
48 | export default MyButtons;
49 | ```
50 |
51 |
52 |
53 | ## Credits
54 |
55 | Built by [Bossadi Zenith](https://github.com/code-env)
56 |
--------------------------------------------------------------------------------
/content/docs/components/button/delete.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Delete
3 | description: Smooth liquid morph effect button delete effect
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `delete.tsx` inside the `components/buttons/delete.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/buttons && touch components/buttons/delete.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/components/buttons/delete.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/button/github.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Github Button
3 | description: Smooth github arrow animation with framer-motion
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `github.tsx` inside the `components/buttons/github.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/buttons && touch components/buttons/delete.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/button/github.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/button/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Buttons overview
3 | description: A collection of buttons for call to actions.
4 | author: code-env
5 | ---
6 |
7 | import Delete from "@/fg/button/delete";
8 | import Github from "@/fg/button/github";
9 | import Sparkles from "@/fg/button/sparkles";
10 | import Checkout from "@/fg/button/checkout";
11 | import SecondBrain from "@/fg/button/second-brain";
12 | import Create from "@/fg/button/create-new";
13 |
14 |
15 |
16 |
17 | ```tsx file=/fg/button/delete.tsx copyId="delete"
18 |
19 | ````
20 |
21 |
22 |
23 |
24 | ```tsx file=/fg/button/github.tsx copyId="github"
25 |
26 | ````
27 |
28 |
29 |
30 |
31 | ```tsx file=/fg/button/sparkles.tsx copyId="sparkles"
32 |
33 | ````
34 |
35 |
36 |
37 |
38 | ```tsx file=/fg/button/checkout.tsx copyId="checkout"
39 |
40 | ````
41 |
42 |
43 |
44 |
45 | ```tsx file=/fg/button/second-brain.tsx copyId="second-brain"
46 |
47 | ````
48 |
49 |
50 |
51 |
52 | ```tsx file=/fg/button/create-new.tsx copyId="create-new"
53 |
54 | ````
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/content/docs/components/button/second-brain.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Second brain
3 | description: Second brain button effect when the customer hovers the second brain button.
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `second-brain.tsx` inside the `components/buttons/second-brain.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/buttons && touch components/buttons/second-brain.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx jsx file=/fg/button/second-brain.tsx
26 |
27 | ```
28 |
29 | Usage
30 |
31 | In the directory you want to use, do the following:
32 |
33 | ```jsx {1} {8}
34 | import Second-brain from "@/components/buttons/second-brain";
35 |
36 | const MyButtons = () => {
37 | return (
38 |
39 | {/* your other content*/}
40 |
41 |
42 |
43 | {/* your other content*/}
44 |
45 | );
46 | };
47 |
48 | export default MyButtons;
49 | ```
50 |
51 |
52 |
53 | ## Credits
54 |
55 | Built by [Bossadi Zenith](https://github.com/code-env)
56 |
--------------------------------------------------------------------------------
/content/docs/components/button/sparkles.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Sparkles
3 | description: Sparkles effect on the button when it's been clicked.
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `sparkles.tsx` inside the `components/buttons/sparkles.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/buttons && touch components/buttons/sparkles.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx jsx file=/fg/button/sparkles.tsx
26 |
27 | ```
28 |
29 | Usage
30 |
31 | In the directory you want to use, do the following:
32 |
33 | ```jsx
34 | import Sparkles from "@/components/buttons/sparkles";
35 |
36 | const MyButtons = () => {
37 | return (
38 |
39 | {/* your other content*/}
40 |
41 |
42 |
43 | {/* your other content*/}
44 |
45 | );
46 | };
47 |
48 | export default MyButtons;
49 | ```
50 |
51 |
52 |
53 | ## Credits
54 |
55 | Built by [Bossadi Zenith](https://github.com/code-env)
56 |
--------------------------------------------------------------------------------
/content/docs/components/cards/birthday.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Birthday
3 | description: Birthdays are things we can't live without. Display all birthdays of friends
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `birthday.tsx` inside the `components/cards/birthday.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/birthday.tsx
19 | ```
20 |
21 | Add this snippet to your `globals.css` file
22 |
23 | ```css
24 | .bar {
25 | overflow-x: auto; /* Allows horizontal scrolling */
26 | scrollbar-width: thin; /* For Firefox, makes the scrollbar thinner */
27 | scrollbar-color: transparent transparent; /* For Firefox, custom scrollbar colors */
28 | }
29 |
30 | /* For WebKit browsers (Chrome, Safari, Edge) */
31 | .bar::-webkit-scrollbar {
32 | height: 8px; /* Adjust scrollbar height for horizontal scrolling */
33 | }
34 |
35 | .bar::-webkit-scrollbar-track {
36 | background: transparent; /* The track is transparent */
37 | }
38 |
39 | .bar::-webkit-scrollbar-thumb {
40 | @apply bg-primary; /* The scrollbar thumb color (more visible) */
41 | border-radius: 10px; /* Rounds the edges of the scrollbar */
42 | border: 2px solid transparent;
43 | }
44 | ```
45 |
46 | Paste the code{" "}
47 |
48 | Open the newly created file and paste the following code:
49 |
50 | ```jsx file=/fg/cards/birthday.tsx
51 |
52 | ```
53 |
54 |
55 |
56 | ## Credits
57 |
58 | Built by [Bossadi Zenith](https://github.com/code-env)
59 |
--------------------------------------------------------------------------------
/content/docs/components/cards/booking.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Booking
3 | description: Booking morph animated cards
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `booking.tsx` inside the `components/cards/booking.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/booking.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/booking.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/calendar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Calendar
3 | description: Keep track and display all your friends' birthdays with ease using this interactive calendar.
4 | author: code-env
5 | date: 2024-10-15
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 |
14 | Run the following command
15 |
16 | It will create a new file `calendar.tsx` inside the `components/cards/calendar.tsx` directory.
17 |
18 | ```bash
19 | mkdir -p components/cards && touch components/cards/calendar.tsx
20 | ```
21 |
22 | Paste the code{" "}
23 |
24 | Open the newly created file and paste the following code:
25 |
26 | ```jsx file=/fg/cards/calendar.tsx
27 |
28 | ```
29 |
30 |
31 |
32 | ## Credits
33 |
34 | Built by [Bossadi Zenith](https://github.com/code-env)
35 |
--------------------------------------------------------------------------------
/content/docs/components/cards/call.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Call
3 | description: Distance is not still a problem given that you're one call away.
4 | author: code-env
5 | date: 2024-10-15
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 |
14 | Run the following command
15 |
16 | It will create a new file `call.tsx` inside the `components/cards/call.tsx` directory.
17 |
18 | ```bash
19 | mkdir -p components/cards && touch components/cards/call.tsx
20 | ```
21 |
22 | Paste the code{" "}
23 |
24 | Open the newly created file and paste the following code:
25 |
26 | ```jsx file=/fg/cards/call.tsx
27 |
28 | ```
29 |
30 |
31 |
32 | ## Credits
33 |
34 | Built by [Bossadi Zenith](https://github.com/code-env)
35 |
--------------------------------------------------------------------------------
/content/docs/components/cards/experience.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Experience
3 | description: User experience card animation to showcase how your customers think about your product
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `experience.tsx` inside the `components/cards/experience.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/experience.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/experience.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/frequency.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Frequency
3 | description: Interactive frequency visualization that syncs with musical input from audio
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `Frequency.tsx` inside the `components/cards/Frequency.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/Frequency.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/frequency.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/hello-world.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hello world
3 | description: Hello world card basically the easiest i made
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `hello-wold.tsx` inside the `components/cards/hello-world.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/hello-world.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/hello-world.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Cards
3 | description: All Card components available.
4 | date: 2025-02-02
5 | ---
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/content/docs/components/cards/linear.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Linear
3 | description: Linear's cards animation when clicked
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `linear.tsx` inside the `components/cards/linear.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/linear.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/linear.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/notch-two.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Notch-two
3 | description: Notch animation. Vercel's style
4 | author: romaric250
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `notch-two.tsx` inside the `components/cards/notch-two.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/notch-two.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/notch-two.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/notch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Notch
3 | description: iPhone notch expandable effect
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `notch.tsx` inside the `components/cards/notch.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/notch.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/notch.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/overview-stacked.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Overview Stacked
3 | description: Overview stacked cards animation when clicked to expand or shrink
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `overview-Stacked.tsx` inside the `components/cards/overview-Stacked.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/overview-stacked.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/overview-stacked.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Inspired from [Jakub Krehel](https://x.com/jakubkrehel/status/1792243156773212264)
34 |
35 | Built by [Bossadi Zenith](https://github.com/code-env)
36 |
--------------------------------------------------------------------------------
/content/docs/components/cards/overview.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Overview
3 | description: Overview cards animation when clicked too reveal a modal
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `overview.tsx` inside the `components/cards/overview.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/overview.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/overview.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/piano.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Piano
3 | description: Interactive piano visualization using Framer Motion for dynamic bar height and color changes based on hover
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `piano.tsx` inside the `components/cards/piano.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/piano.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/cards/piano.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/cards/pill.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Morphing pill
3 | description: A dynamic pill component with tabs built using React and Framer Motion.
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `pill.tsx` inside the `components/cards/pill.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/pill.tsx && components/cards/check-box.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created check-box file and paste the following code:
24 |
25 |
26 | ```jsx file=/fg/cards/pill.tsx
27 |
28 | ```
29 |
30 |
31 |
32 | ## Credits
33 |
34 | Built by [Bossadi Zenith](https://github.com/code-env)
35 |
--------------------------------------------------------------------------------
/content/docs/components/cards/strike.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Strike
3 | description: Strike check card animation
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `strike.tsx` inside the `components/cards/strike.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/cards && touch components/cards/strike.tsx && components/cards/check-box.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created check-box file and paste the following code:
24 |
25 | ```jsx file=/components/hand-crafted/check-box.tsx
26 |
27 | ```
28 |
29 | Paste the code{" "}
30 |
31 | Open the newly created file and paste the following code:
32 |
33 | ```jsx file=/fg/cards/strike.tsx
34 |
35 | ```
36 |
37 |
38 |
39 | ## Credits
40 |
41 | Built by [Bossadi Zenith](https://github.com/code-env)
42 |
--------------------------------------------------------------------------------
/content/docs/components/carousel/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Carousel
3 | description: All Carousel components available.
4 | date: 2025-02-02
5 | ---
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/content/docs/components/carousel/one.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: One
3 | description: Smooth carousel animation with mouse clicked on either directions
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `one.tsx` inside the `components/carousel/one.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/carousel && touch components/carousel/carousel.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/carousel/one.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/carousel/perspective.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Perspective
3 | description: A shift in perspective effect for a carousel of images when clicked
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `perspective.tsx` inside the `components/perspective/perspective.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/perspective && touch components/perspective/perspective.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/carousel/perspective.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/carousel/swipe.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Swipe Card Carousel
3 | description: Smooth swipping carousel animation
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `one.tsx` inside the `components/carousel/one.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/carousel && touch components/carousel/carousel.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/carousel/swipe.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/gallery/hover.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hover
3 | description: A hover effect for a gallery of images
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `hover.tsx` inside the `components/gallery/hover.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/gallery && touch components/gallery/hover.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/gallery/hover.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/gallery/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Galleries
3 | description: All Galleries components available.
4 | date: 2025-02-02
5 | ---
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/content/docs/components/gallery/one.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: One
3 | description: Smooth gallery effect when clicked and changes layout
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `one.tsx` inside the `components/gallery/one.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/gallery && touch components/gallery/one.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/gallery/one.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/gallery/radial.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Radial
3 | description: Smooth radial gallery effect on the
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `radial.tsx` inside the `components/gallery/radial.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/gallery && touch components/gallery/radial.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/gallery/radial.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/gallery/two.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Two
3 | description: Smooth gallery effect that changes layout when clicked.
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `two.tsx` inside the `components/gallery/two.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/gallery && touch components/gallery/two.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/gallery/two.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Components
3 | date: 2025-01-12
4 | description: A collection of hand-crafted animations, effects, and interactions that you can seamlessly integrate into your project with a simple copy and paste.
5 | ---
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/content/docs/components/inputs/google.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Google
3 | description: Google input type animation with framer-motion.
4 | author: code-env
5 | date: 2024-10-23
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 |
14 | Run the following command
15 |
16 | It will create a new file `google.tsx` inside the `components/inputs/google.tsx` directory.
17 |
18 | ```bash
19 | mkdir -p components/inputs && touch components/inputs/google.tsx
20 | ```
21 |
22 | Paste the code{" "}
23 |
24 | Open the newly created file and paste the following code:
25 |
26 | ```jsx file=/fg/inputs/google.tsx
27 |
28 | ```
29 |
30 |
31 |
32 | ## Credits
33 |
34 | Built by [Bossadi Zenith](https://github.com/code-env)
35 |
--------------------------------------------------------------------------------
/content/docs/components/inputs/iMessage.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: iMessage
3 | description: Apple's iMessage animation when the message is been sent by the user.
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `iMessage.tsx` inside the `components/inputs/iMessage.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/inputs && touch components/inputs/iMessage.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/inputs/iMessage.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/inputs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Inputs
3 | description: All Inputs available ready to be used.
4 | date: 2025-02-02
5 | ---
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/content/docs/components/inputs/password-strength.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Password strength
3 | description: Password-strength animation when the user enters their password for confirmation of strength.
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `password-strength.tsx` inside the `components/inputs/password-strength.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/inputs && touch components/inputs/password-strength.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/inputs/password-strength.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## With Zod
32 |
33 |
34 |
35 | ```bash
36 | npm install zod
37 | ```
38 |
39 | ```jsx file=/fg/inputs/password-strength-zod.tsx
40 |
41 | ```
42 |
43 | ## Credits
44 |
45 | Built by [Bossadi Zenith](https://github.com/code-env)
46 |
47 | inspired by [Lndev](https://ui.lndev.me)
48 |
--------------------------------------------------------------------------------
/content/docs/components/inputs/validity.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Validity
3 | description: Password Input with Strength Indicator and Animation.
4 | author: code-env
5 | date: 2024-10-23
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 |
14 | Installing dependencies
15 |
16 | ```bash
17 | npm install zod lucide-react
18 | ```
19 |
20 | Run the following command
21 |
22 | It will create a new file `validity.tsx` inside the `components/inputs/validity.tsx` directory.
23 |
24 | ```bash
25 | mkdir -p components/inputs && touch components/inputs/validity.tsx
26 | ```
27 |
28 | Open the newly created file and paste the following code:
29 |
30 | ```jsx file=/fg/inputs/validity.tsx
31 |
32 | ```
33 |
34 |
35 |
36 | ## Credits
37 |
--------------------------------------------------------------------------------
/content/docs/components/layouts/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Layouts
3 | description: All Layouts available.
4 | date: 2025-02-02
5 | ---
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/content/docs/components/layouts/scroll-count.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Scroll Count
3 | description: Count the number of items in a scrollable container.
4 | date: 2024-11-14
5 | ---
6 |
7 |
8 |
--------------------------------------------------------------------------------
/content/docs/components/menu/circular.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Circular
3 | description: A circular, animated menu built with Framer Motion and Lucide icons
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `Circular.tsx` inside the `components/menu/Circular.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/menu && touch components/menu/Circular.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/menu/circular.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/menu/hamburger.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hamburger
3 | description: An animated hamburger menu built with Framer Motion
4 | author: code-env
5 | date: 2024-11-12
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 |
14 | Run the following command
15 |
16 | It will create a new file `Hamburger.tsx` inside the `components/menu/Hamburger.tsx` directory.
17 |
18 | ```bash
19 | mkdir -p components/menu && touch components/menu/Hamburger.tsx
20 | ```
21 |
22 | Paste the code
23 |
24 | Open the newly created file and paste the following code:
25 |
26 | ```tsx file=/fg/menu/hamburger.tsx
27 | // Your hamburger component code here
28 | ```
29 |
30 |
31 |
32 | ## Props
33 |
34 | | Prop | Type | Default | Description |
35 | | ----------- | ----------------- | -------- | ---------------------------------------------- |
36 | | isActive | boolean | required | Controls the menu's open/closed state |
37 | | setIsActive | function | required | Function to toggle the menu state |
38 | | direction | 'left' \| 'right' | 'left' | Direction the middle bar slides when activated |
39 |
40 | ## Usage
41 |
42 | ```tsx
43 | import { useState } from "react";
44 | import { Hamburger } from "@/components/menu/Hamburger";
45 |
46 | export default function Example() {
47 | const [isActive, setIsActive] = useState(false);
48 |
49 | return (
50 |
55 | );
56 | }
57 | ```
58 |
59 | ## Credits
60 |
61 | Built by [Bossadi Zenith](https://github.com/code-env)
62 |
--------------------------------------------------------------------------------
/content/docs/components/menu/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Menus
3 | description: All the Menu components you need to create a beautiful navigation system.
4 | date: 2025-02-02
5 | ---
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/content/docs/components/navbars/liquid.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Liquid
3 | description: Liquid morph animated navbar
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `liquid.tsx` inside the `components/navbar/liquid.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/navbar && touch components/navbar/liquid.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/navbar/liquid.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Credits
32 |
33 | Built by [Bossadi Zenith](https://github.com/code-env)
34 |
--------------------------------------------------------------------------------
/content/docs/components/navbars/reveal.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Reveal
3 | description: Scroll to reveal the navbar or hover to reveal the navbar content
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Create your utils file
14 |
15 | ### Create utils.ts file
16 |
17 | Create `utils.ts` file in the `libs` folder and paste the following code:
18 |
19 | ```ts
20 | import { type ClassValue, clsx } from "clsx";
21 | import { twMerge } from "tailwind-merge";
22 |
23 | export function cn(...inputs: ClassValue[]) {
24 | return twMerge(clsx(inputs));
25 | }
26 | ```
27 |
28 | Run the following command
29 |
30 | It will create a new file `reveal.tsx` inside the `components/navbars/reveal.tsx` directory.
31 |
32 | ```bash
33 | mkdir -p components/navbar && touch components/navbar/reveal.tsx
34 | ```
35 |
36 | Paste the code{" "}
37 |
38 | Open the newly created file and paste the following code:
39 |
40 | ```jsx file=/fg/navbar/reveal.tsx
41 |
42 | ```
43 |
44 |
45 |
46 | ## Credits
47 |
48 | Built by [Bossadi Zenith](https://github.com/code-env)
49 |
--------------------------------------------------------------------------------
/content/docs/components/navbars/vercel.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Vercel
3 | description: Vercel's smooth hover effect
4 | author: code-env
5 | ---
6 |
7 |
8 |
9 | ## Installation
10 |
11 |
12 |
13 | Run the following command
14 |
15 | It will create a new file `vercel.tsx` inside the `components/buttons/vercel.tsx` directory.
16 |
17 | ```bash
18 | mkdir -p components/navbar && touch components/navbar/vercel.tsx
19 | ```
20 |
21 | Paste the code{" "}
22 |
23 | Open the newly created file and paste the following code:
24 |
25 | ```jsx file=/fg/navbar/vercel.tsx
26 |
27 | ```
28 |
29 |
30 |
31 | ## Vertical Format
32 |
33 |
34 |
35 | ```jsx file=/fg/navbar/vercel-vertical.tsx
36 |
37 | ```
38 |
39 | ## Credits
40 |
41 | Built by [Bossadi Zenith](https://github.com/code-env)
42 |
--------------------------------------------------------------------------------
/content/docs/contributing/best-practices.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Best Practices
3 | date: 2024-10-07
4 | description: Best practices for animation development.
5 | ---
6 |
7 |
8 | This is a work in progress document. If you have any suggestions, feel free to
9 | reach out to us.
10 |
11 |
--------------------------------------------------------------------------------
/content/docs/contributing/folder-structure.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Folder structure
3 | date: 2024-10-07
4 | description: Learn about the folder structure of Ground.
5 | ---
6 |
7 | ## Core Folders
8 |
9 | - `components/`: Contains all the components used across the site.
10 | - `fg/`: Contains all the animations ready and tested to be shipped for production.
11 | - `content/`: Contains the documentation pages.
12 | - `public/`: Contains the static files.
13 | - `app/`: Contains the main Next.js app.
14 | - `app/(hand-crafted)/`: contains pages of testing environment.
15 |
16 | You will mostly be working in the `ground` and `content/docs` folders while creating new animations and documentation pages.
17 |
18 | ## other components
19 |
20 |
21 | `Note`: In the components folder, there're other folders like `buttons`,
22 | `cards`, `carousel`, `forms`, `grid`, `hand-crafted`, `inputs`, `navbar`,
23 | `scroll`. All these folders are used as testing environment before shipping
24 | them out to production. So if you have any animation you'll want to create,
25 | first create a file in one of the corresponding categories above. Then when
26 | you're done with the file, you can then now copy the code to the `contennt/`
27 | directory and select same category.
28 |
29 |
--------------------------------------------------------------------------------
/content/docs/contributing/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Contributing
3 | date: 2024-09-05
4 | description: Learn how to contribute to Framer ground.
5 | ---
6 |
7 | There are multiple ways to contribute to Framer Ground. You can contribute by adding new components, fixing bugs, improving the documentation, or suggesting new features. This guide will help you get started with contributing to Framer ground.
8 |
9 | ## Running locally
10 |
11 | Read the [running locally guide](/docs/contributing/running-locally) to set up your local environment. The guide will help you clone the repository, install dependencies, and run the project locally.
12 |
13 | ## Contributing design & inspiration
14 |
15 | If you want to contribute design or inspiration to Framer ground, you can create a new issue in the [GitHub repository](https://github.com/code-env/framer-ground/issues) with the `design` label. You can share your ideas, designs, or inspirations that you think will be helpful for the project.
16 |
17 | ## Contributing documentation
18 |
19 | You can contribute to the documentation by suggesting improvements, fixing typos, adding examples, or even making it easier to understand. We use [MDX](https://mdxjs.com/) to write documentation.
20 |
21 | ## Contributing code
22 |
23 | ### Contributing components
24 |
25 | If you want to contribute new components to Framer ground, you can read the [contributing components guidelines](/docs/contributing/components) to get started. The guidelines will help you understand how to generate a new component, propose a pull request, and contribute to the project.
26 |
27 | ### Contributing bug fixes & enhancements
28 |
29 | If you want to contribute code to Framer ground, you can read the [contributing guidelines](/docs/contributing/guidelines) to get started. The guidelines will help you understand what to keep in mind while contributing to the project.
30 |
--------------------------------------------------------------------------------
/content/docs/contributing/running-locally.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Running Locally
3 | date: 2024-09-05
4 | description: Set up your local environment to run Framer-ground.
5 | ---
6 |
7 | Framer-ground is built using Next.js, TailwindCSS and Framer-motion. To run Framer-ground locally, you need to have Node.js installed on your machine. You can follow the steps below to set up your local environment.
8 |
9 | ## Getting Started
10 |
11 | Please follow these simple steps to get a local copy up and running.
12 |
13 | ### Prerequisites
14 |
15 | Here is what you need to be able to run Framer-ground.
16 |
17 | - Node.js (Version: >=18.x)
18 | - pnpm \_(recommended)
19 | - Basic understanding of Framer motion animation library
20 |
21 | ## Development
22 |
23 | ### Setup
24 |
25 | 1. Clone the repo into a public GitHub repository (or fork https://github.com/code-env/Framer-ground/fork).
26 |
27 | ```sh
28 | git clone https://github.com/code-env/Framer-ground.git
29 | ```
30 |
31 | 2. Go to the project folder
32 |
33 | ```sh
34 | cd Framer-ground
35 | ```
36 |
37 | 3. Install packages with pnpm
38 |
39 | ```sh
40 | pnpm install
41 | ```
42 |
43 | 4. Set up your `.env` file
44 |
45 | - Duplicate `.env.example` to `.env`
46 |
47 | 5. Setup Node
48 |
49 | If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:
50 |
51 | ```sh
52 | nvm use
53 | ```
54 |
55 | You first might need to install the specific version and then use it:
56 |
57 | ```sh
58 | nvm install && nvm use
59 | ```
60 |
61 | You can install nvm from [here](https://github.com/nvm-sh/nvm).
62 |
63 | 6. Start the development server
64 |
65 | ```sh
66 | pnpm dev
67 | ```
68 |
69 | 7. Open [http://localhost:3000](http://localhost:3000) in the browser to see the result.
70 |
--------------------------------------------------------------------------------
/content/docs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | date: 2024-07-08
4 | description: Understand what Framer ground is and what it can do for you.
5 | ---
6 |
7 | ## What is Framer ground?
8 |
9 | Framer ground is a **free** and **open-source** collection of hand-crafted animations, effects, and interactions that you can seamlessly integrate into your project with a simple copy and paste. The animations are built using TailwindCSS, ReactJS/Nextjs, Framer-motion and TypeScript, and can be easily customized to fit your project's design.
10 |
11 | The main aim of me working on this project is basically to learn framer-motion to create more beautiful and simple interactions(animations) that will improve the user experience on my websites and while learning I decided to share them with the world.
12 |
13 | We use TailwindCSS for most of the layout, but leave the low-level design details, like colors, font style etc, to you so that you can customize the components to fit your project's design.
14 |
15 | ## What Framer ground is not
16 |
17 | Framer ground is not a full-fledged UI library like Material-UI or Chakra-UI. It is a collection of animations and effects that you can use to enhance your project's design. You can use Framer ground alongside other UI libraries or design systems as well (you will need setup TailwindCSS for this).
18 |
--------------------------------------------------------------------------------
/context/command-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createContext, useContext, useState } from "react";
4 |
5 | type CommandMenuProviderProps = {
6 | children: React.ReactNode;
7 | };
8 |
9 | type ContextProps = {
10 | showCommandMenu: boolean;
11 | setShowCommandMenu: React.Dispatch>;
12 | };
13 |
14 | const initialValues = {
15 | showCommandMenu: false,
16 | setShowCommandMenu: () => undefined,
17 | };
18 |
19 | const Context = createContext(initialValues);
20 |
21 | export function CommandMenuProvider({ children }: CommandMenuProviderProps) {
22 | const [showCommandMenu, setShowCommandMenu] = useState(false);
23 |
24 | const value = {
25 | showCommandMenu,
26 | setShowCommandMenu,
27 | };
28 |
29 | return {children};
30 | }
31 |
32 | export function useProvider() {
33 | return useContext(Context);
34 | }
35 |
--------------------------------------------------------------------------------
/fg/button/github.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 | import { motion } from "framer-motion";
5 |
6 | const Github = () => {
7 | const [isHovered, setIsHovered] = useState(false);
8 |
9 | return (
10 |