cult/ui

Cult UI is not a traditional npm component library. It is an extension of the shadcn/ui ecosystem designed to provide motion-rich, niche components.

Instead of installing a monolithic package, components are distributed as source code via a registry. You add components to your project by using the shadcn registry CLI or by copying the source directly into your codebase. This approach ensures you have full ownership and can customize the implementation and styling without being constrained by a dependency layer.

You can install the SVG Bands component using the shadcn CLI or by manual installation.

CLI Installation:

npx shadcn@latest add https://cult-ui.com/r/svg-bands.json

Manual Installation:

1. Copy the component source code into your project.
2. Update the import paths to match your project's directory structure.

The MorphSurface component is an interactive surface that morphs between different states (e.g., a button and a textarea). It is designed for high-fidelity interaction, featuring smooth layout transitions and automatic focus management.

Key Behaviors:

• Auto-focus: The component automatically focuses the textarea when it is opened.
• Dismissal: Clicking outside the component will close it.
• Form Handling: When used within a form, submission extracts FormData from the form element.
• Success Feedback: A success indicator is displayed for 1.5 seconds following a successful submission.
• Animations: Uses layoutId animations for smooth morphing transitions.
• Theming: Works seamlessly in both light and dark modes.

Use className, triggerClassName, and contentClassName to apply custom CSS classes to the root container, the trigger button, and the content area respectively.

<MorphSurface
  className="shadow-2xl"
  triggerClassName="hover:bg-primary/10"
  contentClassName="border-2 border-primary/20"
  triggerLabel="Styled"
  placeholder="Custom styling applied..."
/>

The Typewriter component creates a repeating typewriter effect by cycling through an array of strings.

Props:

• texts: An array of strings to be typed out sequentially.
• delay: The delay between characters or sequences (number).
• baseText: A static string that precedes the animated text (e.g., a prefix).

Example usage:

const texts = [
  "Testing 124",
  "Look at newcult.co",
  "and check gnow.io",
  "Sick af",
]

export default function TypewriterDemo() {
  return (
    <IosOgShellCard>
      <div className="ml-auto px-4 py-2 mb-3 text-white bg-blue-500 rounded-2xl">
        <p className="text-sm md:text-base font-semibold text-base-900 truncate">
          <Typewriter texts={texts} delay={1} baseText="Yo " />
        </p>
      </div>
    </IosOgShellCard>
  )
}

When running npx cult-ui@latest init, you will be prompted to configure your components.json file. You should provide answers for the following prompts:

• TypeScript: Recommended (yes/no)
• Style: (e.g., Default)
• Base color: (e.g., Slate)
• Global CSS file: (e.g., src/index.css)
• CSS variables for colors: (yes/no)
• Import alias for components: (e.g., @/components)
• Import alias for utils: (e.g., @/lib/utils)
• React Server Components: (yes/no)

You can install the PixelHeading component using the shadcn CLI or manually.

CLI Installation:

npx shadcn@latest add https://cult-ui.com/r/pixel-heading-character.json

Manual Installation:

1. Install the geist font package:

npm install geist

2. Copy the component source code into your project.
3. Update the import paths to match your project structure.

You can install the CosmicButton component directly into your project using the shadcn CLI by pointing to the Cult UI registry URL.

npx shadcn@latest add https://cult-ui.com/r/cosmic-button.json

You can install the FractalDotGrid component using the shadcn CLI or by manual installation.

CLI Installation: Run the following command to add the component directly to your project:

Manual Installation:

1. Copy the component source code from the Cult UI registry.
2. Paste it into your project.
3. Update the import paths to match your local project structure.

npx shadcn@latest add https://cult-ui.com/r/bg-animated-fractal-grid.json

You can install the Poll Widget using the shadcn CLI or by manually copying the component code into your project.

CLI Installation:

npx shadcn@latest add https://cult-ui.com/r/poll-widget.json

Manual Installation:

1. Copy the component source code into your project.
2. Update the import paths to match your project's directory structure.