i like the look of shadcn. but unfortunately it is not available to react native. could u rewrite me every component from shadcn in react native + nativewind. also please create layout components like row and column and container in addition to that. everything should work together
Building a shadcn-inspired UI Kit for React Native
I'll help you create a shadcn-inspired component library for React Native using NativeWind. Let's start with some essential components and the layout utilities you requested. 12
Setup Instructions
- First, set up a React Native project with NativeWind:
npx create-expo-app -t expo-template-blank-typescript my-shadcn-native
cd my-shadcn-native
npm install nativewind
npm install --dev tailwindcss
npx tailwindcss init- Configure your
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
},
},
plugins: [],
};- Install additional dependencies:
npm install class-variance-authority clsx tailwind-merge lucide-react-native- Create a theme file to define your CSS variables (in
app.jsonor your entry file):
// Add this to your App.tsx
import { StyleSheet } from "react-native";
// Define your CSS variables as a StyleSheet
const theme = StyleSheet.create({
container: {
"--background": "0 0% 100%",
"--foreground": "222.2 84% 4.9%",
"--card": "0 0% 100%",
"--card-foreground": "222.2 84% 4.9%",
"--popover": "0 0% 100%",
"--popover-foreground": "222.2 84% 4.9%",
"--primary": "221.2 83.2% 53.3%",
"--primary-foreground": "210 40% 98%",
"--secondary": "210 40% 96.1%",
"--secondary-foreground": "222.2 47.4% 11.2%",
"--muted": "210 40% 96.1%",
"--muted-foreground": "215.4 16.3% 46.9%",
"--accent": "210 40% 96.1%",
"--accent-foreground": "222.2 47.4% 11.2%",
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "210 40% 98%",
"--border": "214.3 31.8% 91.4%",
"--input": "214.3 31.8% 91.4%",
"--ring": "221.2 83.2% 53.3%",
},
});What's Included
This starter kit includes:
Core UI Components:
- Button (with variants)
- Card (with subcomponents)
- Input
- Checkbox
- Avatar
Layout Components:
- Container (for responsive widths)
- Row (flexible row layout)
- Column (flexible column layout)
Utilities:
cnutility for combining Tailwind classes
Next Steps
To complete your shadcn-inspired library for React Native, you could add more components like:
- Modal/Dialog
- Select/Dropdown
- Tabs
- Toggle/Switch
- Toast notifications
- Form components
Each component would follow the same pattern of using NativeWind for styling and maintaining the shadcn design aesthetic while being fully adapted for React Native.
The components are designed to work together as a cohesive system, just like shadcn/ui, but optimized for the mobile environment.
please also generate the other components
Let's create the additional components to complete your shadcn-inspired React Native UI kit.
Additional Setup Instructions
To use these components, you'll need to follow the same setup instructions I provided earlier:
- Set up a React Native project with NativeWind
- Configure your
tailwind.config.jswith the shadcn color scheme - Install the required dependencies
What's Included
Your complete shadcn-inspired UI kit for React Native now includes:
Core UI Components
- Button (with variants)
- Card (with subcomponents)
- Input
- Checkbox
- Avatar
- Dialog/Modal
- Select/Dropdown
- Tabs
- Switch/Toggle
- Toast notifications
- Form components
- Badge
- Alert
- Separator
- Progress
Layout Components
- Container
- Row
- Column
Usage Example
The example-extended.tsx file demonstrates how to use all these components together in a cohesive application. It includes:
- A tabbed interface for different sections
- Form components with validation states
- Toast notifications
- Modals/dialogs
- Various UI elements like badges, alerts, and progress indicators
Customization
All components use the same design tokens and styling approach as shadcn/ui, making them easy to customize:
- You can modify the
tailwind.config.jsto change the color scheme - Each component uses the
cnutility for combining class names - Components use variants defined with
class-variance-authorityfor consistent styling options
Accessibility
These components include basic accessibility features:
- Proper roles and states for interactive elements
- Support for screen readers
- Focus management in dialogs
- Keyboard navigation support
Next Steps
To further enhance your shadcn-inspired React Native UI kit:
- Add animations for more components
- Create more complex components like data tables or calendars
- Implement a theme provider for easier dark/light mode switching
- Add more form components like sliders, radio buttons, etc.
The components are designed to work together as a cohesive system while being optimized for the mobile environment, giving you a solid foundation for building beautiful React Native applications with the shadcn aesthetic.
can you write this as a complete ui package where i can just import the different components that i need