shadcn-ui-react v0.2.7

shadcn-ui-react

A simple wrapper for shadcn/ui

Install

pnpm add shadcn-ui-react
# or
npm install shadcn-ui-react
# or
yarn add shadcn-ui-react

Usage

Import style.css in the App root:

import 'shadcn-ui-react/dist/style.css';

Then use the components:

import { Button } from 'shadcn-ui-react'

export default function MyComponent() {
  return (<Button>Hello world</Button>)
}

import { Card } from 'shadcn-ui-react'

export default function MyComponent() {
  return (<Card><h1>Hello World</h1></Card>)
}

import React, { useState } from 'react';
import { SearchInput } from './components/search-input';

export default function MyComponent()  {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (term) => {
    setSearchTerm(term);
    console.log('Search term:', term);
  };

  return (<SearchInput placeholder="Search" value={searchTerm} onSearch={handleSearch} />);
};

Example of a login form

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
  Button,
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Input
} from 'shadcn-ui-react';
import * as z from 'zod';

const formSchema = z.object({
  email: z.string().email({ message: 'Enter a valid email address' }),
  password: z
    .string()
    .min(8, { message: 'Password must be at least 8 characters' })
});

type UserFormValue = z.infer<typeof formSchema>;

export default function UserAuthForm() {
  const defaultValues = {
    email: 'demo@domain.com'
  };
  const form = useForm<UserFormValue>({
    resolver: zodResolver(formSchema),
    defaultValues
  });

  const onSubmit = async (data: UserFormValue) => {};

  return (
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="w-full space-y-2"
        >
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input
                    id="email"
                    type="email"
                    placeholder="demo@domain.com"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button className="ml-auto w-full" type="submit">
            Log In
          </Button>
        </form>
      </Form>
  );
}

Example of a data table

import React, { useState } from 'react';
import { DataTable } from 'shadcn-ui-react';
import { ColumnDef } from '@tanstack/react-table';

type Data = {
  id: number;
  name: string;
  age: number;
};

const columns: ColumnDef<Data, any>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'age',
    header: 'Age',
  },
];

const data: Data[] = [
  { id: 1, name: 'John Doe', age: 28 },
  { id: 2, name: 'Jane Smith', age: 34 },
  { id: 3, name: 'Sam Johnson', age: 45 },
];

const Example = () => {
  const [page, setPage] = useState(1);

  const handlePageChange = (newPage: number) => {
    setPage(newPage);
  };

  const handleRowClick = (row: Data) => {
    console.log('Row clicked:', row);
  };

  return (
    <div>
      <h1>Data Table Example</h1>
      <DataTable
        columns={columns}
        data={data}
        pageCount={3}
        page={page}
        onPageChange={handlePageChange}
        onClick={handleRowClick}
      />
    </div>
  );
};

export default Example;