Blocks - ShipThing docs

What are Blocks?

Blocks refers to a reusable component or module in a design system. They are built on CSS variables and styles provided by shadcn/ui to quickly create a consistent and beautiful UI in your application.

What is the difference between Blocks and components?

Blocks is a collection of higher-order components，including: header , footer , hero , features , subscribe, waitlist, faq , pricing , testimonials , cta , usage, login, brand and contact Components are components of Blocks, they are the smallest units of Blocks, used to build Blocks.

How to use Blocks?

The data of Blocks is configured through config.ts, and you only need to introduce Blocks where you need it, such as our Landing Page:

hero.tsx

const Home = async ({ params }: HomeProps) => {
  const { locale } = await params;
  const dictionary = await getDictionary(locale);

  return (
    <>
      <Hero data={heroData(dictionary)} />
      <Brand data={brandData(dictionary)} />
      <ShowCase data={showCaseData(dictionary)} />
      <FeatureRows data={featureData(dictionary)} />
      <Stats data={statsData(dictionary)} />
      <Testimonials data={testimonialData(dictionary)} />
      <PriceForm data={priceData(dictionary)} />
      <FAQ data={faqData(dictionary)} />
      <WaitlistForm data={waitlistData(dictionary)} />
      <SubscribeForm data={subscribeData(dictionary)} />
      <CTA data={ctaData(dictionary)} />
    </>
  );
};

export default Home;

Blocks can help you build applications quickly. We are constantly building new Blocks, you can modify them according to your needs, or create your own Blocks.

​What are Blocks?

​What is the difference between Blocks and components?

​How to use Blocks?

What are Blocks?

What is the difference between Blocks and components?

How to use Blocks?