Skip to content

Footer

A closing section for the foot of a page.

$149 once · every Pro piece

Customize

A last statement with its actions, a hairline, the site map in columns, a bottom row, and the name set enormous and cropped across the foot. The giant word is barely there at rest; under the pointer a soft spot of heat, clipped to the letters, follows on a spring and cools when it leaves. On touch it sweeps once when it comes into view; with reduced motion it keeps a still, warm corner. Takes your router's link component. The heated word is also exported alone as FooterSignature.

Install

npx shadcn@latest add @obsyde/footer

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Footer } from '@/components/obsyde/ember/footer/Footer';

export function Example() {
  return (
    <Footer wordmark="Ember" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/footer/Footer.tsxcomponent
  • ember/footer/footer-demo.cssstyles
  • ember/footer/footer.cssstyles
  • ember/footer/FooterSignature.tsxmodule
  • ember/footer/FooterDemo.tsxdemo
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
layoutLayout'full' | 'signature''full'
wordmarkWordmarkstring'Ember'
statementClosing statementbooleantrue