HomeBookmarks
PulkitPulkit
Pulkit

Pulkit

PUby pulkitxm
7components166.2Kviews724bookmarks

Installs all 30 components. Without our CLI, run instead.

Auto-indexed

Pulkit contents

  • Handwriting SVG

    Handwriting SVG

  • Cursor Spotlight

    Cursor Spotlight

  • Fluid Cursor Trail

    Fluid Cursor Trail

  • Stagger Reveal Grid

    Stagger Reveal Grid

  • Line Draw SVG

    Line Draw SVG

  • Aurora Background

    Aurora Background

  • Party PopperParty Popper

    Party Popper

  • That's all 7 components

    About Pulkit

    Pulkit publishes a shadcn registry at pulkitxm.com, with 30 components installable through the shadcn CLI.

    Components
    30
    GitHub stars
    13
    Last commit
    Mar 21, 2024
    Repository
    pulkitxm/fullstackopen

    Also in the Pulkit registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • Animated Underline

      animated-underline

      Animated underline that tracks hover/active state and slides beneath nav items. Use with data-link-index on list items.

      1 file
      Docs ↗
    • Animated Underline Navbar

      animated-underline-navbar

      Sample navbar demonstrating AnimatedUnderline with hover and active states.

      2 files
    • Gravity Scroll Cards

      gravity-scroll-cards

      Cards that stack and unstack with scroll. Gravity-style depth effect.

      gsap1 file
      Docs ↗
    • Lonely Tab Title

      lonely-tab-title

      Changes the page title to a custom message when the user switches away from the tab. Uses the Page Visibility API.

      1 file
      Docs ↗
    • Magnetic Cursor Dock

      magnetic-cursor-dock

      macOS-style dock with magnetic cursor effect. Items scale and lift as cursor approaches.

      framer-motion1 file
      Docs ↗
    • Network Image

      network-image

      Image component that adapts quality and loading strategy based on real-time network speed.

      1 file
      Docs ↗
    • Number Counter

      number-counter

      Animated number counter that counts from 0 to target. Tabular nums prevent layout shift, respects reduced motion.

      1 file
      Docs ↗
    • Resizable Panels

      resizable-panels

      Drag-resizable panels for dashboards, IDEs, and editors. Supports horizontal/vertical layout and dynamic panel count.

      1 file
      Docs ↗
    • Scroll Progress

      scroll-progress

      Fixed bar at the top that scales horizontally with scroll progress. Uses Framer Motion for smooth updates.

      framer-motion1 file
      Docs ↗
    • Slide In Text

      slide-in-text

      Animates text sliding in from the left with a fade on scroll into view.

      gsap1 file
      Docs ↗
    • SVG Morph Button

      svg-morph-button

      Button with SVG path morph animation. Supports custom paths for idle, hover, loading, success.

      flubber, gsap2 files
      Docs ↗
    • SVG Particle

      svg-particle

      400x400 Three.js particle field from SVG. lucide-react, react-icons, Heroicons, Tabler, Phosphor, and similar libs work out of the box. Cursor repel + spring home.

      @react-three/fiber, three1 file
      Docs ↗
    • Swap Button

      swap-button

      Shadcn button that swaps between two labels (and optional icons) with a crossfade. Width stays put. No layout jump when copy changes.

      button1 file
      Docs ↗
    • Text Scramble

      text-scramble

      Text that decrypts character by character with a scramble effect. Trigger on scroll, hover, or mount.

      1 file
      Docs ↗
    • Theme Toggle

      theme-toggle

      Accessible dark mode toggle with View Transitions API support and icon, icon-label, or dual-tab variants.

      lucide-react, next-themes3 files
      Docs ↗
    • Tilt Card Glare

      tilt-card-glare

      3D card with tilt and holographic glare effect that follows the cursor.

      framer-motion1 file
      Docs ↗
    • Typewriter

      Typewriter effect that cycles through phrases with variable typing speed and blinking cursor.

      framer-motion1 file
      Docs ↗

    From the Pulkit readme

    This is Pulkitxm's FullStackOpen Course's Reposittory

    University Credits

    Certificates (10 Credits)

    • FullStackOpen (7 Credists)

    • GraphQl (1 Credit)

    • TypeScript (1 Credit)

    • React Native

    • CI/CD (1 Credit)

    There are 13 parts in the course and this repository contains all the exercises of it in there separate directories . To locate a specific question of a part there is a dedicated commit Ex - to read the solution of first question of third part you can search a commit like p3q1

    Tech Stack Learned

    • React
    • Node.js
    • Express.js
    • MongoDB
    • ESLint
    • Bycrypt (Saltrounds and encryption for passwords)
    • Jest (Testing by Facebook)
    • Cypress (End-to-End testing)
    • Redux (State Management Tools)
    • React-query (Transact Query, managing and storing data retrieved from the server)
    • Apolo GraphQl ( Communicating with servers)
    • TypeScript
    • React Native (Android & IOS Apps)
    • CI/CD (Github Actions)

    Course Structure

    Part-0: Fundamentals of Web Apps

    • Introduction to the course, outlining its structure, objectives, and requirements.
    • Explanation of the course process, including lectures, assignments, and any project work.
    • Overview of the submission criteria and assessment methods used in the course.
    • Understanding the basic logic of running web applications, including the client-server model.
    • Introduction to the concept of AJAX (Asynchronous JavaScript and XML) for making asynchronous requests in web applications.
    • Explanation of the meaning of "full-stack web development," which encompasses both the front-end and back-end aspects of web applications.

    Part-1: Introduction to React

    • Learn the basics of React, including setting up a project with create-react-app.
    • Understand the concept of components in React and how to create them.
    • Gain a solid grasp of fundamental JavaScript concepts like arrays, objects, and functions.
    • Explore the useState hook for managing state within React components.
    • Understand how changes in state trigger page re-rendering.
    • Dive into more complex state management within React applications.

    Part-2: Communicating with Server

    • Learn how to use React to communicate with a server, a crucial skill in web development.
    • Discover the Fetch API for making HTTP requests from a React application.
    • Learn to parse JSON responses received from the server.
    • Explore the use of React hooks for managing state while interacting with the server.

    Part-3: Programming a Server with Node.js and Express

    • Create a basic Express server for server-side development using Node.js.
    • Handle HTTP requests, including GET and POST requests.
    • Learn how to return JSON responses from the server.

    Part-4: Testing Express Servers and User Administration

    • Write unit tests to ensure the correctness of your Express server code.
    • Use Express middleware to handle user authentication and authorization.

    Part-5: Testing React Apps

    • Write unit tests for your React components, ensuring they work as expected.
    • Implement integration tests to check how React components interact with a server.

    Part-6: Advanced State Management

    • Utilize the Redux library for centralized state management in your React applications.
    • Learn about the React Context API to share state between components.

    Part-7: React Router, Custom Hooks, Styling App with CSS, and Webpack

    • Use the React Router to enable navigation between different pages in your application.
    • Create custom hooks to encapsulate and reuse common functionality.
    • Leverage Webpack for bundling your React code.

    Part-8: GraphQL

    • Explore GraphQL, a more flexible and efficient approach to creating and querying APIs.
    • Understand the advantages of using GraphQL compared to traditional REST APIs.

    Part-9: TypeScript

    • Use TypeScript to write more reliable and maintainable JavaScript code.
    • Realize the benefits of using TypeScript for static typing.

    Part-10: React Native

    • Build simple mobile applications using React Native, allowing you to develop for multiple platforms with a single codebase.
    • Use React Native components to render UI elements natively on mobile platforms.

    Part-11: CI/CD

    • Implement Continuous Integration and Continuous Deployment (CI/CD) tools to automate the software development and delivery process.
    • Discover the numerous benefits of using CI/CD for faster and more reliable software releases.

    Part-12: Containers

    • Learn how to use Docker to create and deploy containers, making applications highly portable and isolated.
    • Understand the benefits of containerization in modern software development.

    Part-13: Using Relational Databases

    • Use Sequelize, an ORM (Object-Relational Mapping) library, to connect to and interact with relational databases.
    • Write SQL queries and manage database migrations, essential for data persistence in applications.

    Read the rest on GitHub →

    What Pulkit builds on

    The packages and primitives its components pull in, counted across the registry.

    button2

    Hooks and utilities

    • tabs

    Registries like Pulkit

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Animate UI

    Animate UI

    by Elliot Sutton

    34

    components

    Browse every shadcn registry we track →

    UI Layouts

    UI Layouts

    by UI Layouts

    127

    components

    Fancy Components

    Fancy Components

    by Daniel Petho

    35

    components

    1. Components
    2. /
    3. pulkitxm
    4. /
    5. Pulkit

    Related libraries

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    Efferd

    Efferd

    by Efferd

    115

    components

    shadcn/ui

    shadcn/ui

    by shadcn

    88

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    Geist

    Geist

    by tigran tumasov

    72

    components

    Tailark

    Tailark

    by Méschac Irung

    56

    components

    About Pulkit

    Pulkit is a component library on 21st.dev by pulkitxm with 7 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 7 Pulkit components

    • Aurora Background
    • Cursor Spotlight
    • Fluid Cursor Trail
    • Handwriting SVG
    • Line Draw SVG
    • Party Popper
    • Stagger Reveal Grid

    Browse all component libraries →